html5新增的语义标签
2016-01-03 15:21
537 查看
html5标准之前的HTML4.0或XHTML1.0标准中,语义的标签比较少,在布局HTML的时候,一般会大量使用div标签。这样做的结果是网页的源代码中有大量的div标签,需要用不用的class和id来区分。
在H5标准中,新增了一些语义标签:
1、使得css在选择元素的时候,能够更加自然地找到“钩子”。
2、能够减少标签的class和id属性,这意味着网页的加载会更快,网页代码也显得更“瘦”。
3、对于开发者来说,这些新增的语义标签能够帮助开发者记住和区分标签的“语义”。
下面介绍一些H5新增的常用的语义标签。
上面这些标签在chrome,Firefox,opera,safari浏览器中支持得已经比较好了,在IE9以下是有问题,IE9不支持这些标签,但是可以通过html5.js(请自行百度)来达到
让IE9以下浏览器达到兼容(但并不是所有)
H5在移动端引用地更多,常用于***网页游戏,APP页面等。
在H5标准中,新增了一些语义标签:
1、使得css在选择元素的时候,能够更加自然地找到“钩子”。
2、能够减少标签的class和id属性,这意味着网页的加载会更快,网页代码也显得更“瘦”。
3、对于开发者来说,这些新增的语义标签能够帮助开发者记住和区分标签的“语义”。
下面介绍一些H5新增的常用的语义标签。
section | 表示页面中的一个内容“区域”,相当于以前写的<div id="container"></div>等区别于其他内容的section |
article | 顾名思义,可以用于放置独立于上下文的“文章”或一大段文本内容。 |
aside | 表示“aside”,常用于代表侧边栏或者某一小块区域 |
header | 表示在页面的最上面,可以放入一些页面的标题、导航信息等 |
hgroup | 表示“header-group”,可以和页面的标题整合(即包含h1至h6标签) |
footer | 顾名思义,用在页面底下,可以包含一些网站的备案信息,合作伙伴,联系我们等内容 |
nav | 常用于放置一些网站的导航栏。 |
figure | 表示一段独立的流媒体(可以是图片,音视频等),区别于页面的其他部分的区域。 |
让IE9以下浏览器达到兼容(但并不是所有)
H5在移动端引用地更多,常用于***网页游戏,APP页面等。
相关文章推荐
- 【嘉兴东臣PHP】html5与css3
- 【嘉兴东臣PHP】 HTML5画布、多媒体、表单
- 【嘉兴东臣PHP】html5、css3年终总结
- 【嘉兴东臣php】HTML5 CSS3总结
- 【嘉兴东臣php】HTML5、CSS3学习周总结
- Html5视频转字符画
- h5实现翻牌游戏以及local storage的运用
- HTML5标准程序--画一个半圆
- 【嘉兴东臣php】HTML5、CSS3
- 【嘉兴东臣php】HTML5和CSS3学习周总结
- HTML5的新结构标签
- HTML5绘图工具canvas元素实例代码
- 关于HTML5 地理位置geolocation API 的一些事
- html5调用手机摄像头,实现拍照上传功能
- Hadoop-2.5.0-cdh5.3.2 启动过程详解
- H5 技术
- Hadoop-2.5.0-cdh5.3.2 HA 安装
- HTML5 简介
- HTML5 浏览器支持
- HTML5 新元素