HTML5元素与标签
2017-04-24 19:51
204 查看
一、html5语法
1、DOCTYPE及字符编码
<!doctype html>
<meta charset=“utf-8”>
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标签组添加标题,例如
<figure>
<figcaption>PRC</figcaption>
<p>这里的内容</p>
</figure>
2、新增表单标签
email、url、number、range、Date Pickers(日期选择器)、search、color
3、新增媒体标签
video标签:定义视频,例如:<video src=“movie.ogg” controls=“controls”>video标签</video>
HTML4中写法:
<object type=“video/ogg” data=“movie.ogv”>
<param name=“src” value=“movie.ogv”>
</object>
audio标签:定义音频,例如:<audio src=“someaudio.wav”>audio标签</audio>
HTML4中写法:
<object type=“application/ogg” data=“someaudio.wav”>
<param name=“src” value=“someaudio.wav”>
</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、DOCTYPE及字符编码
<!doctype html>
<meta charset=“utf-8”>
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标签组添加标题,例如
<figure>
<figcaption>PRC</figcaption>
<p>这里的内容</p>
</figure>
2、新增表单标签
email、url、number、range、Date Pickers(日期选择器)、search、color
3、新增媒体标签
video标签:定义视频,例如:<video src=“movie.ogg” controls=“controls”>video标签</video>
HTML4中写法:
<object type=“video/ogg” data=“movie.ogv”>
<param name=“src” value=“movie.ogv”>
</object>
audio标签:定义音频,例如:<audio src=“someaudio.wav”>audio标签</audio>
HTML4中写法:
<object type=“application/ogg” data=“someaudio.wav”>
<param name=“src” value=“someaudio.wav”>
</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元素变得可编辑
五、语义化标签综合案例
相关文章推荐
- [H5]HTML5声明、标签、元素、属性、格式化简介
- HTML5新特性新增于废弃元素标签
- HTML5 新增结构标签(元素)
- html5 - 基础格式认识和标签用法(文本元素常用方法)
- HTML5 <template>标签元素简介
- 使用HTML5的Canvas标签实现绘图板内拖拽元素
- html5基础--video标签元素
- HTML5语义化标签 之 节元素标签
- HTML5系列二(标签元素、FileReader、拖放)
- HTML5基础10----HTML5块元素标签的使用
- html5基础--audio标签元素
- webkit移动开发笔记:html5中video与audio标签之无法自动播放的audio元素
- html5中新增的主题元素标签
- HTML5语义化标签 之 文本元素标签、分组元素标签
- Html5学习笔记1 元素 标签 属性
- HTML5页面架构元素 - <footer>标签
- HTML5 教程学习 - nav元素标签
- 基于HTML5实现的(本地存储)多标签页面元素的复制粘贴
- html5基础--canvas标签元素
- HTML5基础(声明、标签、元素、属性、格式化)