HTML5 语义元素
2016-06-14 17:16
316 查看
语义元素:能够清楚的描述其意义给浏览器和开发者。
无语义:
语义元素实例:
1.section元素
定义文档中的节,比如章节,页眉,页脚或文档的其他部分。
2.ariticle元素
定义独立的内容
3 .nav元素,标签定义导航链接部分
4 aside元素
标签定义页面主区域内容之外的内容(比如:侧边栏)
5.header元素
定义了文档的头部区域,用于定义内容的介绍展示区域。
6.footer 元素
元素定义了文档的底部区域,一个页脚通常包含文档的作者,著作权,联系信息等。
7.figure和figcaption
figure规定独立的流内容(图像,图表,照片,代码等)。内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
figcaption定义figure元素的标题
7.除了figcaption之外,其他的新元素都是块级元素,为了让代码可以让旧版本浏览器支持,可以在样式表中设置
8.在IE8以及更早的IE浏览器版本中无法再这些元素中渲染css效果。
解决办法:使用HTML5 Shiv Javascript脚本来解决IE兼容的问题。
下载后,在网页的head中添加如下的代码:
无语义:
<div> <span>
语义元素实例:
<form> <table> <img>
1.section元素
定义文档中的节,比如章节,页眉,页脚或文档的其他部分。
<section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is....</p> </section>
2.ariticle元素
定义独立的内容
<article> <h1>Internet Explorer 9</h1> <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to the public on March 14, 2011 at 21:00 PDT.....</p> </article>
3 .nav元素,标签定义导航链接部分
<nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav>
4 aside元素
标签定义页面主区域内容之外的内容(比如:侧边栏)
5.header元素
定义了文档的头部区域,用于定义内容的介绍展示区域。
6.footer 元素
元素定义了文档的底部区域,一个页脚通常包含文档的作者,著作权,联系信息等。
7.figure和figcaption
figure规定独立的流内容(图像,图表,照片,代码等)。内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
figcaption定义figure元素的标题
<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p> <figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption> </figure>
7.除了figcaption之外,其他的新元素都是块级元素,为了让代码可以让旧版本浏览器支持,可以在样式表中设置
header, section, footer, aside, nav, article, figure { display: block; }
8.在IE8以及更早的IE浏览器版本中无法再这些元素中渲染css效果。
解决办法:使用HTML5 Shiv Javascript脚本来解决IE兼容的问题。
下载后,在网页的head中添加如下的代码:
<!--[if lt IE 9]> <script src="html5shiv.js"></script> <![endif]-->
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- html5 web数据存储
- 页面元素查找之Selectors API
- 使用ajax实现用户登录验证(升级版)
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 关于前端的思考与感悟
- 新时代编辑神器:Atom
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 原生js结合html5制作小飞龙的简易跳球
- HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+html5实现绘制圆环的方法
- javascript html5实现表单验证
- HTML5实现微信拍摄上传照片功能
- 基于HTML5的可预览多图片Ajax上传