一. 简介
HTML5致力于解决跨浏览器问题，可以部分取代原来的JavaScript。
1.XML文档是一种结构化文档，4条基本规则：
- 整个文档有且仅有一个根元素。
- 每个元素都是由开始标签和结束标签结束，除非是空元素语法。
- 元素与元素之间应该合理的嵌套。
- 元素的属性必须有属性值，而且属性值应该用双引号。
2.html5语法变化
1）标签不再区分大小写
2）元素可以省略结束标签
- 空元素语法的元素：area,base,br,col,command,embed,hr,img,input,keygen,link,mata,param,source,wbr
- 可以省略结束标签的元素：colgroup,dt,dd,li,optgroup,option,p,rt,rp,thead,tbody,tfoot,tr,td,th
- 可以省略全部标签：head,html,body,tbody.
3)允许省略属性值的属性
html5:
<input checked type="checkbox"/>xml:
<input checked="checked" type="checkbox"/>html5中允许省略属性值得属性
| html5 | xml |
| checked | checked="checked" |
| readonly | readonly="readonly" |
| disabled | disabled="disabled" |
| selected | selected="selected" |
| defer | defer="defer" |
| ismap | ismap="ismap" |
| nohref | nohref="nohref" |
| noshade | noshade="noshade" |
| mulitiple | mulitiple="mulitiple" |
| noresize | noresize="noresize" |
4)允许属性不使用引号
2.span div p标签区别
1）span不换行
<span>11111111</span>
<span>22222222</span>
<span>33333333</span>
2）p标签：产生一个段落
3）div标签：导致换行
<div>1111111111</div>
<div>2222222222</div>
<div>3333333333</div>
3.文本格式化元素
- <b>:定义粗体文本。
- <i>:定义斜体文本。
- <em>:定义强调文本。
- <strong>定义粗体文本。
- <small>定义小号字体文本。
- <sup>定义上标文本。
- <sub>定义下标文本。
- <bdo>定义文本显示的方向。
- 可以和span元素相互包含。
4.语义相关元素
<abbr> :用于表示一个缩写。
title：该属性用于指定
<address>用于表示一个地址。
<blockquote>：用于定义一段长的引用文本。
cite:引用地址
<q> : 用于定义一段短的引用文本。
<cite>:同于表示作品。。
<code>:用于表示一段计算机代码。
<dfn>:用于定义一个专业术语
<del>： 定义文档中删除的文本。
<ins>:定义文档中插入的文本。
<samp>定义示范文本内容
<kbd>用于定义键盘文本。
<var>用来定义一个变量。
5.超链接和锚点
- href :链接路径
- target:_self:自身，_blank:新窗口，_top：顶层框架，_parent:父框架
- media指定目标URL所引用的媒体类型。默认值为all。只有当指定了href 属性该属性才生效。
- name：name属性就是该锚点的名称。
2)href属性值可以是绝对路径，也可以是相对路径。
关于这个URL地址解析：
6.列表相关属性
1）<ul>：定义无序列表 <ol>：定义有序列表。
有如下三个属性：start：指定列表起始项。默认是第一个，如1，A等。
type：指定使用哪种类型编号。
reversed：该属性指定是否将排序反转。
<li>:定义列表项目。可以包含<div>...类似元素。
<dl>:也用于定义列表，该元素只能包含<dt><dd>两种子元素。
<dt>:定义标题列表项。
<dd>:定义普通列表项。可以包含<div>...类似元素。
7.图像相关元素
1）src:该属性指定图片文件所在位置，该属性可以是相对路径，也可以是绝对路径。
2)alt:该属性指定一段文本，该文本将作为该图片的提示信息。
3)height：可以是百分比，可以是像素。
4)width:可以是百分比，可以是像素。
5）<map>用于图片的映射。
6)<area>:用于定义图片映射的内部区域。
- shape：指定该内部区域是哪种区域。默认值'rect'，可以是：circle，ploy。
- coords:指定多个坐标值，用于确定该区域所链接的资源。
- alt：该属性指定一段文本。
- href：该区域链接的资源。
- target
- media
8.表格相关元素
定义表格：<table></table>
创建表行：<tr></tr>
创建列(单元格):<td></td>
注意：默认情况下，每行中的列数是统一的。
- <table> 属性
cellpadding：指定单元格内容和单元格边框之间的距离。
cellspacing：指定单元格之间的间距。
width：指定表格的宽度。
height: 设置表格高度
align :设置 表格 在其 父元素中的水平对齐方式，取值：left,center,right
border :边框,边框宽度，以px为单位的数值，px可以省略
bgcolor :背景颜色
- <tr> 属性
align: 该行的内容 水平对齐方式
valign: 该行的内容 垂直对齐方式,取值：top，middle，bottom
bgcolor:背景颜色
- <td> 属性
width， height，align，valign，bgcolor，colspan： 设置单元格跨列， rowspan：设置单元格跨行
2)表格中的其他标记
- <caption></caption>
作用：为表格定义标题
位置：表格正上方居中显示
<table>
<caption>标题</caption>
<tr>
<td></td>
<td></td>
</tr>
</table>
- 行标题或列标题
列标题：第一行中的每一列，加粗，水平居中的效果显示
行标题：每行里面的第一列, 加粗，水平居中的效果显示
行(列)标题:<th></th>
<th></th>作用 与 <td></td>一模一样
- 表格的复杂应用
表格可以被划分成3个部分
表头 <thead></thead>
表主体 <tbody></tbody>
表尾 <tfoot></tfoot>
<table>
<tbody>
<tr></tr>
<tr></tr>
</tbody>
</table>
注意：如果不对表格行进行分组的话，那么默认都属于 tbody 中
- 表格的嵌套
在一个表格中，又嵌入了另外一个表格
被嵌套的表格必须出现在<td>中
<table>
<tr>
<td>
<table>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
3)表格特有的样式属性
- 边框合并
属性：border-collapse
取值：separate:默认值，分离边框模式;collapse: 边框合并模式
- <caption></caption>
作用：将标题位置由默认的位置改到表格之下
属性：caption-side
取值：top：默认,bottom：标题位于表格之下
9.框架相关元素
src:该属性指定一个URL，指定该iframe将装载哪个元素。
10.HTML5新增的特性
1）全局 contenteditable 属性
可继承：父元素是‘可编辑’，则它默认是可编辑。
<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>(2)designMode属性
designMode属性用来指定整个页面是否可编辑，当页面可编辑时，页面中任何支持上述的contentEditable属性的元素都变成了了编辑状态。designMode属性只能在javascript脚本里被编辑修改。该属性有两个值on和off。属性被指定为“on”时，页面可编辑；被指定为“off”时，页面不可编辑。使用javascript脚本来指定designMode属性的方法如下
所示:document.designMode=”on”
(3)hidden属性
在html5中所有的元素都允许使用一个hidden属性。该属性类似于input元素中的hidden元素，功能是通知浏览器不渲染元素，是该元素处于不可见状态。但是元素中的内容还是浏览器创建的，也就是说页面装载后允许使用javascript脚本将该属性取消，取消后该元素变为可见状态，同时元素中的内容也即时显示出来。hidden属性是一个布尔值，为true元素处于不可见状态；为false元素处于可见状态。display：none；
<body>
<div id="target" hidden="true" style="height: 80px">文字内容</div>
<button onclick="var target=document.getElementById('target');
target.hidden=!target.hidden;"
">显示/隐藏</button>
</body>
(4)spellcheck属性
spellcheck属性是html5针对input元素（type=text）与textarea这两个文本输入框提供的一个新属性，它的功能为针对用户输入的文本内容进行拼写和语法检查。spellcheck属性是一个布尔值属性，true或false；在书写时有一个特殊的地方，就是必须明确声明属性值为true或false，
11.HTML5新增文档结构元素
为了更好的表达HTML文档和语义，HTML5新增了许多用于表达文档结构方面的元素，用以取代HTML4中的DIV元素。HTML5提提供的文档结构元素主要有header、article、section、nav、aside和footer等元素。
- header元素
元素定义了页面或内容区域的头部信息，例如：放置页面的站点名称、logo和导航栏、搜索框等放置在页面头部的内容以及内容区域的标题、作者、发布日期等内容。
<header> 标记对之间可以包含h1-h6六个标题元素，以及p、span等元素...</header> - article元素
用于表示页面中一块与上下文不相关的独立内容，比如一个帖子、一篇博客文章。
标记对之间可以包含header、footer、section以及嵌套的article等元素。
<article>
<header>
<h2>标题...</h2>
</header>
<p>段落...</p>
</article>
- section元素
用于对页面的某块内容进行分块，如将该快内容进一步分成章节的标题、内容和页脚等几部分。
标记对之间可以包含h1-h6六个标题元素、p元素、以及多个article元素以表示“分块”内容又包含多篇文章。此外，还可以嵌套section。 -
<article> <header> <h2>...</h2> </header> <section> <h3>...</h3> <p>对文章内容使用section进行分块，块内通常包含标题和内容</p> </section> <section> <h3>...</h3> <p>...</p> </section> </article> - nav元素
用于定义页面上的各种导航条，一个页面可以拥有多个nav元素，作为整个页面或不同部分内容的导航。<body> <header> <h1>美食DIY</h1> </header> <div> nav定义页面的各种导航条 <nav> <ul> <li><a href="...">西瓜</a></li> <li><a href="...">苹果</a></li> <li><a href="...">车厘子</a></li> </ul> </nav> </div> <div>一个新的导航条 <nav> </nav> </div> </body> - aside元素
用于定义当前页面或当前文章的辅助信息，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等内容，通常作为侧边栏内容。 - footer元素
该元素主要用于<article>元素定义'脚注'部分，包括文章的版权信息、作者联系方式等内容，一个页面也可以包含多个footer内容。 -
<footer>脚注内容 <ul> <li>版权信息</li> <li>联系方式</li> </ul> </footer>总结：
标签 描述 <!--...--> 定义注释。 <!DOCTYPE> 定义文档类型。 <a> 定义超链接。 <abbr> 定义缩写。 <acronym> HTML 5 中不支持。定义首字母缩写。 <address> 定义地址元素。 <applet> HTML 5 中不支持。定义 applet。 <area> 定义图像映射中的区域。 <article> 定义 article。 <aside> 定义页面内容之外的内容。 <audio> 定义声音内容。 <b> 定义粗体文本。 <base> 定义页面中所有链接的基准 URL。 <basefont> HTML 5 中不支持。请使用 CSS 代替。 <bdi> 定义文本的文本方向，使其脱离其周围文本的方向设置。 <bdo> 定义文本显示的方向。 <big> HTML 5 中不支持。定义大号文本。 <blockquote> 定义长的引用。 <body> 定义 body 元素。 <br> 插入换行符。 <button> 定义按钮。 <canvas> 定义图形。 <caption> 定义表格标题。 <center> HTML 5 中不支持。定义居中的文本。 <cite> 定义引用。 <code> 定义计算机代码文本。 <col> 定义表格列的属性。 <colgroup> 定义表格列的分组。 <command> 定义命令按钮。 <datalist> 定义下拉列表。 <dd> 定义定义的描述。 <del> 定义删除文本。 <details> 定义元素的细节。 <dfn> 定义定义项目。 <dir> HTML 5 中不支持。定义目录列表。 <div> 定义文档中的一个部分。 <dl> 定义定义列表。 <dt> 定义定义的项目。 <em> 定义强调文本。 <embed> 定义外部交互内容或插件。 <fieldset> 定义 fieldset。 <figcaption> 定义 figure 元素的标题。 <figure> 定义媒介内容的分组，以及它们的标题。 <font> HTML 5 中不支持。 <footer> 定义 section 或 page 的页脚。 <form> 定义表单。 <frame> HTML 5 中不支持。定义子窗口（框架）。 <frameset> HTML 5 中不支持。定义框架的集。 <h1> to <h6> 定义标题 1 到标题 6。 <head> 定义关于文档的信息。 <header> 定义 section 或 page 的页眉。 <hgroup> 定义有关文档中的 section 的信息。 <hr> 定义水平线。 <html> 定义 html 文档。 <i> 定义斜体文本。 <iframe> 定义行内的子窗口（框架）。 <img> 定义图像。 <input> 定义输入域。 <ins> 定义插入文本。 <keygen> 定义生成密钥。 <isindex> HTML 5 中不支持。定义单行的输入域。 <kbd> 定义键盘文本。 <label> 定义表单控件的标注。 <legend> 定义 fieldset 中的标题。 <li> 定义列表的项目。 <link> 定义资源引用。 <map> 定义图像映射。 <mark> 定义有记号的文本。 <menu> 定义菜单列表。 <meta> 定义元信息。 <meter> 定义预定义范围内的度量。 <nav> 定义导航链接。 <noframes> HTML 5 中不支持。定义 noframe 部分。 <noscript> 定义 noscript 部分。 <object> 定义嵌入对象。 <ol> 定义有序列表。 <optgroup> 定义选项组。 <option> 定义下拉列表中的选项。 <output> 定义输出的一些类型。 <p> 定义段落。 <param> 为对象定义参数。 <pre> 定义预格式化文本。 <progress> 定义任何类型的任务的进度。 <q> 定义短的引用。 <rp> 定义若浏览器不支持 ruby 元素显示的内容。 <rt> 定义 ruby 注释的解释。 <ruby> 定义 ruby 注释。 <s> HTML 5 中不支持。定义加删除线的文本。 <samp> 定义样本计算机代码。 <script> 定义脚本。 <section> 定义 section。 <select> 定义可选列表。 <small> 将旁注 (side comments) 呈现为小型文本。 <source> 定义媒介源。 <span> 定义文档中的 section。 <strike> HTML 5 中不支持。定义加删除线的文本。 <strong> 定义强调文本。 <style> 定义样式定义。 <sub> 定义下标文本。 <summary> 定义 details 元素的标题。 <sup> 定义上标文本。 <table> 定义表格。 <tbody> 定义表格的主体。 <td> 定义表格单元。 <textarea> 定义 textarea。 <tfoot> 定义表格的脚注。 <th> 定义表头。 <thead> 定义表头。 <time> 定义日期/时间。 <title> 定义文档的标题。 <tr> 定义表格行。 <track> 定义用在媒体播放器中的文本轨道。 <tt> HTML 5 中不支持。定义打字机文本。 <u> HTML 5 中不支持。定义下划线文本。 <ul> 定义无序列表。 <var> 定义变量。 <video> 定义视频。 <xmp> HTML 5 中不支持。定义预格式文本。
12.语义相关元素
文本内容方面的语义元素，通常用于描述特殊的内容片段。可使用这些语义元素标注出重要信息，如：名称、评价、注意事项、日期等。
包含的元素有：<bdi>、<details>、<summary>、<mark>、<output> 、<ruby>、<rt>、<rp>、<time>、<wbr>等。
<bdi> ：标注一段脱离父元素的文本方向的内容，采用系统默认的文本方向。
<details> ：用于描述文档细节的部分。
<summary> ：标注 <details> 元素的标题。
<mark> ：标注突显的文本。
<output> ：标注一个将来会被填充内容的区域。
<ruby> ：标注注释（中文注音或字符）。
<rt> ：在 <ruby > 元素中使用，定义字符（中文注音或字符）的解释或发音。
<rp> ：在 <ruby > 元素中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<time> ：标注日期或时间。属性：datetime
<wbr> ：标注一个单词在后续空间无法全部容下时进行换行。
<progress> 进度条
语法：
| 1 |
|
属性：max {number} ：设置或获取进度条的最大值。
缺省值：未设定此属性时，控件最大值为1。
value {number} ：设置或获取进度条的当前值。
缺省值：未设置此值时，此进度条为'不确定'型，无具体进度信息；无max属性时(进度条默认最高为1)，value的默认取值范围为0.01~1.0，设置0.2时表示20%的进度。
最低浏览器版本支持：IE 10、Chrome 8
控件内容：当浏览器不支持此控件时，将显示控件里的内容，支持此控件的浏览器不会展示控件的内容。
示例1：含有value属性
| 1 |
|
示例2：含有max属性
| 1 |
|
示例3：不确定进度条(无value属性)
| 1 |
|
IE8 ：显示文本内容。
IE11 ：显示一个从左到右的动画效果。
Chrome ：显示一个从左到右，然后从右到左的动画效果。
<meter> 计量条
说明：表示某种计量，适用于温度、重量、金额等量化的表现。
语法：
| 1 |
|
属性：
value {number} ：设置或获取此控件的值，必须要在min与max值的中间。
max {number} ：设置此控件的最大值。
缺省值：未设定此属性时，控件最大值为1。
min {number} ：设置此控件的最小值。
缺省值：未设定此属性时，控件最小值为0。
low {number} ：设置过底的阈值，当value小于low并大于min时，显示过低的颜色。
high {number} ：设置过高的阈值，当value大于high并小于max时，显示过高的颜色。
optimum {number} ：设置最佳值，
最低浏览器版本支持：IE 不支持、Chrome 8
控件内容：当浏览器不支持此控件时，将显示控件里的内容，支持此控件的浏览器不会展示控件的内容。
示例1：无属性
| 1 |
|
示例2：value < max(max默认为1.0)
| 1 |
|
示例3：value = max(max默认为1.0)
| 1 |
|
示例4：value > max(max默认为1.0)
| 1 |
|
示例5：value < min(min默认为0)
| 1 |
|
示例6：value = min(min默认为0)
| 1 |
|
示例7：value > min(min默认为0)
| 1 |
|
示例8：value < high
| 1 |
|
示例9：value = high
| 1 |
|
示例10：value > high
| 1 |
|
示例11：value < low
| 1 |
|
示例12：value = low
| 1 |
|
示例13：value > low
| 1 |
|
示例14：optimum < low < value < high
| 1 |
|
示例15：low < optimum = value < high
| 1 |
|
示例16：low < value < high < optimum
| 1 |
|
示例17：value < low < high < optimum
| 1 |
|
示例18：optimum < low < high < value
| 1 |
|
