目录
一.将红色标注的重要标签进行整理，整理要求：
a.每个表情按需要说明：用途和作用、标签的实例代码、标签的重要属性和属性意义
b.可以将标签按照自己的立即进行归类
| 标签 | 用途和作用 | 实例代码 | 重要属性及意义 |
|---|---|---|---|
| <!–…--> | 用于在源代码中插入注释，注释不会显示在浏览器中。 | ||
| <!DOCTYPE> | 不是 HTML 标签，它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。位HTML 文档的第一行。 | ||
| <a> | 超链接，用于从一张页面链接到另一张页面。 | <a href="http://www.w3school.com.cn">W3School</a> |
1.herf:指示链接的目标。2.target:规定在何处打开链接文档。 |
| <b> | 规定粗体文本。 | <b>这是粗体文本</b> |
|
| <blockquote> | 定义块引用。 | <blockquote><p>引用</p></blockquote> |
cite:规定引用的来源。 |
| <body> | 定义文档的主体。 | ||
| <button> | 定义一个按钮。 | <button type="button">按钮</button> |
type:规定按钮的类型。 |
| <caption> | 定义表格标题 | <table border="1"><caption>标题</caption><tr><th>1</th><th>2</th></tr><tr><td>3</td><td>4</td> </tr></table> |
|
| <code> | 用于表示计算机源代码或者其他机器可以阅读的文本内容。 | ||
| <datalist> | 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 | <input id="myCar" list="cars" /><datalist id="cars"><option value="BMW"><option value="Ford"><option value="Volvo"></datalist> |
|
| <dd> | 在定义列表中定义条目的定义部分。 | <dl><dt>计算机</dt><dd>用来计算的仪器 ... ...</dd><dt>显示器</dt><dd>以视觉方式显示信息的装置 ... ...</dd></dl> |
|
| <del> | 定义文档中已被删除的文本。 | <del>删除</del> |
1.cite:指向另外一个文档的 URL，此文档可解释文本被删除的原因。2.datetime: 定义文本被删除的日期和时间。 |
| <div> | 把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联 | <div ><h3>This is a header</h3><p>This is a paragraph.</p></div> |
|
| <dl> | 定义了定义列表。 | ||
| <dt> | 定义了定义列表中的项目。 | <dl><dt>计算机</dt><dd>用来计算的仪器 ... ...</dd><dt>显示器</dt><dd>以视觉方式显示信息的装置 ... ...</dd></dl> |
|
| <em> | 把其中的文本显示为斜体。 | <em>斜体</em> |
|
| <figure> | 规定独立的流内容。 | ||
| <footer> | 定义文档或节的页脚。 | ||
| <form> | 用于为用户输入创建 HTML 表单。表单用于向服务器传输数据。 | <form><p>First name: <input type="text" name="fname" /></p><p>Last name: <input type="text" name="lname" /></p><input type="submit" value="Submit" /></form |
1.accept-charset:规定服务器可处理的表单数据字符集。2.action:规定当提交表单时向何处发送表单数据。 |
| <frame> | 定义 frameset 中的一个特定的窗口（框架） | <html><frameset cols="25%,50%,25%"><frame src="frame_a.htm" /><frame src="frame_b.htm" /><frame src="frame_c.htm" /></frameset></html> |
1.src:规定在框架中显示的文档的URL。2.scrolling：规定是否在框架中显示滚动条。 |
| <frameset> | 定义一个框架集。它被用来组织多个窗口（框架）。 | 1.cols:定义框架集中列的数目和尺寸。2.rows:定义框架集中行的数目和尺寸。 | |
| <h1> 到 <h6> | 从大到小可定义标题。 | <h1>这是标题 1</h1><h2>这是标题 2</h2><h3>这是标题 3</h3><h4>这是标题 4</h4><h5>这是标题 5</h5><h6>这是标题 6</h6> |
|
| <head> | 用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。 | <html><head><title>文档的标题</title></head><body> 文档的内容... ...</body></html> |
profile:一个由空格分隔的 URL 列表，这些 URL 包含着有关页面的元数据信息。 |
| <header> | 定义文档的页眉（介绍信息） | ||
| <hr> | 在 HTML 页面中创建一条水平线。 | <hr /> |
|
| <html> | 此元素可告知浏览器其自身是一个 HTML 文档。<html> 与 </html>标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。正如您所了解的那样，文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。 | ||
| <i> | 显示斜体文本效果。 | ||
| <iframe> | 创建包含另外一个文档的内联框架（即行内框架）。 | src:规定在 <iframe> 中显示的页面的 HTML 内容。 | |
| <img> | 向网页中嵌入一幅图像。 | <img src="xxx.jpg" alt="一张图" /> |
1.alt:规定图像的替代文本。2.src:规定显示图像的 URL。 |
| <input> | 用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。 | <input type="submit" value="Submit" /> |
1.type：规定 input 元素的类型。2.checked： 规定此 input 元素首次加载时应当被选中。 |
| <kbd> | 它用来表示文本是从键盘上键入的。浏览器通常用等宽字体来显示该标签中包含的文本。 | ||
| <label> | 为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。 | ||
| <legend> | 为 fieldset 元素定义标题（caption） | ||
| <li> | 定义列表项目。可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。 | <ol> <li>Coffee</li><li>Tea</li> <li>Milk</li></ol><ul> <li>Coffee</li><li>Tea</li> <li>Milk</li></ul> |
|
| <meta> | <meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。 | content：定义与 http-equiv 或 name 属性相关的元信息。 | |
| <nav> | 定义导航链接的部分。 | <nav><a href="index.asp">Home</a><a href="html5_meter.asp">Previous</a><a href="html5_noscript.asp">Next</a></nav> |
|
| <noframes> | noframes 元素可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。 | ||
| <noscript> | noscript 元素用来定义在脚本未被执行时的替代内容（文本）。此标签可被用于可识别 <script> 标签但无法支持其中的脚本的浏览器。 | ||
| <ol> | 定义有序列表。 | <ol><li>Coffee</li><li>Tea</li><li>Milk</li></ol> |
1.start：规定有序列表的起始值。2.type：规定在列表中使用的标记类型。 |
| <optgroup> | 定义选项组。optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。 | ||
| <option> | option 元素定义下拉列表中的一个选项（一个条目）。浏览器将<option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。option 元素位于 select 元素内部。 | <select><option value ="volvo">Volvo</option><option value ="saab">Saab</option><option value="opel">Opel</option><option value="audi">Audi</option></select> |
|
| selected：规定选项（在首次显示在列表中时）表现为选中状态。 | |||
| <p> | 定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。 | <p>This is some text in a very short paragraph</p> |
|
| <q> | 定义短的引用。浏览器经常在引用的内容周围添加引号。 | <q>Here is a short quotation here is a short quotation</q> |
cite：定义引用的出处或来源（citation） |
| <script> | 用于定义客户端脚本，比如 JavaScript。script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。 | <scripttype="text/javascript">document.write("Hello World!")</script> |
1.src：规定外部脚本文件的 URL。2.charset：规定在外部脚本文件中使用的字符编码。3.defer：规定是否对脚本执行进行延迟，直到页面加载为止。 |
| <select> | select 元素可创建单选或多选菜单。<select>元素中的 <option>标签用于定义列表中的可用选项 | 1.size：规定下拉列表中可见选项的数目。2.multiple：规定可选择多个选项。 | |
| <small> | 呈现小号字体效果。 | ||
| <span> | 被用来组合文档中的行内元素。 | ||
| <strong> | 用于强调文本，但它强调的程度更强一些。 | ||
| <style> | 用于为 HTML 文档定义样式信息。在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。type 属性是必需的，定义 style 元素的内容。唯一可能的值是 “text/css”。style 元素位于 head 部分中。 | <html><head><style type="text/css">h1 {color:red}p {color:blue}</style></head><body><h1>Header 1</h1><p>A paragraph.</p></body></html> |
1.type：规定样式表的 MIME 类型。2.media：为样式表规定不同的媒介类型。 |
| <sup> | 可定义上标文本。包含在 <sup>标签和其结束标签 </sup>中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。提示：这个标签在向文档添加脚注以及表示方程式中的指数值时非常有用。如果和 <a>标签结合起来使用，就可以创建出很好的超链接脚注。 | ||
| <table> | 定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。 | <table border="1"><thead><tr> <th>Month</th><th>Savings</th> </tr></thead> <tfoot><tr><td>Sum</td><td>$180</td></tr></tfoot><tbody><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$80</td></tr></tbody></table> |
1.cellpadding：规定单元边沿与其内容之间的空白。2.cellspacing：规定单元格之间的空白。3.frame：规定外侧边框的哪个部分是可见的。4.rules：规定内侧边框的哪个部分是可见的。 |
| <thead> | 定义表格的表头。该标签用于组合 HTML 表格的表头内容。 | 1.valign:规定 tbody 元素中内容的垂直对齐方式。2.align:定义 tbody 元素中内容的对齐方式。 | |
| <tbody> | 表格主体（正文）。该标签用于组合 HTML 表格的主体内容。 | ||
| <tfoot> | 定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。 | ||
| <th> | 定义表格内的表头单元格。 | ||
| <tr> | 定义 HTML 表格中的行。 | ||
| <td> | 定义 HTML 表格中的标准单元格。 | ||
| <time> | 定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。 | <p>我们在每天早上 <time>9:00</time> 开始营业。</p><p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p> |
|
| <title> | 定义文档的标题。浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。 | <head> <title>XHTML Tag Reference</title> </head> |
|
| <ul> | 定义无序列表。 | <ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul> |
|
| <video> | 定义视频，比如电影片段或其他视频流。 | <video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video> |
二.自学使用HTML5的视频和音频标签，在页面中插入一段音频和视频
<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="1.mp4">
</video>
<audio controls="controls">
<source src="2.mp3">
</audio>
</body>
</html>
三.问题
a.HTML有哪些版本？HTML5的新增标签有哪些？
5个版本。
超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）：ISO/IEC 15445:2000（“ISO HTML”）——2000年5月15日发布，基于严格的HTML 4.01语法，是国际标准化组织和国际电工委员会的标准。
1、header元素
表示页面中一个内容区块或真个页面的标题。
2、hgroup元素
表示对真个页面或页面中的一个内容区块的标题进行组合。
3、article元素
表示页面中一块与上下文不相关的独立内容。比如一篇文章。4、aside元素
表示article元素内容之外的、与article元素内容相关的辅助信息。
5、footer元素
表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。
HTML5新规则： 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。 减少对外部插件的需求（比如 Flash），更优秀的错误处理，更多取代脚本的标记，HTML5 应该独立于设备开发进程应对公众透明 ;
HTML5 新特性： 新的特殊内容元素，比如 article、footer等，新的表单控件，比如 calendar、date、time、email、url、search；用于媒介回放的 video 和 audio 元素；用于绘画的 canvas 元素 对本地离线存储的更好的支持。
b.什么是浏览器的解析器，浏览器是如何解析一个HTML文档的？
DOM 解析器把 XML 文档转化为一个包含其内容的树，并可以对树进行遍历。用 DOM 解析模型的优点是编程容易，开发人员只需要调用建树的指令，然后利用navigation APIs访问所需的树节点来完成任务。可以很容易的添加和修改树中的元素。然而由于使用 DOM 解析器的时候需要处理整个 XML 文档，所以对性能和内存的要求比较高，尤其是遇到很大的 XML 文件的时候。由于它的遍历能力，DOM 解析器常用于 XML 文档需要频繁的改变的服务中。
Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验
简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的：
1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
2. 浏览器开始载入html代码，发现< head>标签内有一个< link>标签引用外部CSS文件；
3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
4. 浏览器继续载入html中<body> 部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
5. 浏览器在代码中发现一个<img> 标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
7. 浏览器发现了一个包含一行Javascript代码的<script> 标签，赶快运行它；
8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个<div> （style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；
9. 终于等到了</html> 的到来，浏览器泪流满面……
10. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下< link>标签的CSS路径；
11. 浏览器召集了在座的各位<div> <span> <ul> <li> 们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请 求了新的CSS文件，重新渲染页面。