前端技巧认识和了解HTML5新标签和基本用法

认识和了解HTML5新标签和基本用法

在学习html的时候,最好要明白每个标签所表示的含义,这样才有助于书写含有语义的标签,例如大家用p标签表示段落,p是英文paragraph的首字母。下面的表格把常用的一些html标签的英文词列出来,以便更清晰的了解这些标签的含义。

html标签完整英文词标签中文含义
divdivision块元素
spanspan行内元素
pparagraph段落
olordered list有序列表
ulunordered list无序列表
lilist item列表项
dldefinition list定义列表
dtdefinition term定义标题
dddefinition description定义描述
h1-h6header1-header6标题1-标题6
hrhorizontal rule水平线
aanchor锚点,超链接
strongstrong重要
ememphasized强调
brbreak换行

在html5中又新增了一些标签,可以让网页中各个部分的语义更加明确,例如nav标签表示导航,下面我们简单的介绍一下新增加的一些标签:

<article> 标签定义独立的文章,例如一篇博文,新闻稿,论坛帖子等。

<article></article>

传统的做法:

<div></div>

<aside> 标签定义article以外的与文章相关的内容。

<aside>独立的内容,但应与文档内容相关。</aside>

传统的做法:

<div>独立的内容,但应与文档内容相关。</div>

<audio> 标签定义声音,比如音乐或其他音频流。

<audio src="seve.mp3">不支持该标签时显示这里的文字</audio>

传统的做法:

<embed src="seve.mp3" type="video/x-ms-asf-plugin" autostart="true" loop="true" />

<video> 标签定义视频,比如电影片段或其他视频流。

<video src="movie.mp4" controls="controls" />不支持则显示这里的文字</video>

传统的做法:

<embed src="movie.mp4" type="video/x-ms-asf-plugin" autostart="true" loop="true" />

<canvas> 标签定义图形,比如图表。这个元素是为了客户端矢量图形而设计的,标签只是图形容器,您必须使用脚本来绘制图形。

<canvas id="mycanvas"></canvas>

传统的做法:

<object data="inc/hdr.svg" type="image/svg+xml"></object>

<figure> 标签用于对元素进行组合,使用<figcaption>元素为元素组添加标题。figcaption元素应该被置于figure元素的第一个或最后一个子元素的位置。

<figure>
  <figcaption>美利坚合众国</figcaption>
  <p>United States of America,简称美国,是由华盛顿哥伦比亚特区,50个州和关岛等众多海外领土组成的联邦共和立宪制国家...</p>
</figure>

传统的做法:

<div>
  <h1>美利坚合众国</h1>
  <p>United States of America,简称美国,是由华盛顿哥伦比亚特区,50个州和关岛等众多海外领土组成的联邦共和立宪制国家...</p>
</div>

<header> 标签定义文档的页眉或头部。

<header></header>

传统的做法:

<div class="header"></div>

<footer> 标签定义文档的页脚或尾部,例如,该标签可以包含作者姓名、文档创作日期等信息。

<footer></footer>

传统的做法:

<div class="footer"></div>

<hgroup> 标签用于对网页或区段的标题进行组合。

<hgroup><h1></h1><h2></h2></hgroup>

传统的做法:

<div><h1></h1><h2></h2></div>

<keygen> 标签定义生成密钥。

<keygen />

传统的做法:没有……

<mark>主要用来在视觉上向用户呈现那些需要突出的文字,就像做了记号的文字。

<mark></mark>

传统的做法:

<span></span>

<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围,既可以在元素的文本中,也可以在 min/max 属性中定义。

<meter value="0.6">60%</meter>

传统的做法:没有……

<nav> 标签定义导航链接的部分。

<nav></nav>

传统的做法:

<ul>……</ul>

<output> 标签定义不同类型的输出,比如脚本的输出。

<output></output>

传统的做法:

<span></span>

<progress> 标签表示进度条,可以使用该标签来显示JavaScript中耗费时间的函数进程。

<progress></progress>

传统的做法:没有……

<section> 标签定义文档中的节,区段。

 <section></section>

传统的做法:

<div></div>

<source> 标签为媒介元素,比如<video>和<audio>定义媒介资源。

<source>

传统的做法:

<param>

<time> 标签定义日期或时间,或者两者。

<time></time>

传统的做法:

<span></span>

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.flooren.com.cn/skill/54.html