听说HTML5一直很火，我们公司H5开发任务繁重人员不够，老大就让我也学习H5，帮着打打辅助。H5的东西还是比较多的，要想搞好Html，还有很长的一段路要走。。。那我们就来一步步揭开HTML5的神秘面纱吧。本人也是刚开始学习HTML，遇到不懂的也是各种的在网上搜索，把一些零散的知识点碎片整理起来，如果有总结的不周到之处，还望提出。
1、HTML5书写基本格式规范
<!-- 1、文档类型声明 -->
<!doctype html>
<!-- 2、html根标记 -->
<html>
<!-- 3、网页头部 -->
<head>
<!-- 4、指定网页标题 -->
<title>我的第一个html页面</title>
<!-- 5、修改编码格式 -->
<meta charset="utf-8">
</head>
<!-- 6、网页主体 -->
<body text="red" bgcolor="black">
这就是我写的第一个html页面
</body>
</html>效果图如下：
如果你想进一步了解代码，可以在浏览器上按下F12，即可查看代码结构。
2、图片标签
<img> 或者 <img/>src：要显示图像的URL（URL可以是绝对路径、相对路径、根相对路径）
注意：路径要严格区分大小写，尤其是在服务器上
width 或者 height 如果只给定一个属性的话，那么图片会按照给定的值进行等比缩放
title：鼠标移入到图片上时或者图片不显示时，所提示的文字
alt：作用跟title一样，老版本浏览器支持，新版本浏览器几乎不再支持
标签嵌套问题：
1、p 标记中只能嵌套 文本、图像、行内元素、绝对不能嵌套块级元素，否者的话块级元素会将 p 元素拆开 （p标签中不能嵌套h标签或者div等标签）
2、h1…h6 标签 一般只嵌套 文本或者行内元素
3、div：允许嵌套任何元素（除了 html、body、head之外）
4、行内元素不许嵌套块级元素
5、align：尽量加在 块级元素中，行内元素没有作用
3、链接
<a href="跳转的url地址">内容</a>属性：
href：链接URL
target：目标。 打开新页面的方式（在当前标签页打开还是在新标签页中打开），有如下取值：
_self：在当前标签页中打开（默认值）
_blank：新标签页中打开
链接的表现形式：
1、目标文档为下载资源
<a href="123.rar">下载</a>
<a href="123.zip">下载</a>
以上两种格式的文件出现在 href 中，不是跳转，而是 下载2、返回页面顶部的空连接
<a href="#">返回顶部</a>
类似返回顶部的功能3、链接到JavaScript 执行js操作
<a href="javascript:js的代码">你倒是点我啊</a>3、 锚点
锚点使用的场景也非常普遍，在文档的某一个位置处，做一个记号，随时随地可以跳转到该记号的位置处。
1、定义锚点 (两种方式)
1、<a name="锚点名称"></a>
2、<标签 id="值"></标签>
超链接<a>标签使用name的形式定义锚点，其他标签使用id形式2、链接到锚点
<a href="#锚点名称"></a> ：跳转到本页的锚点处
<a href="页面url#锚点名称"></a> 跳转到其他页面的指定锚点处4、html中的表格
1、表格：<table></table>
2、在表格内部，由若干行 组成的 <tr></tr>
3、单元格(列)：<td></td>
4、表格标题：出现的位置在表格之上，水平居中的内容
<caption></caption>
注意：
1、caption的位置 位于 所有 tr 之上，紧跟着 table 之下
2、一个table最多只能有一个 caption
5、属性
1、table属性
width：宽度
height：高度
align：整个表格控件在其父标签中的水平对齐方式(align属性放在table中则与table中的内容无关)
border：边框，边框宽度 以px为单位
bgcolor：表格的背景颜色
cellpadding：内边距，即：单元格与内容之间的距离
cellspacing：外边距，即：单元格与单元格之间的距离
tr属性
bgcolor：行的背景颜色
align：当前行数据的水平对齐方式
valign：当前行数据的垂直对齐方式
（top，middle，bottom）
td属性
width、height、align、valign、bgcolor
colspan：设置单元格跨列
rowspan：设置单元格跨行
注意：colspan、rowspan是 td 的属性 1、th 标记： （1） th 和 td 是同级别的 （2）th：标题，当前列的内容，以标题的样式呈现出来的（字体加粗显示，水平居中）
2、表格的复杂应用
(1)行分组
table 可以将 tr 划分为三部分：表头、表主体、表尾，这三部分相互独立、互不依赖
表头：<thead></thead>
表主体：<tbody></tbody>
表尾：<tfoot><tfoot>
(2)不规则的表格
改变传统表格的模式，每行的列数可以不同
实现方式：设置 td 的跨行 和跨列 属性
跨行：rowspan
从某个单元格位置处 纵向向下，合并几个单元格（包含自己）
注意：被 合并 掉的单元格，一定要从代码中删除掉，否则的话当前行会多出几个单元格(列)
跨列：colspan
从某个单元格位置处 横向向右 ，合并几个单元格（包含自己）
注意：被 合并 掉的单元格，一定要从代码中删除掉，否则的话当前行会多出几个单元格(列)
(3)表格嵌套
在单元格中，允许放置另一个表格
在 <td> 或者 <th> 中再包含一个 <table>5、列表
我们通常会将具有相似特征或者明显具备先后顺序的内容放到列表中。一般分为：有序列表、无序列表
1、有序列表
标签：<ol></ol>
列表项：<li></li>
<ol>
<li>数据1</li>
<li>数据2</li>
<li>数据3</li>
</ol>
属性：
1、type
列表项前面的标识类型
取值：
1：数字（默认值）
a：小写字母
A：大写字母
i：小写罗马数字
.....
一般为了界面美观，我们都是通过css去设置，很少使用这种默认自带的取值。
2、start
规定在 type 值中的第几个位置处开始2、无序列表
标签：<ul></ul>
列表项：<li></li>
属性：
1、type
取值：
disc：实心圆（默认值）
circle：空心圆
square：实心矩形3、列表的使用场合
（1）数据按照 从上到下的顺序 来排列的时候
（2）数据按照 从左到右的顺序 来排列的时候（比如网页的导航）
6、结构标记
1、作用：为了提升标记的语义性
2、结构标记
1、<header></header>
作用：用于定义文档的页眉，就是html文档中最上面的内容
2、<nav></nav>
作用：定义页面的导航部分内容
3、<section></section>
作用：文档主体内容中的小节。现在，section可以表示整个页面中的主体内容
4、<article></article>
作用：用于描述文本性较强，一般会把论坛中的帖子信息、报纸中的文章信息、博客或者微博中的条目信息、
用户回复信息等，优先考虑放在article中
5、<footer></footer>
作用：定义页面末尾或者某一个区域中的脚注信息（位置靠下的信息）
6、<aside></aside>
作用：一般用于定义页面中的 侧边栏 中的信息7、表单
用于显示、收集信息，并且将信息提交给服务器。表单中主要包含两组内容：（1）表单元素（2）表单控件
表单元素：
<form></form>属性：
1、action：动作，后台处理程序的地址（由后端工程师提供）。默认提交给本页
2、method：方法、方式。表单的提交方式。不同的提交方式，约束的内容不一样
常用取值：
get
（1）显示提交数据，会将提交信息显示在地址栏上，安全性不够高
（2）大小限制，最大支持到 2KB 的提交
（3）如果不设置method属性的话，默认按照get方式提交
（4）适用场合：向服务器索取数据时，优先使用get （例如搜索栏搜索商品等）
post
1、隐式提交数据，不会将提交的信息显示在地址栏上，安全性较高，所有有关密码的信息提交时，必须要用post
2、没有大小限制（大量数据提交时可以使用post提交）
3、使用场合：
（1）安全性要求较高的页面（例如一些敏感信息）
（2）要求服务器 去处理数据时，使用post提交（例如：我们将用户名。密码等一系列信息都给服务器，服务器处理之后返回登陆成功或者失败的结果信息）
（3）传递数据量较大时
3、enctype
功能：设置表单中提交的数据的 编码方式。规范哪些数据可以提交给服务器
取值：
（1）application/x-www-form-urlencoded
可以讲普通的文本，特殊的字符，一起提交给服务器
（2）multipart/form-data
允许将表单中的 文件，传递给服务器，普通文本不能直接传递
（3）text/plain
只能将普通文本（英文、数字）传递给服务器，特殊字符（&，*，+等等）不允许
表单控件
1、定义：包含在表单中的元素，具备可视化外观，并且可以接受用户输入的数据
2、分类
1、input 元素
作用：收集用户信息
语法：<input> 或者 <input/>
属性：
1、type：根据不同的类型值，可以创建不同的输入控件（例如：密码形式的）
2、value：控件的值，提交给服务器的数据
3、name：控件的名称，必须设置，否者无法提交。服务器主要根据name的值，来获取value
4、disabled：禁用控件，该属性可以没有值文本框
<input type="text"> ：表示文本框
属性：
1、maxlength：限制输入的最大字符数
2、readonly：只能看输入框中的值，不能改
3、value：控件值，同时也可以设置控件的默认值单选框
单选框：<input type="radio">
属性：
1、name
2、value 控件上的文字
3、checked复选框
复选框：<input type="checkbox">按钮
按钮：
1、提交按钮 <input type="submit">
2、重置按钮 <input type="reset">
3、普通按钮
没有固定功能，由开发者通过js来设置
<input type="button">
属性：
value：控件上的文字文本域
textarea 文本域
接收用户录入的多行数据。
标签：
<textarea>文本内容</textarea>
属性：
name
readonly：只读，不能改
cols：指定文本区域的列数（即：一行能显示多少个字符，变相设置控件的宽度）
rows：指定文本区域的行数，变相设置控件的高度，数据如果超出高度的话，则出现滚动条继续添加数据select 和 option 选项框
1、下拉选项框
2、滚动列表
都用<select></select>标签
属性：
name
size：默认显示的选项数量是几个
如果值 大于 1 则为 滚动列表，否者就是下拉选项框
multiple：设置多选，可以没有值
选项：<option>显示的值</option>
属性：
value：提交给后台服务器的值
selected：设置默认被选中，可以没有值
<select>
<option>北京</option>
<option>上海</option>
</select> 隐藏域
不想让用户看见，但是又要提交给服务器的数据，可以放在 隐藏域中。
例如：用户 id
用法：<input type="hidden">
属性：
name
value文本选择框
用于向服务器提交要上传的文件 <input type="file">
注意：
1、表单的method属性必须是post
2、表单的enctype属性值必须为multipart/form-data其他标记
1、<label></label>
作用：关联文本和表单控件，关联后，点击文本就如同是点击控件一样的效果
属性：
for：指定 与当前 label 相关联控件的 id
这样的话文字也就和控件一样可以被点击了（让文字也具备点击的属性）
例子：
<input id="haha" type="radio" name="gender" value="man" checked> <label for="haha">男</label>
2、为控件分组
<fieldset>：为控件分组
<legend>：为分组指定一个标题
<fieldset>
<legend>地址信息</legend>
地址：<input type="text" /> <br/>
邮编：<input type="text" />
</fieldset> 浮动框架
浮动框架：
可以将多个页面放到一个页面中去显示，就是页面间的嵌套
比如头部、尾部，多个页面同时都使用这个头部跟尾部，类似将公共的功能封装
标签：
<iframe></iframe>
属性：
1、src：要引入的网页的url
2、width
3、height
4、frameborder：浮动框架的边框，可以手动设置为 0
例子：
<iframe src="header.html"></iframe> ：引入头部文件
<iframe src="footer.html"></iframe> ：引入尾部文件额外知识点
1、想要在网页中出现以下字符，需要用到转义，转义字符：
< <
> >
空格
© 表示版权所有符号
¥ ￥
2、能够改变文本的显示效果的标记：
<b></b> 加粗
<i></i> 斜体
<u></u> 下划线
<s></s> 删除线
<sub></sub> 下标（比如：几的几次方）
<sup></sup> 上标
3、标题元素：
<h1></h1>
...
<h6></h6>
一级标题字最大，六级标题字最小
4、段落元素：
<p></p>
5、换行(相当于回车效果)元素：
<br> 或 <br/>
6、分割线元素（绘制一条水平线）
<hr>
注意：水平线的前后内容会换行显示
属性：
size：高度
width：宽度
color：颜色
align：线条水平对齐方式
7、预格式化：极少使用
作用：保留 源文档中的格式（只针对 回车 和 空格）
<pre></pre>