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

1.  元素分类

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

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

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

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

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

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

2.  常用元素及其说明

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

1.  文本元素

看个例子：

<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.  对内容分组

3.  划分内容

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

<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中的主要变化是不能呢过在用来控制页面布局。

5.  创建表单

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

6.  嵌入内容

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

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

最后

以上就是无限铃铛为你收集整理的[持续更新]HTML5学习笔记（二）的全部内容，希望文章能够帮你解决[持续更新]HTML5学习笔记（二）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。