HTML总结：
一：结构：
声明版本：<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="keywords" lang="zh-CN" content="爱奇艺，视频网站,电影">
<meta name="description" lang="zh-CN" content="视频，电影">
<title></title>
</head>
<body>
<body>
</html>
二：注意：
1：如何处理乱码问题
在代码中用 <meta charset="">设置编码
同时，选中文件，右键，选择properties选项，设置编码一致。
2：代码注释快捷键：ctrl+/
3：html注释：<!---->
4：行内元素/内联元素：<b>,<a>,<br>,<input>,<img>,<input>,
块级元素：<hn>,<form>,<ol>,<ul>,<li>,<dl>,<div>,<p>,<table>,<tr>,<td>
块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
块级元素主要有：
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有：
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,
在标准文档流里面，块级元素具有以下特点：
①总是在新行上开始，占据一整行；
②高度，行高以及外边距和内边距都可控制；
③宽带始终是与浏览器宽度一样，与内容无关；
④它可以容纳内联元素和其他块元素。
行内元素的特点：
①和其他元素都在一行上；
②高，行高及外边距和内边距部分可改变；
③宽度只与内容有关；
④行内元素只能容纳文本或者其他行内元素。
不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用
三：标签：
1：文本处理
（1）标题
<h1>到<h6>
（2）段落
<p>
align：文本对齐方式
（3）列表(可以嵌套)
有序列表：
<ol type="a" start="n">
<li>xxx<li>
<li>xxx<li>
</ol>
type="a"： 以a,b,c...为顺序排序
start="n": 从n开始排序
无序列表：
<ul type="square">
<li>xxx<li>
<li>xxx<li>
</ul>
type="square": 实心圆/空心圆
（4）分区
<div style="border:1px solid red"> //边框线粗细为1像素，颜色为红色
</div>
（5）修饰行内的文字
<span style="color:red">
</span>
（6）文字加粗
<b>或者<strong>
（7）文字倾斜
<i>或者<em>
（8）添加下划线、删除线，上标，下标
<u>、<del>，<sub>,<sup>
（9）换行
<br>
（10）一个空格 、小于号< 大于号> 、大于号、版权号©
 、、
（11）文本居中
<align="left/center/right">
（12）水平线
<hr>
2：图片和超链接
（1）图片
<img alt="加载失败..." title=" " src="../images/1.jpg"> // ../表示向上跳一级
alt: 图片显示失败时显示的内容
title：图片的标题
（2）超链接
<a>百度</a>
属性：target="_selt/_blank/_new/_parent" 默认是_self
//链接到外网,在新窗口中打开
<a href="http://wwww.baidu.com" target="_blank">百度链接</a>
//链接到内网，在当前页面打开
<a href="demo1.html" target="_self">demo1</a>
//定义锚点，并链接到底端 （注意：name中命名最好用英文，且链接的href里格式是#+命名）
底端写：<a name="low">底端</a>
顶端写：<a href="#low">回到底端</a>
//定义锚点连接到顶端
底端写：<a href="#">top</a>
（3）图片作为超链接
<a href="http://www.baidu.com"><br><img src="../images/x.jpg"></a>
3：制作表格
（1）创建表格（2行2列）
<table border="1px" width="30px">
<tr>
<td>a<td>
<td>b<td>
</tr>
<tr>
<td>c<td>
<td>d<td>
</tr>
</table>
（2）跨行 （跨多少行rowspan等于几)
<table border="1px" width="30px">
//第一行
<tr>
<td rowspan="2">a</td>
<td>b</td>
</tr>
//第二行
<tr>
//由于a要跨行，占据c的位置，所以要先将c删除
<!--td>c</td> -->
<td>d</td>
</tr>
</table>
（3）跨列
<table border="1px" width="30px">
//第一行
<tr>
<td colspan="2">a</td>
//由于a要跨行，占据b的位置，所以要先将b删除
<!==<td>b</td>-->
</tr>
//第二行
<tr>
<td>c</td>
<td>d</td>
</tr>
</table>
4：表单
（1）定义表单：
<form></form>
主要属性：
- action：表单提交的URL
- method：指出表单提交的方式
-enctype：表单数据进行编码的方式
（2）表单控件
表单包含很多不同类型的控件，是一种HTML元素，是信息的输入项
表单控件包括：
-input元素（具有不同的外观）
文本框、密码框
单选框、复选框
按钮
隐藏域、文件选择框
-其他元素
标签、文本域、下拉选
<form action="#">
<!--input: 文本框 -->
<p>
<!-- lable:<lable for="控件ID">文本</label>
是表单中的文本，通过for属性就可以绑定到input元素上，是点击此label时，
就相当于点击了对应的input。id是元素的身份证号，用来引用该元素 -->
//文本框
<label for="username">账号：</label>
<input type="text" id="username"/>
//密码框
<input type="password"/>
//主要属性
- value：由访问者自由输入任何文本
- maxlength: 限制输入的字符数
- readonly: 设置文本控件只读
//单选框
<input type="radio"/>
checked="checked" 设置默认选中
//多选框
<input type="checkbox"/>
<select multiple=“true“></select>
//主要属性
-value：文本，当提交form时，如果选中此项，则value被发送到服务器
-name: 用于实现分组，一组单选框或复选框名称必须相同
-checked="checked" 设置默认选中
//按钮
//提交按钮 （传送表单数据给服务器）
<input type="submit"/>
//重置按钮 （清空表单内容并把所有设置回归默认值）
<input type="reset"/>
//普通按钮 （用于执行客户端脚本）
<input type="button"/>
//主要属性
-value ：按钮的名字
//隐藏框
<input type="hidden"/>：元素不可见
//文件选择框
<input type="file"/>
//文本域
<textarea></textarea>
//属性：
cols:指定文本域的列数
rows:指定文本域的行数
readonly:只读
//下拉选：
语法：
<select>
<option value="1">上路</option>
<option value="2">上路</option>
<option value="3">上路</option>
</select>
selected="selected" 设置默认选中
</p>
</form>
（3）表单高级用法
隐藏域：<input type="hidden" name="hid"><br>
只读：<textarea rows="4" cols="40" readonly="readonly">商品价格等为只读信息</textarea>
内容无法修改
禁用：<input type="submit" value="注册" disabled="disabled"/>
无法点击触发效果
（4） 表单的基本元素 <input> <select> <option> <textarea> 辅助元素 <label> <filedset> <legend>
按钮button不属于表单元素
5.iframe的应用
（1）iframe袁术会创建包含另外一个文档的内联框架
（2）frame与iframe布局区别
frame必须嵌套frameset使用，并且不能再body分区使用
iframe可以独立使用，必须在body分区使用
frame的高度只能通过frameSet控制；iframe可以自己控制，不能通过frameSet控制，
Frame一般用来设置页面布局,将整个页面分成规则的几块,每一块里面包含一个新页面.
iframe用来在页面的任何地方插入一个新的页面.
iframe则更灵活,不要求将整个页面划分,你可以在页面任何地方用iframe嵌入新的页面.
<frame>用于全页面
<iframe>只用于局部
（3）iframe是行内框架、可以改变宽高
（4）iframe通过iframe中嵌套的页面，在该页面源码中通过<center></center>可以实现页面居中
<pre></pre>标签
<a name="bottom">底端</a>
//Attribute (name) is obsolete. Its use is discouraged in HTML5 documents.
//html5中,建议使用css来控制页面的显示.不建议直接在html文件中添加属性.
一：结构：
声明版本：<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="keywords" lang="zh-CN" content="爱奇艺，视频网站,电影">
<meta name="description" lang="zh-CN" content="视频，电影">
<title></title>
</head>
<body>
<body>
</html>
二：注意：
1：如何处理乱码问题
在代码中用 <meta charset="">设置编码
同时，选中文件，右键，选择properties选项，设置编码一致。
2：代码注释快捷键：ctrl+/
3：html注释：<!---->
4：行内元素/内联元素：<b>,<a>,<br>,<input>,<img>,<input>,
块级元素：<hn>,<form>,<ol>,<ul>,<li>,<dl>,<div>,<p>,<table>,<tr>,<td>
块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
块级元素主要有：
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有：
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,
在标准文档流里面，块级元素具有以下特点：
①总是在新行上开始，占据一整行；
②高度，行高以及外边距和内边距都可控制；
③宽带始终是与浏览器宽度一样，与内容无关；
④它可以容纳内联元素和其他块元素。
行内元素的特点：
①和其他元素都在一行上；
②高，行高及外边距和内边距部分可改变；
③宽度只与内容有关；
④行内元素只能容纳文本或者其他行内元素。
不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用，也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用
三：标签：
1：文本处理
（1）标题
<h1>到<h6>
（2）段落
<p>
align：文本对齐方式
（3）列表(可以嵌套)
有序列表：
<ol type="a" start="n">
<li>xxx<li>
<li>xxx<li>
</ol>
type="a"： 以a,b,c...为顺序排序
start="n": 从n开始排序
无序列表：
<ul type="square">
<li>xxx<li>
<li>xxx<li>
</ul>
type="square": 实心圆/空心圆
（4）分区
<div style="border:1px solid red"> //边框线粗细为1像素，颜色为红色
</div>
（5）修饰行内的文字
<span style="color:red">
</span>
（6）文字加粗
<b>或者<strong>
（7）文字倾斜
<i>或者<em>
（8）添加下划线、删除线，上标，下标
<u>、<del>，<sub>,<sup>
（9）换行
<br>
（10）一个空格 、小于号< 大于号> 、大于号、版权号©
 、、
（11）文本居中
<align="left/center/right">
（12）水平线
<hr>
2：图片和超链接
（1）图片
<img alt="加载失败..." title=" " src="../images/1.jpg"> // ../表示向上跳一级
alt: 图片显示失败时显示的内容
title：图片的标题
（2）超链接
<a>百度</a>
属性：target="_selt/_blank/_new/_parent" 默认是_self
//链接到外网,在新窗口中打开
<a href="http://wwww.baidu.com" target="_blank">百度链接</a>
//链接到内网，在当前页面打开
<a href="demo1.html" target="_self">demo1</a>
//定义锚点，并链接到底端 （注意：name中命名最好用英文，且链接的href里格式是#+命名）
底端写：<a name="low">底端</a>
顶端写：<a href="#low">回到底端</a>
//定义锚点连接到顶端
底端写：<a href="#">top</a>
（3）图片作为超链接
<a href="http://www.baidu.com"><br><img src="../images/x.jpg"></a>
3：制作表格
（1）创建表格（2行2列）
<table border="1px" width="30px">
<tr>
<td>a<td>
<td>b<td>
</tr>
<tr>
<td>c<td>
<td>d<td>
</tr>
</table>
（2）跨行 （跨多少行rowspan等于几)
<table border="1px" width="30px">
//第一行
<tr>
<td rowspan="2">a</td>
<td>b</td>
</tr>
//第二行
<tr>
//由于a要跨行，占据c的位置，所以要先将c删除
<!--td>c</td> -->
<td>d</td>
</tr>
</table>
（3）跨列
<table border="1px" width="30px">
//第一行
<tr>
<td colspan="2">a</td>
//由于a要跨行，占据b的位置，所以要先将b删除
<!==<td>b</td>-->
</tr>
//第二行
<tr>
<td>c</td>
<td>d</td>
</tr>
</table>
4：表单
（1）定义表单：
<form></form>
主要属性：
- action：表单提交的URL
- method：指出表单提交的方式
-enctype：表单数据进行编码的方式
（2）表单控件
表单包含很多不同类型的控件，是一种HTML元素，是信息的输入项
表单控件包括：
-input元素（具有不同的外观）
文本框、密码框
单选框、复选框
按钮
隐藏域、文件选择框
-其他元素
标签、文本域、下拉选
<form action="#">
<!--input: 文本框 -->
<p>
<!-- lable:<lable for="控件ID">文本</label>
是表单中的文本，通过for属性就可以绑定到input元素上，是点击此label时，
就相当于点击了对应的input。id是元素的身份证号，用来引用该元素 -->
//文本框
<label for="username">账号：</label>
<input type="text" id="username"/>
//密码框
<input type="password"/>
//主要属性
- value：由访问者自由输入任何文本
- maxlength: 限制输入的字符数
- readonly: 设置文本控件只读
//单选框
<input type="radio"/>
checked="checked" 设置默认选中
//多选框
<input type="checkbox"/>
<select multiple=“true“></select>
//主要属性
-value：文本，当提交form时，如果选中此项，则value被发送到服务器
-name: 用于实现分组，一组单选框或复选框名称必须相同
-checked="checked" 设置默认选中
//按钮
//提交按钮 （传送表单数据给服务器）
<input type="submit"/>
//重置按钮 （清空表单内容并把所有设置回归默认值）
<input type="reset"/>
//普通按钮 （用于执行客户端脚本）
<input type="button"/>
//主要属性
-value ：按钮的名字
//隐藏框
<input type="hidden"/>：元素不可见
//文件选择框
<input type="file"/>
//文本域
<textarea></textarea>
//属性：
cols:指定文本域的列数
rows:指定文本域的行数
readonly:只读
//下拉选：
语法：
<select>
<option value="1">上路</option>
<option value="2">上路</option>
<option value="3">上路</option>
</select>
selected="selected" 设置默认选中
</p>
</form>
（3）表单高级用法
隐藏域：<input type="hidden" name="hid"><br>
只读：<textarea rows="4" cols="40" readonly="readonly">商品价格等为只读信息</textarea>
内容无法修改
禁用：<input type="submit" value="注册" disabled="disabled"/>
无法点击触发效果
（4） 表单的基本元素 <input> <select> <option> <textarea> 辅助元素 <label> <filedset> <legend>
按钮button不属于表单元素
5.iframe的应用
（1）iframe袁术会创建包含另外一个文档的内联框架
（2）frame与iframe布局区别
frame必须嵌套frameset使用，并且不能再body分区使用
iframe可以独立使用，必须在body分区使用
frame的高度只能通过frameSet控制；iframe可以自己控制，不能通过frameSet控制，
Frame一般用来设置页面布局,将整个页面分成规则的几块,每一块里面包含一个新页面.
iframe用来在页面的任何地方插入一个新的页面.
iframe则更灵活,不要求将整个页面划分,你可以在页面任何地方用iframe嵌入新的页面.
<frame>用于全页面
<iframe>只用于局部
（3）iframe是行内框架、可以改变宽高
（4）iframe通过iframe中嵌套的页面，在该页面源码中通过<center></center>可以实现页面居中
<pre></pre>标签
<a name="bottom">底端</a>
//Attribute (name) is obsolete. Its use is discouraged in HTML5 documents.
//html5中,建议使用css来控制页面的显示.不建议直接在html文件中添加属性.