一、HTML的概述
HTML：Hyper Text Markup Language ---超文本标记语言
用来制作(静态页面)，一个HTML文件扩展名为.html或者.htm结尾
HTML有标准:
* HTML4
* <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
* HTML5:支持视频播放,支持CSS3,支持定位,扩展标签...
* <!DOCTYPE html>
二、标签
1、跟标签：<html></html>
<head>---- html的头标签
<body>---- html的体标签
2、HTML的字体标签
<font>标签:HTML中的字体标签.
使用：<font>文字</font>
* <font>标签的属性:
* <标签 属性名=”属性值” 属性名=”属性值”></标签>
* 属性:
* color属性:字体颜色
* 英文单词设置:black,red,green,blue...
* 使用16进制数设置:#FFFFFF , #FFF
* size属性:字体的大小（1~7）
* face属性:字体
<font color="#00FF00" size="7">我是小绿！</font>
3、HTML的排版标签
a. 标题标签：h标签<h1>...<h6>
b. 段落标签：p标签 <p> </p>
c. 字体加粗标签：b标签 <b> </b>
d. 字体斜体标签：i标签 <i> </i>
e. 字体下划线：u标签 <u> </u>
f. 居中标签：<center>内容</center>
g. <br/> 换行
h. <hr/> 横线
i. <pre> 原生标签
空格
< <
> >
4、HTML的图片标签
图片标签:<img>
* 属性:
* src :图片的来源.
* width :图片的宽度.
* height:图片的高度.
* alt :图片找不到显示的内容.
图片的引入的路径问题:
* 路径：相对路径.
* 如果引入的图片和html文件在同一级路径。
* 直接写文件名或者./文件名
<img src="cs10006.jpg" />
<img src="./cs10006.jpg" />
* 如果引入的图片在html文件的上一级路径。
<img src="../cs10006.jpg" />
* 如果引入的图片在html文件的上一级的上一级路径。
<img src="../../cs10006.jpg" />
* 如果引入的图片在html文件的下一级路径。
<img src="img/cs10006.jpg" />
5、HTML的列表标签
有序列表
<ol>
<li>
</li>
</ol>
有序列表的属性:
* type属性:
* 1 ：数字类型
* a ：英文类型
* i ：罗马字符
* start属性:从type属性的哪个值开始
无序列表
<ul>
<li>
</li>
</ul>
无序列表的属性:
* type属性
* disc ：实心点.
* circle ：空心圆
* square ：方块.
<ol type="1" start="1">
<li>领导讲话</li>
<li>领导讲话</li>
<li>领导讲话</li>
<li>会议结束</li>
</ol>
6、HTML的超链接标签
HTML的超链接标签：<a>
* 属性:
* href :链接的路径
* target :打开的方式
* _self :在自身页面打开
* _blank :新打开一个窗口
* _parent：在父框架集中打开被链接文档
*style = “text-decoration: none; ” 去除默认的下划线
<a href="http://www.163.com" target="_blank">网易</a>
7、HTML的表格标签
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
属性:
width :表格宽度
height :表格高度
border :边框
align :表格水平位置:
* left * center * right
cellspacing：行距
<td>的属性:
* colspan="列数"
* rowspan="行数"
8、HTML的表单标签：<form>
a、常用属性:
action属性:提交的路径.默认提交到当前页面
method属性:请求的方式.GET和POST.默认是GET.
GET方式和POST方式的区别?
GET :数据会显示到地址栏中.GET方式提交是有大小的限制.
POST :数据不会显示到地址栏中.POST方式提交的是没有大小限制.
b、HTML中表单元素：
* <input type=”text”> :文本框.
* 常用属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :文本框的默认值.
* size :文本框的长度.
* maxlength:文本框输入的最大长度.
* readonly:只读文本框.
* disabled: 文本框彻底灰掉。只用于显示固定值
* <input type=”password”> :密码框.
* 常用属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :密码框的默认值.
* size :密码框的长度.
* maxlength:密码框输入的最大长度.
* <input type=”radio”> :单选按钮.
* 常用的属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :单选按钮的默认值.
* checked:单选按钮默认被选中.
* <input type=”checkbox”> :复选按钮.
* 常用的属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :单选按钮的默认值.
* checked:单选按钮默认被选中.
* <input type=”button”> :普通按钮.没有任何功能的按钮.
* <input type=”submit”> :提交按钮.
* <input type=”reset”> :重置按钮.
* <input type=”file”> :文件上传的表单项.
* <input type=”hidden”> :隐藏字段.
* <input type=”image”> :图片按钮
*<input type=”email”> :邮箱
*<input type=”date”> :日期
*<input type=”number”> : 数字框(只可用于输入数字)
*<input type=”color”> : 颜色(可以挑选颜色)
*<select> 下拉列表
name:表单元素名称。后台接收name的值
<option>: 下拉列表选项
value:下拉列表中的值
selected: 下拉列表默认选中的值
* <textarea> 文本域
name: 表单元素名称。后台接收name的值
rows: 文本域的行数
cols: 文本域的列数
9、HTML的框架标签
框架标签:<frameset >,标签与body标签是冲突,有frameset就可以没有body.
* 属性:
* rows：横着切割
* cols： 竖行切割
使用<frame>标签，frame代表切分的每个部分.
点击left.html里的超链接，会把data.html的内容显示到右半部分
<frameset rows="15%,*">
<frame src="top.html" name="top"/>
<frameset cols="15%,*">
<frame src="left.html" name="left"/>
<frame src="right.html" name="right"/>
</frameset>
</frameset>
left.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<center>
<h2>
<a href="data.html" target="right">商品管理</a> <br /><br />
<a href="data.html" target="right">菜单管理</a> <br /><br />
<a href="data.html" target="right">订单管理</a> <br /><br />
<a href="http://www.baidu.com" target="right">任意搜索</a> <br /><br />
</h2>
</center>
</body>
</html>