最近每次笔试都栽在这上面表示坑shi人啦啦啦~~~~记不住哇,这么多的标签记不住哇~。好吧,吐槽完毕。作为一名志于体面的页面仔,冷静下来,良心发现还是应该好好总结下这个基本知识的。

HTML5新增加标签的优势:语义性好,有利于SEO,代码少。

一. 新增的标签

HTML5新增的标签可以查看[《HTML 参考手册》——by W3CSchool][1]
新增的标签主要分为以下6类:

类别 元素
结构元素 header, footer, section, aside, article, nav, figure, figcaption, details, summary
标识文本元素 mark, time, wbr, bdi
表单与交互元素 input(不是新元素,但增加了很多新类型), detalist, keygen, meter, progress, command, menu, output, dialog
音、视频及插件 audio, video, source, embed, track
Canvas canvas
语言支持 bdo, rp, rt, ruby, bdo

(1) 新增的结构元素

header

header标签定义文档的页眉,通常是一些引导和导航信息。它不局限于写在网页头部,也可以写在网页内容里面。

footer

footer标签定义section或document的页脚,包含了与页面、文章或是部分内容有关的信息,比如说文章的作者或者日期。作为页面的页脚时,一般包含了版权、相关文件和链接。

section

section标签定义文档中的节,表示一段专题性的内容,一般会带有标题,如章节、页眉、页脚或文档中的其它部分。

aside

aside标签用来装载非正文的内容,被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的,可以被删除,而不会影响到网页的内容、章节或是页面所要传达的信息。例如广告,成组的链接,侧边栏等等。

article

article代表一个独立的、完整的相关内容块,可独立于页面其它内容使用,常用在一篇博客文章,一个用户评论等等。

nav

nav标签是一个可以作为页面导航的链接组。

hgroup

hgroup标签是对网页或区段section的标题元素(h1-h6)进行组合。
hgroup标签在html5.1版本中被废除,w3c不建议使用h1-h6来标志副标题。

figcaption

figcaption标签定义 figure 元素的标题。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

figure

用于对元素进行组合。多用于图片与图片描述组合。

details

用于描述文档或文档某个部分的细节。可与summary标签配合使用,summary可以为details定义标题。标题是可见的,用户点击标题时,会显示出details。summary应该是details的第一个子元素。

<details>
    <summary>Name & Extension:</summary>
    <p>正文。。。</p>
</details>

summary

summary标签包含 details 元素的标题,用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。

(2) 新增的标识文本元素

mark

mark标签主要用来在视觉上向用户呈现那些需要突出的文字。mark标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

meter

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

time

time标签用来标记文章发布时间,可以让机器、搜索引擎等例句这篇文章是什么时间发表的。

<time datetime="2012-9-27">xxxx-xx-xx</time>
`

wbr

表示软换行。与br元素的区别:br元素表示此处必须换行;wbr表示浏览器窗口或父级元素足弓宽时(没必要换行时),不换行,而宽度不够时主动在此处换行。

bdi

bdi 指的是 bidi 隔离。bdi标签允许设置一段文本,使其脱离其父元素的文本方向设置。

(3) 新增的表单与交互元素

input的新类型

input标签不是HTML新定义了,但是HTML5中新增不少有用的新类型,主要有:
email, url, number, range,Date Pickers(日期选择器:date, month, week, time, datetime, datetime-local), search, color;

datalist

为input标签定义一个下拉列表,配合option使用。datalist及其选项不会被显示出来,它仅仅是合法的输入值列表。使用 input 元素的 list属性来绑定 datalist。

<input type="url" list="url_list" name="link" /> 
<datalist id="url_list"> 
    <option label="W3School" value="http://www.W3School.com.cn" /> 
    <option label="Google" value="http://www.google.com" /> 
    <option label="Microsoft" value="http://www.microsoft.com" /> 
</datalist>

keygen

定义表单里一个生产的键值,加密信息传送。
keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。
标签规定用于表单的密钥对生成器字段。

<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

这里我们加入了一个“name”为“security”的 Keygen 控件,在该表单提交时,浏览器会提示您输入密码以确保提交安全,如下图所示:(支持浏览器 Firefox,Chrome,Safari 和 Opera)。点击“submit”时,会弹出“password”对话框。

menu

定义菜单列表。当希望列出表单控件时使用该标签。注意与nav的区别,menu专门用于表单控件。
menu呈现了一组用户可执行或激活的命令。这既包含了可能出现在屏幕顶端的列表菜单,也包含了那些隐藏在按钮之下、当点击按钮后显示出来的文本菜单。

dialog

dialog用来定义对话框或窗口。只有 Chrome 和 Safari 6 和支持 dialog 标签。
举例:dislog和dt,dd配合使用实现对话框。

meter

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

command

command标签定义命令按钮,比如单选按钮、复选框或按钮。

output

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

progress

progress标签运行中的进程。可以使用 progress标签来显示 JavaScript 中耗费时间的函数的进程。

(4) 新增的音、视频及插件

video

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

<video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>

HTML4:

<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>

audio

定义音频,如音乐或其他音频流。
HTML5:

<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>
或者
<audio controls="controls"> 
  <source src="song.ogg" type="audio/ogg"> 
  <source src="song.mp3" type="audio/mpeg"> 
 Your browser does not support the audio tag. 
</audio>

HTML4:

<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>

source

source标签为媒介元素(比如 <video><audio>)定义媒介资源。
HTML5: <source>
HTML4: <param>

embed

定义外部的可交互的内容或插件,用来嵌入内容(包括各种媒体)。
格式可以是Midi,Wav,AIFF,AU,MP3,flash等。可以在不使用插件的情况下操作媒体文件,极大提升用户体验。
HTML5: <embed src="flash.swf" />
html4:<object data="flash.swf" type="application/x-shockwave-flash"></object>

track

标签为诸如 video 元素之类的媒介规定外部文本轨道。
用于规定字幕文件或其他包含文本的文件,当媒介播放时,这些文件是可见的。

(5) 新增的Canavas元素

canvas

定义图形,比如图表和其他图像。canvas元素只是图形容器(画布),必须使用脚本来绘制图形。

(6) 新增的语言支持元素

ruby

定义注释或音标(中文注音或字符)。
<ruby> 以及 <rt> 标签一同使用。ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。

rt

定义对ruby的注释内容文本。定义字符(中文注音或字符)的解释或发音。

rp

在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。

<ruby>
  漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

bdo

bdo标签覆盖默认的文本方向。

二. HTML5取消的一些过时的 HTML4的标签有:

1. 可以使用css代替的标签

删除basefont,big,center,font,s,strike,tt,u这些纯样式的元素,html5中提倡把画面展示性功能放在css中统一编辑。

2、html5不再使用frame

不再用frame,noframes和frameset,这些标签对可用性产生负面影响。HTML5中不支持frame框架,只支持iframe框架,或者用服务器方创建的由多个页面组成的符合页面的形式,删除以上这三个标签。

3、只有个别浏览器支持的标签

bgsound背景音乐,blink文字闪烁,marquee文字滚动,applet等;

4、其他不常用的标签

ul替代dir;
pre替代listing;
code替代xmp;
ruby替代rb;
abbr替代acronym;
guids替代nextid;
废除isindex,使用form与input相结合的方式替代;
废除plaintex使用“text/plian”(无格式正文)MIME类型替代;

三. 重新定义的html标签

b:代表内联文本,通常是粗体,没有传递表示重要的意思;
i:代表内联文本,通常斜体,没有传递表示重要的意思;
dd:可以和details与figure一同使用,定义包含文本,djalog也可用;
dt:可以和details与figure一同使用,汇总细节,dialog也可用;
menu:重新定义用户界面的菜单,配合commond或者menuitem使用;
small:表示小字体,例如打印注释或者法律条款;
strong:表示重要性而不是强调符号;

四. 兼容IE6~8的方法

由于HTML5新增加的标签不能在IE6~8中识别。常见的做法是在页面渲染body中的DOM元素前,用JavaScript生成HTML5中定义的新标签,以使浏览器能将新标签当普通的内联块级元素处理,然后用CSS定义这些新标签的样式为display:block(因为默认样式是display:inline-block)。

方法1:直接在head中定义生成HTML5新标签的JS代码

<!--[if lt IE9]> 
<script> 
   (function() {
     if (! 
     /*@cc_on!@*/
     0) return;
     var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
     var i= e.length;
     while (i--){
         document.createElement(e[i]);
     } 
})() 
</script>
<![endif]-->

方法2:使用Google的html5shiv.js

html5shiv.js的github地址是:https://github.com/afarkas/html5shiv

<!--[if lt IE 9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

结合中国大陆国情,这个CDN链接有可能被墙了,所以,靠谱的方法是自己在github中下载一个版本置于国内的服务器中。

但是不管使用以上哪种方法,都要初始化新标签的CSS,因为HTML5在默认情况下表现为内联元素,对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局:

/*html5*/
article, aside, details, figcaption, figure, footer, header, menu, nav, section {display:block}

但是如果ie6~8 禁用脚本的用户,那么启用了HTML5新标签的块元素将无法显示,这是我们不希望看到的。
可以参照facebook的做法,即引导用户进入带有noscript标识的 “/?_fb_noscript=1”页面,用 html4 标签替换 html5 标签,这要比为了保持兼容性而写大量 hack 的做法更轻便一些。
“`html
<!–[if lte IE 8]>

您的浏览器禁用了脚本,请查看这里来启用脚本!或者继续访问.


<![endif]–>

本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/others/277