HTML5技术

重温html5的新增的标签和废除的标签 - 网站自由开发者

字号+ 作者:H5之家 来源:H5之家 2016-01-16 12:31 我要评论( )

HTML5已经盛行有段时间了,对于标签的使用,按照规范,哪些该用,哪些不该用,你是否都掌握了呢。今天我在这里详细列举下: 新增的结构标签section元素 表示页面中的一个内容区 块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2等元素结合起来使用,

HTML5已经盛行有段时间了,对于标签的使用,按照规范,哪些该用,哪些不该用,你是否都掌握了呢。今天我在这里详细列举下:

新增的结构标签 section元素

表示页面中的一个内容区 块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用,表示文档结构。例:HTML5中<section>……</section>;HTML4 中<div> ……</div>。

article元素

表示页面中一块与上下文不相关的独立内容。比如一篇文章。

aside元素

表示article元素内容之外的、与article元素内容相关的辅助信息。

header元素

表示页面中一个内容区块或真个页面的标题。

hgroup元素

表示对真个页面或页面中的一个内容区块的标题进行组合。

footer元素

表示整个页面或页面中一个内容区块的脚注。一般来说,他会包含创作者的姓名、创作日期以及创作者的联系信息。

nav元素

表示页面中导航链接的部分。

figure元素

表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。例如: 

新增的其他元素 video元素

定义视频。像电影片段或其他视频流。例:<video src="movie.ogg" controls="controls">video元素</video>,HTML4中写法:   

audio元素

定义音频。如音乐或其他音频流。例:<audio src ="someaudio.wav">audio元素</audio>      
html4中写法: 

embed元素

用来嵌入内容(包括各种媒体)。格式可以是Midi、Wav、AIFF、AU、MP3,flash等。例:<embed src="flash.swf" />      
HTML4中代码示例<object data="flash.swf" type="application/x-shockwave-flash"><object>

mark元素

主要用来在视觉上向用户呈现哪些需要突出显示或高亮显示的文字。典型应用搜索结果中高亮显示搜素关键字。      
HTML5<mark></mark>;HTML4 <span></span>。

progress元素

表示运行中的进程,可以使用progress元素显示JavaScript中耗时时间函数的进程。等待中……、请稍后等。<progress></progress>。

time元素

表示日期或时间,也可以两者同时。

ruby元素

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

rt元素

定义字符(中文注音或字符)的解释或发音。

rp元素

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

wbr元素

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

canvas元素

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

command元素

貌似没什么效果。是不是支持有问题      
表示命令按钮,比如单选按钮、复选框或按钮。

只有当 command 元素位于 menu 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。

details标签

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

datalist标签

定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。使用 input 元素的 list 属性来绑定 datalist。        

datagrid标签

定义可选数据的列表。datagrid 作为树列表来显示。        
如果把 multiple 属性设置为 true,则可以在列表中选取一个以上的项目。

keygen标签

标签规定用于表单的密钥对生成器字段。

当提交表单时,私钥存储在本地,公钥发送到服务器。

output标签

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

source标签

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

menu标签

定义菜单列表。当希望列出表单控件时使用该标签。注意与nav的区别,menu专门用于表单控件。      

新增input标签

email     
必须输入email

url     
必须输入url地址

number     
必须输入数值

range     
必须输入一定范围内数值

Date Pickers(日期选择器)     
拥有多个可供选取日期和时间的新输入类型:      
date - 选取日、月、年      
month - 选取月、年      
week - 选取周和年      
time - 选取时间(小时和分钟)      
datetime - 选取时间、日、月、年(UTC 时间)      
datetime-local - 选取时间、日、月、年(本地时间)

search     
用于搜索域,域显示为常规的文本域。

color

废除的标签

1、能用css代替的元素   
basefont、big、center、font、s、strike、tt、u。这些元素纯粹是为画面展示服务的,HTML5中提倡把画面展示性功能放在css中统一编辑。

2、不再使用frame框架。

frameset、frame、noframes。HTML5中不支持frame框架,只支持iframe框架,或者用服务器方创建的由多个页面组成的符合页面的形式,删除以上这三个标签。

3、只有部分浏览器支持的元素

applet、bgsound、blink、marquee等标签。

4、其他被废除的元素

废除rb,树勇ruby替代。

废除acronym使用abbr替代。

废除dir使用ul替代。

废除isindex使用form与input相结合的方式替代

废除listing使用pre替代

废除xmp使用code替代

废除nextid使用guids

废除plaintex使用“text/plian”(无格式正文)MIME类型替代。

转载自:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列:拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • HTML5 进阶系列:indexedDB 数据库 - _林鑫

    HTML5 进阶系列:indexedDB 数据库 - _林鑫

    2017-04-27 14:02

  • HTML5 高级系列:web Storage - _林鑫

    HTML5 高级系列:web Storage - _林鑫

    2017-04-27 14:01

  • HTML5和CSS3 - 奔跑在起跑线佼佼者

    HTML5和CSS3 - 奔跑在起跑线佼佼者

    2017-04-20 13:00

网友点评