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/116361.html">HTML5增加了哪些优势？</a>
<br>
URL网址：<a href="https://www.cdcxhl.com/news/116361.html">https://www.cdcxhl.com/news/116361.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/yingxiao/">网站营销</a>、<a href="https://www.cdcxhl.com/news/quanwang/">全网营销推广</a>、<a href="https://www.cdcxhl.com/news/dingzhikaifa/">定制开发</a>、<a href="https://www.cdcxhl.com/news/mobile/">手机网站建设</a>、<a href="https://www.cdcxhl.com/news/cehua/">网站策划</a>、<a href="https://www.cdcxhl.com/news/qiyejianzhan/">企业建站</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/116356.html">信息化的时代，文件的保存和备份显得尤为重要</a>
<span>2021-06-04</span>
</li><li>
<a href="/news/116352.html">蓝色的信息量与网页表现</a>
<span>2021-06-04</span>
</li><li>
<a href="/news/116350.html">搭建网站前如何确定设计方案？</a>
<span>2021-06-04</span>
</li><li>
<a href="/news/116348.html">企业网站建设要不要外包出去？</a>
<span>2021-06-04</span>
</li><li>
<a href="/news/116346.html">企业搭建官网的意义是什么？</a>
<span>2021-06-04</span>
</li><li>
<a href="/news/116344.html">网站优化不一定需静态化应遵循哪些</a>
<span>2021-06-04</span>
</li><li>
<a href="/news/116340.html">开发多语言网站时字符集应该怎么选择？</a>
<span>2021-06-04</span>
</li> </ul>
</div>
</div>
<div class="col-lg-3 noneb">
<a href="https://www.cdcxhl.com/" title="成都网站建设" target="_blank"><img src="/upload/news/jianzhan.png" alt="成都网站建设" 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/116357.html">支持旧IE浏览器的技巧</a>
<span>2021-06-04</span>
</li><li>
<a class="text_overflow" href="/news/116353.html">做网站时网站上的各栏目名称和版块名称一定要通俗易懂？</a>
<span>2021-06-04</span>
</li><li>
<a class="text_overflow" href="/news/116351.html">网站应该要如何去定位</a>
<span>2021-06-04</span>
</li><li>
<a class="text_overflow" href="/news/116349.html">百度推出了新的自媒体平台---百度发布平台</a>
<span>2021-06-04</span>
</li><li>
<a class="text_overflow" href="/news/116347.html">建设网站应该注意什么</a>
<span>2021-06-04</span>
</li><li>
<a class="text_overflow" href="/news/116345.html">为什么设计师在网站和APP上都爱用tab式导航</a>
<span>2021-06-04</span>
</li><li>
<a class="text_overflow" href="/news/116341.html">网页设计中构图的方法</a>
<span>2021-06-04</span>
</li> <li>
<a class="text_overflow" href="/news/116339.html">为什么你开发的小程序却无法得到用户青睐</a>
<span>2021-06-04</span>
</li><li>
<a class="text_overflow" href="/news/116337.html">SEO优化中有时候会碰到内页的排名比首页高是为什么？</a>
<span>2021-06-04</span>
</li><li>
<a class="text_overflow" href="/news/116336.html">开发网站时需要注意哪些事项</a>
<span>2021-06-04</span>
</li><li>
<a class="text_overflow" href="/news/116335.html">发布网站与维护</a>
<span>2021-06-04</span>
</li><li>
<a class="text_overflow" href="/news/116334.html">谈谈我们如何拴住“蜘蛛”的胃</a>
<span>2021-06-04</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/shipaifang/" 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/sdgz/" 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/jiaquan/" 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/weilanhulan/" 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/yhjdsj/" 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/bdfhw/" 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/shachuang/" 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/bengche/" 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.cxhlcq.com/" target="_blank">重庆网站制作</a><a href="http://chengdu.cdxwcx.cn/" target="_blank">成都网站制作</a><a href="http://www.cxhlcq.com/" target="_blank">重庆网站建设公司</a><a href="https://www.cdcxhl.com/" target="_blank">成都网站建设</a><a href="http://www.kswsj.com/" 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>