HTML5元素与标签

来源：互联网发布：软件服务行业的利润率编辑：程序博客网时间：2024/06/11 22:30

一、html5语法

1、DOCTYPE及字符编码

<!doctype html>

2、大小写都可以

3、布尔值

比如checked=“checked”，在html5中只写checked表示true，不写checked表示false

4、省略引号

写单引号或双引号都可以，也可以不写引号

5、可以进行省略的标签

不允许写结束符的标签：area、basebr、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr

可以省略结束符的标签：li、dt、dd、p、rt、optgroup、option、colgroup、thread、tbody、tr、td、th

可以完全省略的标签，意思是这些标签可以不写：html、head、body、colgroup、tbody

二、新增及删除标签

1、新增结构标签，这是最重要的，过去这些标签都是用div实现

section标签：表示页面中的一个独立区域，里面可以有自己的大纲结构。可以和h1、h2......等标签结合起来使用，表示文档结构，例如<section>......</section>

article标签：表示页面中的主要核心内容，比如一篇文章

aside标签：article标签内容相关的辅助内容

header标签：表示页面中的头部信息

hgroup标签：表示头部信息的补充内容

footer标签：表示整个页面的底部信息。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。

nav标签：表示页面中导航链接的部分

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

<p>这里的内容</p>

</figure>

2、新增表单标签

email、url、number、range、Date Pickers（日期选择器）、search、color

3、新增媒体标签

video标签：定义视频，例如：<video src=“movie.ogg” controls=“controls”>video标签</video>

HTML4中写法：

</object>

audio标签：定义音频，例如：<audio src=“someaudio.wav”>audio标签</audio>

HTML4中写法：

</object>

embed标签：用来嵌入内容（包括各种媒体）。格式可以是Midi、Wav、AIFF、AU、MP3、flash等，例如<embed src=“flash.swf” />;

HTML4中写法：<object data=“flash.swf” type=“application/x-shockware-flash”></object>

4、新增其他功能标签

mark（标注）、command、progress（进度条）、details（展开内容层）、time、datalist（输入提示）、ruby、keygen、rt、output、wbr、source、canvas（图形绘制）、menu

5、删除可以用css代替的标签

basefont、big、center、font、s、strike、tt、u，这些标签纯粹是为了画面展示服务的，但h5中提倡用css编辑页面展示性功能

6、删除frame框架

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

7、删除只有个别浏览器支持的标签

applet、bgsound、blink、marquee等标签

8、其他被删的标签

废除rb、使用ruby替代

废除acronym、使用abbr替代

废除dir、使用ul替代

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

废除listing、使用pre替代

废除xmp、使用code替代

废除nextid、使用guids替代

废除plaintex、使用“text/plian”（无格式正文）MIME类型替代

三、新增及废除属性

1、新增表单属性

2、新增链接属性

3、新增其他属性

4、删除可以用css代替的属性

5、删除多余属性

6、删除其他属性

删除rev，charset，target，name等

四、全局属性：任何一个标签都可以使用

1、data-yourvalue：可以自定义属性，yourvalue是你想自定义的属性名

2、hidden：隐藏其所在的标签

3、Spellcheck：对标签里的内容进行语法纠错

4、tabindex：设置表单里按下tab键时，光标跳转顺序

5、contenteditable：为true时使标签变得可编辑

6、designMode：JavaScript属性，使用其可使dom元素变得可编辑

五、语义化标签综合案例

1 0