HTML5基本特性和新功能
HTML5的基本特征
1、向前兼容性
核心理念——平滑过渡！
不支持html5的浏览器可以向前兼容，并不会影响web内容的显示！
2、跨平台运行性
从pc浏览器到手机、平板电脑，甚至是智能电视。
只要用户的设备支持HTML5，基于HTML5的web程序就可以无障碍的运行！
3、简单易用性
相对HTML4.01，HTML5更加简单实用。
没有XHTML2.0那样严格的语法规则。
（<HTML5的属性精简表示方法可以大大提高html文本的传输效率！> <HTML5 Web Form提供一套强大的表单验证机制，无需冗长的JS代码验证！>）
4、用户友好性
强化web页面的变现性能：Audio、video、canvas 等标签元素的引入；
提高用户体验度：地理位置服务、本地数据存储、文件上传、离线应用等新特性。
HTML5的新功能
1、简化的DOCTYPE声明
HTML4.01标准版本的DOCTYPE的声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://ww.w3.org/TR/html4/strict.dtd">
HTML4.01过度版本的DOCTYPE的声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww.w3.org/TR/html4/loose.dtd">
HTML4.01基于框架的HTML文档版本的DOCTYPE的声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://ww.w3.org/TR/html4/frameset.dtd">
HTML5中的DOCTYPE声明(对字母大小写不敏感)
<!DOCTYPE HTML>
2、简化的编码字符集
对于HTML4.01标准编码字符集声明
<meta http = "Content-Type" content = "text/html;chatset = utf-8">
HTML5的编码字符集声明
<metachatset = "utf-8">
3、简化的样式表和脚本引入
HTML4.01标准的html文档中引入的样式表和脚本文本
<link href = "test.css" type = "text/css" rel = "stylesheet">
<script src = "test.js" type = "text/javascript"></script>
HTML5中标准的html文档引入的样式文本和脚本文本
<link href = "test.css" rel = "stylesheet"> <script src = "test.js"></scritpt>
4、新增的全局属性
contenteditable属性(true：表示设置HTML元素可编辑。 false：默认值，设置HTML元素不可编辑！ )
<p contenteditable = "true">可编辑的内容</p> <p contenteditable = "false">不可编辑的内容</p>
spellcheck属性（true/false :是否对用户输入的内容进行语法拼写检查，若检查不通过，下划线标注）
<label for = "input">内容</label> <input type = "text" id = “input” spellcheck = "ture">
draggable属性（true/false：制定html元素是否可进行拖动。用法同contentditable一样）
dropzone属性（属性如下，用来规定当元素被拖动时发生的动作！）
| dropzone属性 | 说明 |
| copy | 创建拖动元素的一个副本 |
| link | 将拖动元素移动到一个新的位置 |
| move | 创建拖动元素的链接 |
hidden属性（默认显示）
<label>输入框隐藏：<input type = “text” hidden></label> <label>输入框显示：<input type = “text”></label>
5、语义化标签之文档元素（不理解语义化的可以参考——“让标签语义化成为一种习惯”博文）
header标签 ：用来定义一个文档结构的“页眉”。通常情况下，会和h1-h6标签和hgroup标签组合，表示一个内容块的标题，或者是包含一个搜索框、导航栏、logo等栏目；
1 /*未用CSS进行格式控制*/ 2 <header> 3 <hgroup> 4 <h1>HTML5</h1> 5 <h4>语义化标签之文档元素</h4> 6 </hgroup> 7 <input type="search" results="9"> 8 </header>
footer标签 ：用来定义一个文档结构的“页眉”。通常用来表示文档的作者信息、相关链接，版权资料等；
1 <footer> 2 作者：<em>wanglehui</em> 3 工作单位：<em>CSUST Ddream Stadion </em> 4 </footer>
hgroup标签 ：用来定义一个文档中标题组。即一个内容块包含主标题和多个副标题时，多个h1-h6标签可以放在hgroup标签里面；
1 <hgroup> 2 <h1>HTML5</h1> 3 <h4>语义化标签之文档元素</h4> 4 </hgroup>
nav标签：用来定义一个文档中的导航区域,通常只用于页面的主要导航，侧边栏导航不适用；
1 <nav> 2 <ul> 3 <li>nav部分一</li> 4 <li>nav部分二</li> 5 <li>(nav部分)</li> 6 </ul> 7 </nav>
article标签：用来定义一个文档中自成一体的东西，比如，论坛的帖子、博客的文章或者用户的评论。通常article标签里面有header、footer等标签。也可以自己嵌套使用；
1 <article> 2 <header> 3 <h2>语义化标签之文档元素</h2> 4 </header> 5 <p>文章内容....</p> 6 <article> 7 <h2>评论</h2> 8 <article> 9 <header> 10 <h3>评论者：访客甲</h3> 11 </header> 12 <p>甲的评论内容</p> 13 </article> 14 <article> 15 <header> 16 <h3>评论者：访客乙</h3> 17 </header> 18 <p>乙的评论内容</p> 19 </article> 20 </article> 21 <footer> 22 作者：<em>wanglehui</em> 23 工作单位：<em>CSUST Ddream Stadion</em> 24 </footer> 25 </article>
section标签：用来定义一个文档结构中的“章节”内容，section和article的区别：article定义的是一个文档的独立版块，是一个容器元素。而section定义的是一个文档中的组成部分，和父标签是从属关系。article和section之间允许相互嵌套；
1 <section> 2 <h1>语义化</h1> 3 <article> 4 <h2>HTML5新功能介绍</h2> 5 <p>介绍内容...</p> 6 <section> 7 <h3>其他内容</h3> 8 <p>内容介绍....</p> 9 </section> 10 </article> 11 </section>
aside标签：通常包含在article标签中作为主要内容的附属信息部分。因此，aside和article常常组合使用，用来作为页面或站点全局的附属信息部分。
1 <article> 2 <h2>HTML5新功能介绍</h2> 3 <p>介绍内容...</p> 4 <aside> 5 <h1>附属信息</h1> 6 <p>附属信息内容。。。。</p> 7 </aside> 8 <footer> 9 作者：<em>wanglehui</em> 10 工作单位：<em>CSUST Ddream Stadion</em> 11 </footer> 12 </article>
6、语义化标签之文本元素（不理解语义化的可以参考——“让标签语义化成为一种习惯”博文）
b 标签：bold 定义加粗文本；
i 标签：Italic 定义倾斜文本；
u 标签：underline 定义下划线文本；
1 <b>HTML5新功能</b> <br/><br/>
2 <i>HTML5新功能</i> <br/><br/>
3 <u>HTML5新功能</u> <br/><br/>
code 标签：定义计算机代码文本，通常指单行的代码。多行代码用pre标签；
pre 标签：用来定义与格式化的文本。也就是说可以保留原有的空格和换行符，用途：显示长代码。
1 <code> 2 //This is a javascript code.<br/> 3 function foo(){ 4 alert("警告"); 5 } 6 </code>
7 <pre> 8 //This is a javascript code.<br/> 9 function foo(){ 10 alert("警告"); 11 } 12 </pre>
q 标签：quote 用来定义引用文本，q标签用来标记的是一行文本。
cite 标签：用来定义引用文本，与q不同的是，cite标签引用的通常是书籍杂志的标题。
blockquote 标签：用来标记长文本引用，和q不同的是，q标签用来标记的是一行文本。
1 <q>今朝有酒今朝醉，明日愁来明日愁</q><br/><br/>
2 <q>今朝有酒今朝醉，明日愁来明日愁<cite>——唐·罗隐《自遣》</cite></q>
3 <blockquote> 4 得即高歌失即休，多愁多恨亦悠悠。 5 今朝有酒今朝醉，明日愁来明日愁。 6 </blockquote>
time 标签：定义一个时间显示文本，有两个属性。datetime:定义元素的日期和时间,如果未定义该属性，则必须在元素的内容中规定日期或时间。pubdate:定义特定文档的发布时间。（在浏览器中没有实际的效果）
1 <p>我们在每天早上 <time>9:00</time> 开始营业。</p> 2 3 <p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>
注释：<time> 标签不会在任何浏览器中呈现任何特殊效果。且目前主流浏览器都不支持time标签。
<time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。
该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。
总结：总结的不是很全面，目前用的也不是很熟练。都是写基础的知识，望大家能指出其中不足的地方，O(∩_∩)O谢谢！
参考书籍：【HTML5+CSS3技术应用】——郭小成
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
