HTML5 技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。与传统的技术相比，HTML5 的语法特征更加明显，并且结合了 SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容，而且 HTML5中还结合了其他元素，对原有的功能进行调整和修改，进行标准化工作。 HTML5 在 2012 年已形成了稳定的版本。 一句话概括，html5是html语言的第五次修改，相当于html的第五个版本。
新增标签：语义化更好 多媒体功能：video\audio 表单功能增强 新的属性 本地存储 获取拖拽内容信息 地理位置信息 canvas画布
新增结构标签：（我们以前布局页面经常用到的是div或者span等，但是这些没有语义化）
标签名标签案例页面头部标签header页脚底部标签footer导航nav<nav><a href=''>首页</a></nav>划分区域section主题内容块article侧边栏aside <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ text-align: center; font-size: 30px; color: #fff; } .top{ width: 100%; height: 50px; background: #ccc; } .search_wrap{ width: 100%; height: 150px; background: pink; } .search{ width: 100%; height: 100px; background: red; } .nav{ width: 100%; height: 50px; background:blue ; } .trans_img{ width: 100%; height: 500px; background: yellow; } .content{ width: 100%; height: 500px; background: green; } </style> </head> <body> <div class="top">头部</div> <div class="search_wrap"> <div class="search">搜索框</div> <div class="nav"></div> </div> <div class="trans_img">轮播图</div> <div class="content">主题内容</div> <div></div> </body> </html>功能标签：
标签名标签案例标题组合hgrounp<hgrounp><h1></h1><h2></h2></hgrounp>进度条progress<progress min='0' max='100' value='30' progress>选项列表datalist<input type="text" name="" list="k" /><datalist id="k"><option value="html">html</option><option value="css">css</option><option value="js">js</option></datalist>定义对话框或窗口dialog<dialog open> <dt>1问题</dt><dd>1答案</dd><dt>2问题</dt><dd>2答案</dd></dialog>媒体标签figure媒体组合标签figcaption<figure><figcaption>标题</figcaption><p>标题内容</p></figure>标记标签mark <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <mark>哈哈哈</mark> <hgrounp> <h1>标题1</h1> <h2>标题2</h2> </hgrounp> <progress min='0' max='300' value="100"></progress> <form> <input type="text" name="" id="list" value="" list="val"/> <datalist id="val"> <option value="html">html</option> <option value="css">css</option> <option value="js">js</option> </datalist> <input type="submit" value="点击"/> </form> <!----------------------------------------------------------> <dialog open="open"> <dt>你好</dt> <dd>你好</dd> <dt>你是谁</dt> <dd>我是大哥</dd> </dialog> <figure> <figcaption>啦啦啦</figcaption> <p>哈哈哈哈哈哈或或 哈哈哈</p> </figure> </body> </html>兼容IE低版本浏览器的办法(IE低版本把h5新增标签解析成了行元素)
手动创建：在js中创建h5新增标签，css中给h5标签添加display：block属性 举例： <script type="text/javascript"> var e=("abbr,article,aside,audio,canvas,datalist,details,"+"figure,footer,header,hgroup,mark,menu,meter,nav,output,"+"progress,section,time,video").split(','); for(var i=0;i<e.length;i++) { document.createElement(e[i]); } </script> 网址链接：<script src="https://cdn.bootcss.com/html5shiv/3.7/html5shiv-printshiv.js"></script> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>本地链接:<script src="js/html5shiv.js"></script>