HTML语义化、HTML5新增的元素、移除的元素 、支持 HTML5 新标签

目录

1、HTML语义化

2、HTML5新增的元素

3、 移除的元素 

4、支持 HTML5 新标签

---

1、HTML语义化

HTML 语义化是指仅仅从 HTML 元素上就能看出页面的大致结构。

比如需要强调的内容可以放在 <strong> 标签中，而不是通过样式设置 <span> 标签去做，通俗来讲就是用正确的标签做正确的事情。。

不同浏览器对 HTML 元素的解析可能有差异，HTML 语义化便是在抛开样式之后，页面能有一个友好的展示效果。

我们力求让页面有良好的结构，让页面的元素有含义，同时利于被搜索引擎解析，利于 SEO。

HTML 语义化的建议：

• 少使用无意义的 <div>、<span> 标签；

• 在 <label> 标签中设置 for 属性和对应的 <input> 关联起来；

• 设置 <img> 标签的 alt 属性，给 <a> 标签设置 title 属性，利于 SEO；

• 在页面的标题部分使用 <h1>~<h6> 标签，不需要给它们加多余的样式；

• 与表单、有序列表、无序列表相关的标签不要单独使用。

语义化的优点：

• 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构；
• 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重；
• 方便其他设备解析，如盲人阅读器根据语义渲染网页
• 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐

2、HTML5新增的元素

HTML5 也新增了一些语义化的元素，我们通过标签名就能判断标签内容。使用语义元素的页面大致结构如下：

语义元素的名称其实也很好理解，下面是它们的作用和用法：

• <header> 标签通常放在页面或页面某个区域的顶部，用来设置页眉，代表头部；

• <nav> 标签可以用来定义导航链接的集合，点击链接可以跳转到其他页面；

• <article> 标签中的内容比较独立，可以是一篇新闻报道，一篇博客，它可以独立于页面的其他内容进行阅读，可以表示文章、博客等内容；

• <section> 标签表示页面中的一个区域，通常对页面进行分块或对内容进行分段，<section> 标签和 <article> 标签可以互相嵌套；

• <aside> 标签用来表示除页面主要内容之外的内容，比如侧边栏；

• <footer> 标签位于页面或页面某个区域的底部，用来设置页脚，通常包含版权信息，联系方式等，代表尾部；

• <main>定义文档主要内容。

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

<canvas> 标签：画布 ；
<video> 和 <audio> ：用于媒介回放；
localStorage 长期存储数据，浏览器关闭后数据不丢失； 
sessionStorage 的数据在浏览器关闭后自动删除 ；

表单控件：calendar、date、time、email、url、search 等

新的技术： webworker, websockt, Geolocation 等

3、 移除的元素 

纯表现的元素：basefont，big，center，font, s，strike，tt，u； 
对可用性产生负面影响的元素：frame，frameset，noframes； 

4、支持 HTML5 新标签

* IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签， 可以利用这一特性让这些浏览器支持 HTML5 新标签， 浏览器支持新标签后，还需要添加标签默认的样式；

* 当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架

<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->