HTML5属于上一代HTML的新迭代语言，设计HTML5最主要的目的是为了在移动设备上支持多媒体！！！
例如： video 标签和 audio 及 canvas 标记
新特性：
1. 取消了过时的显示效果标记 和
等... 2. 新语义标签的引入
3. 新表单元素引入
4. canvas标签（图形设计）
5. 本地数据库（本地存储）
6. 一些API
好处：跨平台
例如：比如你开发了一款HTML5的游戏，你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台，甚至可以通过封装的技术发放到App Store或Google Play上，所以它的跨平台性非常强大，这也是大多数人对HTML5有兴趣的主要原因。
缺点：
pc端浏览器支持不是特别友好，造成用户体验不佳(随着移动端的发展不断扩大和win10（ie10）的大量推广，这一缺点将被无限缩小)
HTML5新语义标签
HTML5新标签的数量在25个左右具体也没有找到详细的资料来查看（每个网站显示的数量都不一样）
虽然新增的标签很多但是实际上用到的应该只有十个左右MDN上有一句话“HTML 使用“标记”来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。HTML 标记包含一些特殊“元素”如 ，
，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img> 等等。” 这其中大部分有HTML5以前的标签也有HTML5的而这些刚好就是我们常用的标签，不常用的也许不必太过了解布局DIV也可以不是么？ </div><div> 另外推荐大家在使用新语义标签的时候尽量每个独立的页面只使用一个标签作为包裹，语义化的作用就是seo（具体可百度），就是让搜索引擎知道网上到底有些什么，如header 、main、footer标签等等，当然你也可以写100个！ </div><div> 以下总结出HTML5常用的标签： </div><div> “header” “nav” “main”“article” “address”“section”“aside” “footer” </div><div> 如果忘记了这些标签的意思可以访问 MDN、W3C、或者CSND,当然博客园上搜搜可能会更快 </div><div> 以下为菜鸟教程对html5新标签的注解 http://www.runoob.com/html/html5-new-element.html </div><div> HTML5的重点标签之video和audio </div><div> <video></video> 视频 </div><div> 属性：controls 显示控制栏 </div><div> 属性：autoplay 自动播放 </div><div> 属性：loop 设置循环播放 </div><div> <audio></audio> 音频 </div><div> 属性：controls 显示控制栏 </div><div> 属性：autoplay 自动播放 </div><div> 属性：loop 设置循环播放 </div><div> video标签支持的格式 http://www.w3school.com.cn/html5/html_5_video.asp </div><div> 多媒体标签在网页中的兼容效果方式（每个浏览器支持的情况不同所以需要做兼容性处理）（以下source属性只会生效一个 即 if = true 之后 就不执行了） </div><div> <video> </div><div> <source src="code/多媒体标签/trailer.mp4"> </div><div> <source src="trailer.ogg"> </div><div> <source src="trailer.WebM"> </div><div> </video> </div><div> HTML5中的智能表单控件 </div><div> <input type="email"> </div><div> type值 ={ </div><div> email: 输入合法的邮箱地址 </div><div> url： 输入合法的网址 </div><div> number： 只能输入数字 </div><div> range： 滑块 </div><div> color： 拾色器 </div><div> date： 显示日期 </div><div> month： 显示月份 </div><div> week ： 显示第几周 </div><div> time： 显示时间 </div><div> } </div><div> （智能表单，会自动对输入的内容做基本校验，内容不符合基本校验则拒绝提交请求 </div><div> 表单属性 </div><div> ◆form属性： </div><div> autocomplete=on | off 自动完成 </div><div> novalidate=true | false 是否关闭校验 </div><div> ◆ input属性： </div><div> autofocus ： 自动获取焦点 </div><div> <input type="text" list="abc"/> </div><div> <datalist id="abc"> </div><div> <option value="123">12312</option> </div><div> <option value="123">12312</option> </div><div> <option value="123">12312</option> </div><div> <option value="123">12312</option> </div><div> </datalist> </div><br /><div> multiple： 实现多选效果 </div><div> placeholder ： 占位符 （提示信息） </div><div> required：必填项 </div><div> HTML5中新的一些API </div><div> 以前获取节点通过 </div><div> document.getElementById("ID名称")这些还有className，name，tagname等等方式获取返回当前节点 </div><div> H5新增的节点获取方法只有两个 </div><div> document.querySelector("选择器")； 返回节点 </div><div> document.querySelectorAll("选择器"); 返回数组 </div><div> 可以好的代替以前或者节点的方式，如果无需兼容ie10以下的话 </div><div> H5中对class的操作 </div><div> classList.add("类名") </div><div> 添加class类名 不返回任何值 如果你把它赋值给一个变量 得到结果是undefined </div><div> classList.remove("类名"); 删除 </div><div> classList.contains("类名"); </div><div> 检查has className 是否存在返回布尔值 即true and false </div><div> classList.toggle("active"); </div><div> 查询active 是否存在，存在就删除，不存在就添加 ，省去了if判断！返回布尔值如果执行多条 即 true false true false. </div><div> 自定义属性 （小案例分析体验自定义属性） data-自定义属性名 </div><div> 获取自定义属性 Dom.dataset 返回的是一个对象 </div><div> Dom.dataset.属性名 或者 Dom.dataset[属性名] </div><div> 注：属性名无需加data如自定义属性名 = data-canvas 那么获取的时候 直接dataset.canvas即可 设置同理 </div><div> 设置自定义属性 </div><div> Dom.dataset.自定义属性名=值 或者 Dom.dataset[自定义属性名]=值； </div><div> 文件读取 FileReader </div><div> FileReader 接口有3个用来读取文件方法返回结果在result中 </div><div> readAsBinaryString ---将文件读取为二进制编码 </div><div> readAsText ---将文件读取为文本 </div><div> readAsDataURL ---将文件读取为DataURL </div><div> FileReader 提供的事件模型 </div><div> onabort 中断时触发 </div><div> onerror 出错时触发 </div><div> onload 文件读取成功完成时触发 </div><div> onloadend 读取完成触发，无论成功或失败 </div><div> onloadstart 读取开始时触发 </div><div> onprogress 读取中 </div><div> 获取当前网络状态 </div><div> window.navigator.onLine 返回一个布尔值 网没问题返回true否则返回false </div><div> 网络状态事件 （大部分为不支持和废弃状态也许移动端用的比较多） </div><div> window.ononline </div><div> window.onoffline </div><div> 获取地理定位 </div><div> 获取一次当前位置 </div><div> window.navigator.geolocation.getCurrentPosition(success,error); </div><div> success成功之后获取位置信息 否则抛出错误，比如获取位置信息被拒绝 </div><div> coords.latitude 维度 </div><div> coords.longitude 经度 </div><div> 实时获取当前位置 </div><div> window.navigator.geolocation.watchPosition(success,error); </div><div> 本地存储 随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案，使用sessionStorage和localStorage存储数据。 </div><div> localStorage： </div><div> 永久生效 </div><div> 多窗口共享 </div><div> 容量大约为20M </div><div> ◆window.localStorage.setItem(key,value) 设置存储内容 </div><div> ◆window.localStorage.getItem(key) 获取内容 </div><div> ◆window.localStorage.removeItem(key) 删除内容 </div><div> ◆window.localStorage.clear() 清空内容 </div><div> sessionStorage： </div><div> 生命周期为关闭当前浏览器窗口 </div><div> 可以在同一个窗口下访问 </div><div> 数据大小为5M左右 </div><div> ◆window.sessionStorage.setItem(key,value) </div><div> ◆window.sessionStorage.getItem(key) </div><div> ◆window.sessionStorage.removeItem(key) </div><div> ◆window.sessionStorage.clear() </div><div> required如何修改默认提示选项 </div><div> 需要两个几个参数 </div><div> placeholder = 默认提示用户输入 </div><div> oninvalid事件 = 当用户输入不符合规则的时候提示的内容随意改setCustomValidity 就是用来修改 requered值的函数 </div><div> oninput事件 = 约等于chuange事件 立即执行 </div><div> console.log('Hello World') </div> <p>
网页题目：<a href="https://www.cdcxhl.com/news/115808.html">HTML5新特性总结</a>
<br>
URL链接：<a href="https://www.cdcxhl.com/news/115808.html">https://www.cdcxhl.com/news/115808.html</a>
</p>
<p>
<a href="https://www.cdcxhl.com/" target="_blank">成都网站建设公司</a>_<a href="https://www.cdcxhl.cn/" target="_blank">创新互联</a>，为您提供<a href="https://www.cdcxhl.com/news/wxxcx/">微信小程序</a>、<a href="https://www.cdcxhl.com/news/yingxiao/">网站营销</a>、<a href="https://www.cdcxhl.com/news/ruanjiankaifa/">软件开发</a>、<a href="https://www.cdcxhl.com/news/pinpaisheji/">品牌网站设计</a>、<a href="https://www.cdcxhl.com/news/host/">虚拟主机</a>、<a href="https://www.cdcxhl.com/news/yidongjianshe/">移动网站建设</a> </p>
<p class="adpic">
<a href="https://www.cdcxhl.com/service/ad.html" target="_blank" class="ad">广告</a>
<a href="" target="_blank" class="adimg"><img src=""></a>
</p>
<p class="copy">
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
<a href="https://www.cdcxhl.com/" target="_blank">创新互联</a>
</p>
</div>
<div class="newsmorelb">
<p>猜你还喜欢下面的内容</p>
<ul>
<li>
<a href="/news/115804.html">网站怎么样推广？</a>
<span>2021-05-31</span>
</li><li>
<a href="/news/115802.html">电商“五大体系”构筑互联网快车</a>
<span>2021-05-31</span>
</li><li>
<a href="/news/115800.html">互联网高光时刻正在被“国风”包围！</a>
<span>2021-05-31</span>
</li><li>
<a href="/news/115798.html">把客户作为核心的网站你了解的有多少？</a>
<span>2021-05-31</span>
</li><li>
<a href="/news/115796.html">简述网站LOGO设计的技巧</a>
<span>2021-05-31</span>
</li><li>
<a href="/news/115794.html">线下零售除了拉个微信群，如何适应互联网？</a>
<span>2021-05-31</span>
</li><li>
<a href="/news/115790.html">外链对网站的重要性</a>
<span>2021-05-31</span>
</li><li>
<a href="/news/115788.html">建站方面问题总结</a>
<span>2021-05-31</span>
</li> </ul>
</div>
</div>
<div class="col-lg-3 noneb">
<a href="https://www.cdcxhl.com/paiming/chengdu.html" title="成都seo排名网站优化" target="_blank"><img src="/upload/news/paiming.png" alt="成都seo排名网站优化" class="img-responsive"></a>
<div class="bkright">
<p><a href="https://www.cdcxhl.com/news/jianshe/">网站建设知识</a></p>
<ul>
<li>
<a class="text_overflow" href="/news/115807.html">深圳企业网站统计分析系统要观察的指标</a>
<span>2021-05-31</span>
</li><li>
<a class="text_overflow" href="/news/115803.html">互联网“数据服务”成为下沉市场“新宠”</a>
<span>2021-05-31</span>
</li><li>
<a class="text_overflow" href="/news/115801.html">客户有网站问题你可以直接说，其实用不着这样？</a>
<span>2021-05-31</span>
</li><li>
<a class="text_overflow" href="/news/115799.html">APP节日图标设计思路</a>
<span>2021-05-31</span>
</li><li>
<a class="text_overflow" href="/news/115793.html">巧妙运用交互打造精致营销网站</a>
<span>2021-05-31</span>
</li><li>
<a class="text_overflow" href="/news/115791.html">企业网站做好以后如何推广，网站推广需要注意的几个重点</a>
<span>2021-05-31</span>
</li> <li>
<a class="text_overflow" href="/news/115786.html">建设门户网站有哪些方面值得关注？</a>
<span>2021-05-31</span>
</li><li>
<a class="text_overflow" href="/news/115785.html">北京黄女士建设网站的经历</a>
<span>2021-05-31</span>
</li><li>
<a class="text_overflow" href="/news/115779.html">工业互联网细分赛道力量正在发力</a>
<span>2021-05-31</span>
</li><li>
<a class="text_overflow" href="/news/115778.html">网站开发的过程当中，应该从哪几个环节出发</a>
<span>2021-05-31</span>
</li><li>
<a class="text_overflow" href="/news/115777.html">电商网站对于企业品牌宣传的重要性</a>
<span>2021-05-31</span>
</li> </ul>
</div>
<div class="bkright tag">
<p><a href="https://www.cdcxhl.com/hangye/" target="_blank">行业建站</a></p>
<ul>
<li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="https://www.cdcxhl.com/hangye/jiulousj/" target="_blank">酒楼设计</a>
</li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="https://www.cdcxhl.com/hangye/jbgc/" target="_blank">搅拌罐车</a>
</li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="https://www.cdcxhl.com/hangye/qzgqb/" target="_blank">轻质隔墙板</a>
</li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="https://www.cdcxhl.com/hangye/putaojia/" target="_blank">葡萄架</a>
</li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="https://www.cdcxhl.com/hangye/ggsj/" target="_blank">广告设计</a>
</li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="https://www.cdcxhl.com/hangye/sclsb/" target="_blank">水处理设备</a>
</li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="https://www.cdcxhl.com/hangye/banjia/" target="_blank">搬家公司</a>
</li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<a href="https://www.cdcxhl.com/hangye/fwqtg/" target="_blank">服务器托管</a>
</li> </ul>
</div>
</div>
</div>
<footer>
<div class="carousel-inner footjz">
<div class="container">
<i class="icon iconfont zbw"></i>
高品质定制 <i class="icon iconfont"></i>
跨终端自动兼容 <i class="icon iconfont"></i>
节约开发成本 <i class="icon iconfont"></i>
开发周期短 <i class="icon iconfont"></i>
一体化服务
<button type="button" class="btn btn-default btn-lg" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 立即开始2800定制网站建设</button>
<button type="button" class="btn btn-default btn-xs" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 2800定制网站建设</button>
</div>
</div>
<div class="carousel-inner bqsy">
<div class="container">
<div class="lxfs">
<h4 class="yutelnone">028-86922220 13518219792</h4>
<h4 class="yutelblock"><a href="tel:02886922220">028-86922220</a> <a href="tel:13518219792">13518219792</a></h4>
<a class="btn btn-default" href="tencent://message/?uin=532337155&Site=&Menu=yes" role="button">网站建设<span>QQ</span>：532337155</a>
<a class="btn btn-default" href="tencent://message/?uin=631063699&Site=&Menu=yes" role="button">营销推广<span>QQ</span>：631063699</a>
<a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=532337155&version=1&src_type=web&web_src=oicqzone.com" role="button">网站制作<span>QQ</span>：532337155</a>
<a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=631063699&version=1&src_type=web&web_src=oicqzone.com" role="button">营销推广<span>QQ</span>：631063699</a>
<a class="btn btn-default nonea" href="tencent://message/?uin=1683211881&Site=&Menu=yes" role="button">售后QQ：1683211881</a>
<div class="dz">专注：
<a href="http://www.kswcd.com/" target="_blank">定制网站建设</a><a href="https://www.cdxwcx.com/" target="_blank">做网站</a><a href="https://www.xwcx.net/" target="_blank">服务器托管</a><a href="http://chengdu.cdxwcx.cn/" target="_blank">成都网站制作</a><a href="http://www.cdlogo.net/" target="_blank">广告设计</a> <address>地址：成都太升南路288号锦天国际A幢10楼</address>
</div>
</div>
<div class="bzdh dz"><img src="../imges/bottom_logo.png" alt="创新互联">
<p><a href="https://www.cdcxhl.com/menu.html" target="_blank">成都创新互联科技有限公司</a><br>
Tel：400-028-6601（7x24h）</p></div>
</div>
</div>
</footer>
</body>
</html>