[持续更新]HTML5学习笔记(二)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u014267351/article/details/48156623

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

展开阅读全文

没有更多推荐了,返回首页