行业资讯

首页 > 新闻资讯 > 行业资讯 > HTML5增加了哪些优势?

HTML5增加了哪些优势?

2025-05-18 09:53:22   来源:   阅读:
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>,,<section>,<p>,,<span>, 等等。” 这其中大部分有HTML5以前的标签也有HTML5的而这些刚好就是我们常用的标签,不常用的也许不必太过了解布局DIV也可以不是么? 另外推荐大家在使用新语义标签的时候尽量每个独立的页面只使用一个标签作为包裹,语义化的作用就是seo(具体可百度),就是让搜索引擎知道网上到底有些什么,如header 、main、footer标签等等,当然你也可以写100个! 以下总结出HTML5常用的标签: “header” “nav” “main”“article” “address”“section”“aside” “footer” 如果忘记了这些标签的意思可以访问 MDN、W3C、或者CSND,当然博客园上搜搜可能会更快 以下为菜鸟教程对html5新标签的注解 /html5-new-element.html HTML5的重点标签之video和audio <video></video> 视频 属性:controls 显示控制栏 属性:autoplay 自动播放 属性:loop 设置循环播放 </audio> 音频 属性:controls 显示控制栏 属性:autoplay 自动播放 属性:loop 设置循环播放 video标签支持的格式 5/html_5_video.asp 多媒体标签在网页中的兼容效果方式(每个浏览器支持的情况不同所以需要做兼容性处理)(以下source属性只会生效一个 即 if = true 之后 就不执行了) <video> <source src="code/多媒体标签/trailer.mp4"> <source src="trailer.ogg"> <source src="trailer.WebM"> </video> HTML5中的智能表单控件 <input type="email"> type值 ={ email: 输入合法的邮箱地址 url: 输入合法的网址 number: 只能输入数字 range: 滑块 color: 拾色器 date: 显示日期 month: 显示月份 week : 显示第几周 time: 显示时间 } (智能表单,会自动对输入的内容做基本校验,内容不符合基本校验则拒绝提交请求 表单属性 ◆form属性: autocomplete=on | off 自动完成 novalidate=true | false 是否关闭校验 ◆ input属性: autofocus : 自动获取焦点 <input type="text" list="abc"/> <datalist id="abc"> <option value="123">12312</option> <option value="123">12312</option> <option value="123">12312</option> <option value="123">12312</option> </datalist><br /> multiple: 实现多选效果 placeholder : 占位符 (提示信息) required:必填项 HTML5中新的一些API 以前获取节点通过 document.getElementById("ID名称")这些还有className,name,tagname等等方式获取返回当前节点 H5新增的节点获取方法只有两个 document.querySelector("选择器"); 返回节点 document.querySelectorAll("选择器"); 返回数组 可以好的代替以前或者节点的方式,如果无需兼容ie10以下的话 H5中对class的操作 classList.add("类名") 添加class类名 不返回任何值 如果你把它赋值给一个变量 得到结果是undefined classList.remove("类名"); 删除 classList.contains("类名"); 检查has className 是否存在返回布尔值 即true and false classList.toggle("active"); 查询active 是否存在,存在就删除,不存在就添加 ,省去了if判断!返回布尔值如果执行多条 即 true false true false. 自定义属性 (小案例分析体验自定义属性) data-自定义属性名 获取自定义属性 Dom.dataset 返回的是一个对象 Dom.dataset.属性名 或者 Dom.dataset[属性名] 注:属性名无需加data如自定义属性名 = data-canvas 那么获取的时候 直接dataset.canvas即可 设置同理 设置自定义属性 Dom.dataset.自定义属性名=值 或者 Dom.dataset[自定义属性名]=值; 文件读取 FileReader FileReader 接口有3个用来读取文件方法返回结果在result中 readAsBinaryString ---将文件读取为二进制编码 readAsText ---将文件读取为文本 readAsDataURL ---将文件读取为DataURL FileReader 提供的事件模型 onabort 中断时触发 onerror 出错时触发 onload 文件读取成功完成时触发 onloadend 读取完成触发,无论成功或失败 onloadstart 读取开始时触发 onprogress 读取中 获取当前网络状态 window.navigator.onLine 返回一个布尔值 网没问题返回true否则返回false 网络状态事件 (大部分为不支持和废弃状态也许移动端用的比较多) window.ononline window.onoffline 获取地理定位 获取一次当前位置 window.navigator.geolocation.getCurrentPosition(success,error); success成功之后获取位置信息 否则抛出错误,比如获取位置信息被拒绝 coords.latitude 维度 coords.longitude 经度 实时获取当前位置 window.navigator.geolocation.watchPosition(success,error); 本地存储 随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,传统方式我们以document.cookie来进行存储的,但是由于其存储大小只有4k左右,并且解析也相当的复杂,给开发带来诸多不便,HTML5规范则提出解决方案,使用sessionStorage和localStorage存储数据。 localStorage: 永久生效 多窗口共享 容量大约为20M ◆window.localStorage.setItem(key,value) 设置存储内容 ◆window.localStorage.getItem(key) 获取内容 ◆window.localStorage.removeItem(key) 删除内容 ◆window.localStorage.clear() 清空内容 sessionStorage: 生命周期为关闭当前浏览器窗口 可以在同一个窗口下访问 数据大小为5M左右 ◆window.sessionStorage.setItem(key,value) ◆window.sessionStorage.getItem(key) ◆window.sessionStorage.removeItem(key) ◆window.sessionStorage.clear() required如何修改默认提示选项 需要两个几个参数 placeholder = 默认提示用户输入 oninvalid事件 = 当用户输入不符合规则的时候提示的内容随意改setCustomValidity 就是用来修改 requered值的函数 oninput事件 = 约等于chuange事件 立即执行 console.log('Hello World')</div> <div class="notice"> 本文《HTML5增加了哪些优势?》发布于君君营销文章,作者:admin,如若转载,请注明出处:/news/hyzx/96465.html,否则禁止转载,谢谢配合! </div> <div class="pagenext mt10"> <div class="page_up"><strong>上一篇:</strong><a href="/news/hyzx/96464.html">网站与网络是两种不同的东西</a></div> <div class="page_up"><strong>下一篇:</strong><a href="/news/hyzx/96466.html">支持旧IE浏览器的技巧</a></div> </div> </div> </div> </div> <div class="pageright"> <div class="pic"> <a href="https://affim.baidu.com/unique_66483611/chat?siteId=21861119&userId=66483611&siteToken=0dcfd9e467389a34a39c81422cb7e337" target="_blank"><img src="/statics/images/huoqu2.jpg" alt="免费获取"></a> </div> <div class="box mt20"> <div class="tit"> <span>推荐文章</span> </div> <ul class="ranklist"> <li> <a href="/news/hyzx/4.html" title="提高百度SEO排名的10大技巧和策略">提高百度SEO排名的10大技巧和策略</a> </li> <li> <a href="/news/hyzx/110460.html" title="百度移动搜索优化提升策略">百度移动搜索优化提升策略</a> </li> <li> <a href="/news/hyzx/110459.html" title="搜索引擎营销诊断优化关键技巧与案例分析">搜索引擎营销诊断优化关键技巧与案例分析</a> </li> <li> <a href="/news/hyzx/110458.html" title="如何选择效果好的SEO公司提升网站排名">如何选择效果好的SEO公司提升网站排名</a> </li> <li> <a href="/news/hyzx/110457.html" title="2024上海旅游攻略景点美食文化全指南">2024上海旅游攻略景点美食文化全指南</a> </li> <li> <a href="/news/hyzx/110456.html" title="忠魁互联领先科技解决方案">忠魁互联领先科技解决方案</a> </li> <li> <a href="/news/hyzx/110455.html" title="学习如何精通搜索引擎优化实现网站流量暴涨">学习如何精通搜索引擎优化实现网站流量暴涨</a> </li> <li> <a href="/news/hyzx/110454.html" title="谷歌SEO优化专家提升排名快">谷歌SEO优化专家提升排名快</a> </li> <li> <a href="/news/hyzx/110453.html" title="百度图片搜索优化技巧分享">百度图片搜索优化技巧分享</a> </li> <li> <a href="/news/hyzx/110452.html" title="石狮搜索引擎优化策略实现高效排名提升">石狮搜索引擎优化策略实现高效排名提升</a> </li> </ul> </div> <div class="box mt20"> <div class="tit"> <span><i class="iconfont"></i>热门标签</span> <a href="/tag.html">查看更多</a> </div> <div class="taglist"> <span><a href="/tag/21.html" title="SEO">SEO</a></span> <span><a href="/tag/5.html" title="网站">网站</a></span> <span><a href="/tag/23.html" title="雕塑">雕塑</a></span> <span><a href="/tag/112.html" title="小红">小红</a></span> <span><a href="/tag/34.html" title="优化">优化</a></span> <span><a href="/tag/113.html" title="书爆">书爆</a></span> <span><a href="/tag/20.html" title="百度">百度</a></span> <span><a href="/tag/19.html" title="提高">提高</a></span> <span><a href="/tag/32.html" title="新闻">新闻</a></span> <span><a href="/tag/29.html" title="网络">网络</a></span> <span><a href="/tag/30.html" title="负面">负面</a></span> <span><a href="/tag/31.html" title="舆情">舆情</a></span> <span><a href="/tag/114.html" title="款速">款速</a></span> <span><a href="/tag/40.html" title="评分">评分</a></span> <span><a href="/tag/33.html" title="页面">页面</a></span> <span><a href="/tag/36.html" title="排名">排名</a></span> <span><a href="/tag/37.html" title="整站">整站</a></span> <span><a href="/tag/38.html" title="提升">提升</a></span> <span><a href="/tag/39.html" title="流量">流量</a></span> <span><a href="/tag/2.html" title="网页">网页</a></span> <span><a href="/tag/117.html" title="推广">推广</a></span> <span><a href="/tag/116.html" title="KOC">KOC</a></span> <span><a href="/tag/115.html" title="款攻">款攻</a></span> <span><a href="/tag/11.html" title="剪刀">剪刀</a></span> <span><a href="/tag/9.html" title="词优">词优</a></span> <span><a href="/tag/8.html" title="关键">关键</a></span> <span><a href="/tag/7.html" title="屏蔽">屏蔽</a></span> <span><a href="/tag/6.html" title="如何">如何</a></span> <span><a href="/tag/4.html" title="滚动">滚动</a></span> <span><a href="/tag/3.html" title="设计">设计</a></span> <span><a href="/tag/109.html" title="小红书seo">小红书seo</a></span> <span><a href="/tag/110.html" title="抖音seo">抖音seo</a></span> <span><a href="/tag/108.html" title="官网seo">官网seo</a></span> <span><a href="/tag/111.html" title="抖音优化">抖音优化</a></span> </div> </div> </div> </div> </div> <script language="JavaScript" src="/api.php?op=count&id=96465&modelid=1"></script> <div class="bottom"> <div class="wrapper"> <div class="fbox wow fadeInUp" data-wow-duration=".5s" data-wow-delay="0s"> <p class="btitle">产品与服务</p> <ul class="fbox-list"> <li><a href="https://www.ijunjun.com/seo/">SEO优化</a></li> <li><a href="https://www.ijunjun.com/sem/">SEM广告投放</a></li> <li><a href="https://www.ijunjun.com/brand/">品牌口碑建设</a></li> <li><a href="https://www.ijunjun.com/xinmeiti/">新媒体营销</a></li> <li><a href="https://www.ijunjun.com/metia/">媒体传播</a></li> <li><a href="https://www.ijunjun.com/website/">网站建设</a></li> <li><a href="https://www.ijunjun.com/xiaochengxu/">小程序建设</a></li> <li><a href="https://www.ijunjun.com/yuqing/">舆情管理</a></li> <li><a href="https://www.ijunjun.com/about/">公司简介</a></li> <li><a href="https://www.ijunjun.com/case/">服务案例</a></li> </ul> </div> <div class="fbox wow fadeInUp" data-wow-duration=".5s" data-wow-delay="0.3s" id="fastnav"> <p class="btitle">新闻资讯</p> <ul class="fbox-list2"> <li><a href="https://www.ijunjun.com/news/jjnews/">君君新闻</a></li> <li><a href="https://www.ijunjun.com/news/hyzx/">行业资讯</a></li> <li><a href="https://www.ijunjun.com/news/ppyx/">品牌营销</a></li> <li><a href="https://www.ijunjun.com/news/wdyx/">问答营销</a></li> <li><a href="https://www.ijunjun.com/news/nryx/">内容营销</a></li> <li><a href="https://www.ijunjun.com/news/yqgg/">舆情公关</a></li> <li><a href="https://www.ijunjun.com/news/yxbk/">营销百科</a></li> <li><a href="https://www.ijunjun.com/news/spyx/">视频营销</a></li> <li><a href="https://www.ijunjun.com/news/xmtyx/">新媒体营销</a></li> </ul> </div> <div class="fbox bw2 wow fadeInUp" data-wow-duration=".5s" data-wow-delay="0.6s" id="icontact"> <p class="btitle">联系我们</p> <div class="contactlist"> <div class="item"> <span class="iconfont"></span> 18221295083 </div> <div class="item"> <span class="iconfont"></span> 上海市浦东新区航头镇沪南公路4583号<br /> 上海市青浦区蟠龙路899号 </div> <div class="item"> <span class="iconfont"></span> 18221295083 </div> <div class="item"> <span class="iconfont"></span> zhanglongfu@ijunjun.com </div> <li><a href="/contact/">联系我们</a></li> <li><a href="/about/">关于我们</a></li> </div> </div> <div class="fbox4 wow fadeInUp" data-wow-duration=".5s" data-wow-delay="0.9s"> <p class="btitle">二维码</p> <!-- <div class="foottel"> <p><i class="iconfont"></i> 18221295083</p> </div> --> <div class="c"></div> <div class="qrcode"> <span><img src="/uploadfile/2024/1009/20241009055246316.jpg" /><br/>官方微信</span> <span><img src="/uploadfile/2024/1009/20241009055246316.jpg" /><br/>小程序</span> <div class="c"></div> </div> </div> </div> <div class="c"></div> </div> <div class="bottom2 wow fadeInUp" data-wow-duration=".5s" data-wow-delay="0s"> <div class="wrapper"> <div class="copyright"> <div class="city"><a href="/city.html"><span>全国</span><i>切换分站</i></a></div> 版权所有:上海君君信息技术有限公司, 联系地址:上海市浦东新区航头镇沪南公路4583号  备案信息:<a href="https://beian.miit.gov.cn/" target="_blank">沪ICP备2024070557号-4</a> <div class="sitemap"> <a href="/sitemap.xml" target="_blank">sitemap.xml</a> </div> </div> </div> <div class="c"></div> </div><!--底部--> <div class="xuanfu"> <div class="xuanfubox"> <div class="item iback"> <div class="text"> <i id="iback"></i> <div class="t">返回<br/>顶部</div> </div> </div> <div class="item"> <div class="text"> <i id="itel" class="iconfont"></i> <div class="t">咨询</div> </div> <div class="kuang"> <em class="arrow"></em> <div class="inner-box"> <div class="pic"><img src="/statics/images/wechat.jpg" alt=""></div> <p>扫描微信二维码,添加好友</p> </div> </div> </div> <div class="item"> <div class="text"> <i id="itel" class="iconfont"></i> <div class="t">电话</div> </div> <div class="kuang"> <em class="arrow"></em> <div class="phone-box"> <div class="phonein"> <p>24小时电话:</p> <dt><a href="18221295083" target="_blank">18221295083</a></dt> </div> </div> </div> </div> <div class="item"> <div class="text"> <i id="itel" class="iconfont"></i> <div class="t">微信</div> </div> <div class="kuang"> <em class="arrow"></em> <div class="inner-box"> <div class="pic"><img src="/uploadfile/2024/1009/20241009055246316.jpg" /></div> <p>官方微信</p> </div> </div> </div> </div> </div> </body> </html>