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

1.  元素分类

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

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

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

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

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

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

元素只能有三种父元素

、
、。

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	表示可安全换行的地方	短语	是

看个例子：

 a: 
This links to baidu. 


 abbr: 
The PRC was founded in 1949.


 b: 
这是普通文本 - 这是粗体文本。


 cite: 
《富春山居图》由黄公望始画于至正七年(1347)，于至正十年完成。


 code: 

下面是代码，等宽文字显示。

function helloworld(){
    alert("Hello World!");
}




 del: 
我是被删掉的话，文字上会有条线。


 dfn: 
dfn是defining instance的缩写, 显示上为斜体。


 em: 
em在显示上为斜体。
 


 i: 
汉语：你好。 俄语： Привет 。现实上为斜体。


 ins: 
这件商品现在是 100元 50元 一件。搭配del使用


 kbd: 
常用来显示计算机输出Keyboard input。现实上是等宽字体。


 mark: 
Do not forget to buy milk today.


 q: 
WWF's goal is to:

build a future where people live in harmony with nature
 we hope they succeed. 显示上有引号。


 ruby: 
在东亚使用，显示的是东亚字符的发音。

漢 (ㄏㄢˋ)



 samp: 
常用来显示计算机输出Sample input。现实上是等宽字体。


 small: 
This text is small


 sub: 
This text contains
subscript. ex: H2O


 sup: 
This text contains
superscript. ex: 1230 = 1.23 * 103.


 time: 

我在 情人节 有个约会。



 var&pre: 
pre 标签很适合显示计算机代码：
var 标签斜体显示变量：
function HelloWorld(){
    return "Hello World";
}
var test = HelloWorld();
alert(test);



 wbr: 

如果想学习 AJAX，那么您必须熟悉 XMLHttpRequest 对象。

当正常情况下英文宽度过小，不足以在行末书写完一个词时，就将行末整个词放到下一行，实现换行，但是加入上面位置的时，软换行就能收主动拆分单词.（IE系列除了9都不支持，其他都支持）。





 

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元素中，表示该元素内容的标题或说明	无	是

 

 blockquote:

Here comes a long quotation:
 

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 元素前后添加了换行，并增加了外边距。



 figure:
上海卢浦大桥是当今世界第一钢结构拱桥，是世界上跨度最大的拱形桥。它也是世界上首座完全采用焊接工艺连接的大型拱桥（除合拢接口采用栓接外），现场焊接焊缝总长度达4万多米，接近上海市内环高架路的总长度。卢浦大桥像澳大利亚悉尼的海湾大桥一样具有旅游观光的功能。
 

  
黄浦江上的的卢浦大桥
  



 address:

Written by Donald Duck.

Visit us at:

Example.com

Box 564, Disneyland

USA



 artice:

  
Internet Explorer 9
  
Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....



 aside:
Me and my family visited The Epcot center this summer.

Epcot Center
The Epcot Center is a theme park in Disney World, Florida.



 details:

Copyright 2011.
All pages and graphics on this web site are the property of W3School.

仅chrome&Safari支持


 footer:

  
Posted by: W3School
  
Contact information: [email protected].





 

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