一、新增标签
结构标签
相当于有意义的div标签
article:用于定义一篇文章
header:定义页面的头部
footer:
nav:导航条链接
section:定义一个区域
aside:定义页面内容的侧边栏
hgroup:定义文件中一个区块的相关信息
例如:
<hgroup>
<h1>标题一</h1>
<h2>标题二</h2>
</hgroup>
figure:定义一组媒体内容以及它们的标题(可以用于包裹canvas,video等多媒体标签)
figcaption:用于figure标签内定义媒体的标题
footer:定义一个页面区域的底部
dialog:定义一个对话框(例如微信的对话框)
补充一:header/section/footer/aside/article/footer这几个标签最好不要嵌套在里面,放在最外边
补充二:使用层级(header=section=footer:写在外层)>(aside/article/figure/hgroup/nav:写在内层)
多媒体标签
第一类
video:定义一个视频
video标签和audio标签使用差不多
1.autoplay:是否自动播放
2.controls:是否展示控制器
4.可以用css控制视频框的宽度和高度
3.可以包裹source标签audio:定义一个音频
1.autoplay:是否自动播放(autoplay="autoplay":自动播放,不写则默认不自动播放)
2.loop:是否重复以及重复几次(loop='-1'时无限重复,=数字时重复数字次数)
3.controls:是否显示控制器(controls="controls"时显示,不写则默认不显示)
4.可以包裹source标签source:定义媒体资源
可以用于audio和video标签内部,并且可以添加不同格式的媒体文件,type属性用于填写转码格式,如下:
<audio>
<source src='音频资源' type='audio/转码格式'>
</audi>
第二类
- canvas(图片标签):定义图片
第三类
- embed:定义外部可交互内容和插件,例如flash
使用方法和audio和video标签类似
1.可以使用css控制资源显示的大小
<embed src="资源路径" type="">
多媒体标签出现的意义:不使用插件就能控制媒体文件,极大地提升了用户的体验
Web应用标签
- 第一类:状态标签
- meter:实时状态显示:气压、气温等(目前只支持谷歌和opera)
属性:
1.value:定义目前所处状态(数值)
2.min:最低数值
3.max:最高数值
4.low:最低显示(低于该值为为黄色)
5.high:最高显示(高于该值为黄色)
6.optimum:最优值
- meter:实时状态显示:气压、气温等(目前只支持谷歌和opera)
用法一
<meter value='220' min='20' max='380' low='200' high='240' optimum='220'></meter>
<meter value='0.75'>75%</meter>
- progress:显示任务过程:安装、加载等(目前只支持谷歌,火狐和opera)
属性
1.value:当前的状态值
2.max:最大状态值
用法一:显示正在加载状态
<progress max='100'></progress>
用法二:显示当前加载的百分比
<progress max='100' value='50'></progress>
列表标签
- datalist:为input标签定义一个下拉列表,配合option(兼容火狐和谷歌)
用法:input标签中的list属性的值和datalist标签中的id必须相同,才能进行下拉拓展
<input type="text" placeholder="111" list='phonelist'>
<datalist id="phonelist">
<option value="三星"></option>
<option value="华为"></option>
<option value="苹果"></option>
<option value="小米"></option>
<option value="大春"></option>
</datalist>
- details:定义一个元素的详细内容,配合summary标签,用于展示省略的信息(兼容谷歌和其他一些高版本浏览器)
用法:
显示(未点击展开时候):
点击展开后:
另外可以配合summary标签修改标题的显示
<details>
<summary>很多的a</summary>
</details>
open属性:可以设置为open='open'
用于设置默认打开
Menu标签(很多浏览器都不支持,建议少用或不用)
- menu:命令列表
- menuitem:menu命令列表标签(只有火狐8.0以上支持)
- command:menu标签定义的一个命令按钮(只有IE9支持,以上或以下都不支持)
注释标签(不是平时的注释,这个标签主要用于类似注释拼音之类,会显示出来)
- ruby和rt标签
用法:用ruby标签将字括起来,然后rt标签填写注释信息
<p>注<ruby>释<rt>shi</rt></ruby>标签</p>
[图片上传中。。。(10)]
- mark:用于标黄(所有主流浏览器都支持,IE要9以上)
<p><mark>aaaaa</mark>aaaaa</p>
二、删除的标签
纯表现元素(删除后利于表现与结构分离)
1.Basefont
2.big
3.center
4.font
5.s
6.strike
7.tt
8.u
可能有负面影响的元素
1.frame
2.frameset(使用该标签时会将body标签去掉,破坏原始结构,并且将网页拆分,不利于搜索)
3.noframes
因为HTML5详细兼容,所以以上标签还是可以使用,但是最好不要用
产生混淆的元素
1.acronym
2.applet
3.isindex
4.dir
完全没用过....
三、使用HTML5新标签进行布局的意义
1.提升语义化特性和网页的质量
2.减少了用于css调用的class和id属性
3.对搜索引擎更友好