[持续更新]HTML5学习笔记（二）

1.  元素分类

元数据元素（metadata element）：由此可见主要是<meta>元素中的事情了，向浏览器提供信息和指示；

流元素（flow element）：听名字怪异，但是其实是规定这些元素可以成为父元素；

短语元素（phrasing element）：和流元素呼应，规定这些元素可以成为子元素。

元数据还好理解，就是流元素和短语元素好奇怪，举个例子，div既可以是流元素也可以是短语元素，因为它能包含其他的元素也能被其他的元素包含。但是像<b>这样的就仅仅是短语元素了。

其实大家使用这些元素的时候注意一定的规范，时间长了，也不会乱用短语元素和流元素。真的是对初学者来说真的好辛苦，反而拘束了。

差点忘了，还有第四种类型：受限元素。这些元素要么没什么特别的含义，要么就只能用在一些非常有限的情况下。比如说，<li>元素只能有三种父元素<ul>、<ol>、<menu>。

2.  常用元素及其说明

下面列举一些常见的元素标签，及其类型，是否新增。

1.  文本元素

元素	说明	类型	是否新增
a	生成超链接	短语，流
abbr	缩略语	短语
b	不带强调或着重意味的标记一段文字	短语
br	换行	短语
cite	表示其他作品的标题	短语
code	表示计算机代码片段	短语
del	表示从文档中删除的文字	短语，流	是
dfn	表示术语定义	短语
em	标志着重强调一段文字	短语
i	表示与周边内容兼容不同的一段文字，比如来自另一种语言	短语
ins	表示加入文档的文字	短语，流
kbd	表示用户输入内容	短语
mark	表示一段因为与上下文中另一词语相关而突出的现实的内容	短语	是
q	表示引自他处的内容	短语
rp	与ruby元素结合使用，标记括号	短语	是
rt	与ruby元素结合使用，标记注音符号	短语	是
ruby	表示位于表意文字上方或右方的注音符号	短语	是
s	表示文字已不在准确	短语
samp	表示计算机程序输出内容	短语
small	表示小号字体内容	短语
span	一个没有自己语意的通用元素，可以用在希望引入一些全局属性却又不想引入额外语义的情况	短语
strong	表示重要内容	短语
sub	表示下标文字	短语
sup	表示上标文字	短语
time	表示时间或日期	短语	是
u	不带强调或者着重意味的标记一段文字	短语
var	表示程序或计算机系统中的变量	短语
wbr	表示可安全换行的地方	短语	是

看个例子：

<label> a: </label><p>This links to <a href="http://www.baidu.com" target="_blank">baidu</a>. </p>
<br>
<label> abbr: </label><p>The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.</p>
<br>
<label> b: </label><p>这是普通文本 - <b>这是粗体文本</b>。</p>
<br>
<label> cite: </label><p><cite>《富春山居图》</cite>由黄公望始画于至正七年(1347)，于至正十年完成。</p>
<br>
<label> code: </label><p>
下面是代码，等宽文字显示。
<code>
function helloworld(){
alert("Hello World!");
}
</code>
</p>
<br>
<label> del: </label><p><del>我是被删掉的话</del>，文字上会有条线。</p>
<br>
<label> dfn: </label><p><dfn>dfn是defining instance的缩写</dfn>, 显示上为斜体。</p>
<br>
<label> em: </label><p>em在显示上为<em>斜体</em>。</p>
<br>
<label> i: </label><p>汉语：你好。 俄语：<i> Привет </i>。现实上为斜体。</p>
<br>
<label> ins: </label><p>这件商品现在是 <del>100元</del> <ins>50元</ins> 一件。搭配del使用</p>
<br>
<label> kbd: </label><p>常用来显示计算机输出<kbd>Keyboard input</kbd>。现实上是等宽字体。</p>
<br>
<label> mark: </label><p>Do not forget to buy <mark>milk</mark> today.</p>
<br>
<label> q: </label><p>WWF's goal is to:
<q cite="http://www.wwf.org">
build a future where people live in harmony with nature
</q> we hope they succeed. 显示上有引号。</p>
<br>
<label> ruby: </label><p>在东亚使用，显示的是东亚字符的发音。</p>
<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
<br>
<label> samp: </label><p>常用来显示计算机输出<samp>Sample input</samp>。现实上是等宽字体。</p>
<br>
<label> small: </label><p><small>This text is small</small></p>
<br>
<label> sub: </label><p>This text contains
<sub>subscript</sub>. ex: H<sub>2</sub>O</p>
<br>
<label> sup: </label><p>This text contains
<sup>superscript</sup>. ex: 1230 = 1.23 * 10<sup>3</sup>.</p>
<br>
<label> time: </label><p>
我在 <time datetime="2008-02-14">情人节</time> 有个约会。
</p>
<br>
<label> var&pre: </label>
<p>pre 标签很适合显示计算机代码：</p>
<p>var 标签斜体显示变量：</p>
<pre>
function HelloWorld(){
return "Hello World";
}
var <var style="color:red" >test</var> = HelloWorld();
alert(test);
</pre>
<br>
<label> wbr: </label><p>
如果想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。
</p>
<p>当正常情况下英文宽度过小，不足以在行末书写完一个词时，就将行末整个词放到下一行，实现换行，但是加入上面位置的<wbr>时，软换行就能收主动拆分单词.（IE系列除了9都不支持，其他都支持）。</p>
<br>

 

2.  对内容分组

元素	说明	类型	是否新增
blockquote	表示引自他处的大段内容	流
dd	在dl元素之中表示定义	无
div	一个没有任何既定含义的通用元素，是span元素在流元素中的对应物	流
dl	表示包含一系列术语和定义的说明列表	流
dt	在dl之中表示术语	无
figcaption	表示figure元素的标题	无	是
figure	表示图片	流	是
pre	表示其格式应被保留的内容	流

 

3.  划分内容

下列元素用于划分内容，让每个概念，观点或主题彼此分开。

元素	说明	类型	是否新增
address	表示文档或artice的联系信息	流	是
artice	表示一段独立的内容	流	是
aside	表示与周边内容稍有牵扯的内容	流	是
details	生成一块区域，用户将其展开可以获取更多细节知识	流	是
footer	表示尾部	流	是
header	表示首部	流	是
hgroup	将一组标题组织一起，以便文档大纲只显示其中的一个标题	流	是
nav	表示有意集中一起的导航元素	流	是
section	表示一个重要的概念或主题	流	是
summary	用在details元素中，表示该元素内容的标题或说明	无	是

 

<label> blockquote:</label>
<p>
Here comes a long quotation:

<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>

请注意，浏览器在 blockquote 元素前后添加了换行，并增加了外边距。
</p>
<br>
<label> figure:</label>
<p>上海卢浦大桥是当今世界第一钢结构拱桥，是世界上跨度最大的拱形桥。它也是世界上首座完全采用焊接工艺连接的大型拱桥（除合拢接口采用栓接外），现场焊接焊缝总长度达4万多米，接近上海市内环高架路的总长度。卢浦大桥像澳大利亚悉尼的海湾大桥一样具有旅游观光的功能。</p>

<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="http://www.w3school.com.cn/i/shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
<br>
<label> address:</label>
<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<br>
<label> artice:</label>
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
</article>
<br>
<label> aside:</label>
<p>Me and my family visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>
<br>
<label> details:</label>
<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
<p>仅chrome&Safari支持</p>
<br>
<label> footer:</label>
<footer>
<p>Posted by: W3School</p>
<p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>
<br>

 

4.  制表

下列元素用于制作显示数据的表格。表格在HTML5中的主要变化是不能呢过在用来控制页面布局。

元素	说明	类型	是否新增
caption	表示表格标题	无
col	表示一列	无
colgroup	表示一组列	无
table	表示表格	流
tbody	表示表格主体	无
td	表示单元格	无
tfoot	表示表脚	无
th	表示标题行单元格	无
tr	表示一行单元格	无

 

5.  创建表单

下列元素用于创建HTML表单，以便获取用户输入的数据。

元素	说明	类型	是否新增
datalist	定义一组提供给用户的建议值	流
fieldset	表示一组表单元素	流
input	表示用来收集用户输入数据的控件	短语
keygen	生成一对公钥与私钥	短语	是
legend	表示fieldset元素的说明性标签	无
optgroup	表示一组相关的option元素	无
option	表示供用户选择的一个选项	无
output	表示计算结果	短语	是
select	给用户提供一组固定的选项	短语

 

6.  嵌入内容

下列元素用于在HTML文档中嵌入内容。

元素	说明	类型	是否新增
area	表示一个用于客户端分区相应的区域	短语
audio	表示一个音频资源	无	是
canvas	生成一个动态的图形画布	短语，流	是
embed	用插件在HTML文档中嵌入内容	短语	是
iframe	通过创建一个浏览上下文在一个文档中嵌入另一个文档	短语
map	定义客户端分区响应图	短语，流
meter	嵌入数值在许可值范围背景中的图形表示	短语	是
object	在HTML文档中嵌入内容，也可用于生产浏览上下文和生成客户端分区响应图	短语，流
param	表示将通过object元素传递给插件的参数	无
progress	嵌入目标进展或任务情况的图形表示	短语	是
source	表示媒体资源	无	是
svg	表示结构化矢量内容	无	是
track	表示媒体的附加轨道（例如字幕）	无	是
video	表示视频资源	无	是

 

使用HTML5语义化的意义：

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；

用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；

有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

在使用时我们应注意：

尽可能少的使用无语义的标签div和span；

在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；

不要使用纯样式标签，如：b、font、u等，改用css设置。

需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；

使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

表单域要用fieldset标签包起来，并用legend标签说明表单的用途；

每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

 

从上面例子可以看出来，很多标签的说明不一样，但是他们的显示和功能很相近，比如说div,article,section。他们在页面中的显示是一样的，属性也大致相同，但是div是无任何语义的容器，而article，和section则各自有自己的语义。所以每个标签都有其存在的意义，与其他标签的差异，这些差别需要我们在工作中去理解，应用。