[持续更新]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:[e-mail]">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:[e-mail]">[e-mail]</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则各自有自己的语义。所以每个标签都有其存在的意义，与其他标签的差异，这些差别需要我们在工作中去理解，应用。