(一). 学习内容
- HTML 总结和重要标签分类。
(二). 课程重点
- 数量的掌握 HTML 中的重要标签。
(三). 作业情况
1. 将红色标注的重要标签进行整理
(1)文档元数据
元数据（Metadata）含有页面的相关信息，包括样式、脚本及数据，能帮助一些软件 (如搜索引擎， 浏览器等等）更好地运用和渲染页面。对于样式和脚本的元数据，可以直接在网页里定义，也可以链接到包含相关信息的外部文件。
| 标签 | 属性和定义 |
|---|---|
<link> | 链接 |
<meta> | 元数据信息 |
<style> | 样式信息 |
<style> | 文档标题 |
(2)内容分区
内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉(header)、页脚(footer)、导航(nav)和标题(h1~h6)等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容。
| 标签 | 属性和定义 |
|---|---|
<header> | 表示一组引导性的帮助 |
<nav> | 导航 |
<section> | 表示文档中的一个区域（或节），通过是否含一个标题作为子节点来辨识 |
<aside> | 表示与其余页面无关的内容部分 |
<footer> | 表示最近一个章节内容或者根节点元素的页脚 |
<h1>~<h6> | 标题 |
<article> | 表示文档、页面、应用或网站中的独立结构 |
<address> | 地址信息 |
<hgroup> | 代表一个段的标题 |
(3) 文本内容
使用 HTML 文本内容元素来组织在开标签 和闭标签 里的块或章节的内容。这些元素能标识内容的宗旨或结构，而这对于 accessibility 和 SEO 很重要。
| 标签 | 属性和定义 |
|---|---|
<div> | 文档分区元素， 通用型流内容容器 |
<p> | 段落 |
<pre> | 预定义格式文本 |
<ol> | 有序列表 |
<ul> | 无序列表 |
<li> | 列表条目元素 |
<dl> | 描述列表元素 |
<dt> | 术语定义元素 |
<dd> | 描述元素，描述列表 |
<figure> | 代表一段独立的内容 |
<figcaption> | 图片说明/标题 |
<blockquote> | HTML 块级引用元素 |
(4) 内联文本语义
使用 HTML 内联文本语义(Inline text semantics)定义语句，结构，可以是一个词，一段，或任意风格的文字。
| 标签 | 属性和定义 |
|---|---|
<span> | 通用行内容器 |
<a> | 超链接 |
<strong> | 粗体显示 |
<em> | 标记出需要用户着重阅读的内容，可通过嵌套加深着重程度 |
<q> | 短的引用文本 |
<br> | 换行 |
<mark> | 代表突出显示的文字，可以用来显示搜索引擎搜索后关键词。 |
<code> | 呈现一段计算机代码 |
<abbr> | 缩写，并可选择提供一个完整的描述 |
<b> | 提醒注意，样式和粗体类似 |
<time> | 时间 |
<i> | 区分普通文本的一系列文本，内容通常以斜体显示 |
<u> | 使文本在其内容的基线下的一行呈现下划线 |
<cite> | 表示一个作品的引用 |
<data> | 将一个指定内容和机器可读的翻译联系在一起。但如果内容是与 time 或者 date 相关的，一定要使用<time>。 |
<s> | 删除线 |
<samp> | 标识计算机程序输出 |
<var> | 表示变量的名称，或者由用户提供的值 |
(5) 图片和多媒体
| 标签 | 属性和定义 |
|---|---|
<img> | 图片 |
<audio> | 音频内容 |
<video> | 视频内容 |
<track> | 被当作媒体元素—<audio> 和 <video>的子元素来使用。 |
<area> | 在图片上定义一个热点区域，可以关联一个超链接 |
<map> | 定义图像映射。 |
(6) 表格内容
这里的元素用于创建和处理表格数据。元素在一个 元素中可以出现一个或者更多。
| 标签 | 属性和定义 |
|---|---|
<table> | 表格 |
<caption> | 表格的标题，通常作为<table>的第一个子元素出现 |
<thead> | 表格页眉 |
<tbody> | 表格主体 |
<tfoot> | 表格页脚 |
<tr> | 行 |
<col> | 列 |
<th> | 表头 |
<td> | 表格单元 |
(7) 表单
HTML 提供了许多可一起使用的元素，这些元素能用来创建一个用户可以填写并提交到网站或应用程序的表单。
| 标签 | 属性和定义 |
|---|---|
<form> | 表单 |
<input> | 输入域 |
<textarea> | 多行文本域 |
<label> | 标题 |
<button> | 按钮 |
<datalist> | 包含了一组<option>元素,这些元素表示其它表单控件可选值 |
<fieldset> | 一组相关的表单元素，并使用外框包含起 |
<legend> | 表示它的父元素<fieldset>的内容的标题 |
<meter> | 显示已知范围的标量值或者分数值 |
<option> | 用于定义在<select>, <optgroup> 或<datalist> 元素中包含的项 |
<output> | 表示计算或用户操作的结果 |
<progress> | 进度条 |
<select> | 选项菜单 |
2. 自学使用 HTML5 的视频和音频标签，在页面中插入一段音频和视频
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="content" style="width:98%;height:400px;">
<iframe height=498 width=510 src='http://player.youku.com/embed/XMzY2ODYxMzQwOA==' frameborder=0 'allowfullscreen'></iframe>
</div>
<audio src="https://music.163.com/song?id=1311319058&userid=491093008" controls="controls"></audio>
</body>
</html>
成果展示
3. 预习 http://www.w3school.com.cn/css/css_jianjie.asp 和 http://www.w3school.com.cn/css/css_syntax.asp
已完成！
4.问题
a.
(1)HTML 有哪些版本？
5个版本。
超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）：
ISO/IEC 15445:2000（“ISO HTML”）——2000年5月15日发布，基于严格的HTML 4.01语法，是国际标准化组织和国际电工委员会的标准。
(2)HTML5 的新增标签有哪些？
| 标签 | 描述 |
|---|---|
<header> | 定义页面主体上的头部，header标签往往在一对body标签之中 |
<footer> | 定义页面的底部（页脚） |
<section> | 定义 用于表达书的一部分或一章，或者一章内的一节 |
<nav> | 用于菜单导航、链接导航的标签，是navigator的缩写。 |
<article> | 用于表示一篇文章的主体内容，一般为文字集中显示的区域 |
<aside> | 用以表达注记、贴士、侧栏、摘要、插入的引 用等作为补充主体的内容。从一个简单页面显示上，就是边栏，可以在左边，也可以在右边。从一个页面的局部看，就是摘要 |
<hgroup> | 给标题分组，为标题或者子标题进行分组，通常与h1-h6元素组合使用 |
<figure > | 标签规定独立的流内容（图像、图表、照片、代码等等） |
<source > | 为媒介元素（比如 video 和 audio）指定多个播放格式与编码，浏览器会自动选择第一个可以识别的格式。非闭合标签，只有开始标签，没有结束标签。 |
<datalist > | 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值 |
<embed > | 定义嵌入的内容，比如插件。<embed src="helloworld.swf" /> |
<time > | 定义日期或时间，或者两者 |
<address > | ①标签定义文档或文章的作者/拥有者的联系信息 |
<mark> | 定义页面中需要突出显示或高亮显示的内容 |
<details> | 标签定义元素的细节，目前只有 Chrome 和 Safari 6 支持 标签。 与 标签 配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。 |
<video> | 定义视频，比如电影片段或其他视频流。 |
b.
(1)什么是浏览器的解析器?
解析器（parser）是指一个程序，通常是编译器的部分，接收输入的顺序源程序指令、交互式联机命令、标记或者一些其它定义的接口，将它们打破分成几个部分（例如名词（对象），动词（方法）和他们的属性或者选项），然后能够被其它的编程控制（如在编译器中的其它组成）。解析器也能用于检查是否所有的已经提供的输入都是必要的
(2)浏览器是如何解析一个 HTML 文档的?
- IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
- 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。
- 如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。
- 样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。
- JS、CSS中如有重定义，后定义函数将覆盖前定义函数。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
