建设网站所需要的技术,正规电商平台,苏州网络平台公司,影楼管理系统什么是 HTML5HTML的发展历程如下#xff1a;产生于1990年1997年 HTML4 出现#xff0c;成为互联网开发的标准2008年#xff0c;HTML5正式出现#xff0c;2002年趋于稳定HTML在发展过程中#xff0c;HTML4.01 版本维持了长达十年的时间#xff0c;之后 HTML5 标准才出现产生于1990年1997年 HTML4 出现成为互联网开发的标准2008年HTML5正式出现2002年趋于稳定HTML在发展过程中HTML4.01 版本维持了长达十年的时间之后 HTML5 标准才出现它被认为是下一代互联网标准。我们今天 Web 开发关于 HTML 内容相关的绝大部分都是基于 HTML5 标准来进行开发的。引言最近csdn也是迎来了第二波“原力计划”与其在家无所事事不如多多学习来充实自己眼看大三下就要为实习做准备了该为自己的未来提前做好准备和筹划了。个人偏向前端开发于是今后的博客内容几乎都是关于前端方面的东西了如果小伙伴们也对前端感兴趣的话不妨互相关注一波可以在评论区交流交流。本文主要介绍相比于HTML4来说HTML5有了哪些新的特性了呢又废除了哪些元素和属性呢新增的元素和废除的元素新增的结构元素seciton、article、aside、header、hgroup、footer、nav、figure新增的其它元素video、audio、embed、mark、progress、meter、time、ruby、rt、rp、wbr、canvas、command、details、datalist、datagrid、keygen、output、source、menu新增的input元素的类型email、url、number、range、Data Pickers废除的元素能使用CSS替代的元素 basefont、big、center、font、s、tt、u等不再使用frame框架只有部分浏览器支持的元素其它被废除的元素新增的属性和废除的属性新增的属性表单相关的属性链接相关的属性其它属性废除的属性友情提示以上提及到的属性和元素均会在下面进行说明和介绍。HTML5“新”特性这里给新打上引号是因为说它新但是也确实不新了毕竟也出现十多年了而且现在大部分的特性API都已经被开发使用的差不多了。但是说它不新吧也不太对因为 HTML5 里面很多 API 都是特性场景特定功能如果只是一般开发简单的前端页面那么大部分是不会用到的所以很多人也不怎么了解。因此在这里就根据实际代码来基本了解一下避免被某些专项开发问住至少不至于一点也不知道语义化标签这个不需要多用语言文字说明我们来简单实现一下如下图所示的布局代码。第一种原始标签布局HeaderNavArticleSectionAsideFooter第二种语义化标签布局HeaderNavArticleSectionAsideFooter看完上面两种写法相信大部分人还是会经常使用第一种吧。两种写法孰优孰劣其实很难断定因为单单从性能上来说可能并没有太多区别而第一种又比较习惯写起来比较快但是语义化标签具有如下优点比所有布局全部采用 div 标签阅读起来更清晰利于 SEO方便搜索引擎识别页面结构 - 这也是非常重要的方便设备解析比如盲人阅读语义化标签比 div 标签要好很多HTML5 标签还有很多个具体解释释义大家可以去查看对应地址HTML5标签。表单功能增强HTML5 对表单功能进行了增强input 标签可以输入各种类型从而渲染相应的表单内容。具体如下所示邮箱标签: 数字标签: 滑动条标签: 搜索框标签: 日期框: 星期框: 月份框: 颜色框: 网址框: 可以看到都是 input 标签但是渲染出来的是不同类型的页面元素。除此之外HTML5 对 form 表单还进行了内置属性的增强。比如通用属性 placeholder、autofocus再比如如果是 number 类型则可以设置 min 和 max 属性如果是 password 类型则可以设置 minLength 和 maxLength 属性。更多相关属性请查阅HTML5 表单音频/视频音频/视频是 HTML5 提供的关键 API因为在 HTML5 之前浏览器支持音视频方案都是通过 Flash 来实现的相信很多人都知道远古的页面确实嵌套着很多 Flash 插件。HTML5 的音频视频方案具体有如下优点浏览器原生支持本网页不支持媒体标签上面代码就直接嵌入了一段音频在网页上并且增加了控制器非常便捷。视频选项也一样只不过换成了标签。可以设置多类型音视频兼容性良好本网页不支持媒体标签媒体标签内部还可以通过标签来进行多种类型的兼容比如低版本 IE 不支持 mp3 文件那么我们就可以通过上面的代码来进行低版本浏览器的兼容点击播放按钮浏览器就会从上至下解析直到解析成功如果不成功则显示不支持媒体标签如下图所示可以看到第一个播放的是 mp3 文件第二个播放的是 ogg 文件。画布 — Canvas 关于 Canvas 这里不想多说因为这个地方太专业了如果只是问你知不知道那么你一定知道但是不经常使用绘图 API 的话也讲不太清楚细节因此留给读者自行去搜相关资料。本地存储 HTML5 的本地存储新增了一些比如 Storage 和 manifest 离线缓存。之前前端本地存储都是通过 cookie 来进行的。Storage 分为 LocalStorage 和 SessionStorage具体的相信大家都很清楚也经常被问到所以就不多做解释了。真的烂大街了我再写也是浪费彼此时间。Cache Manifest应用程序缓存为应用带来三个优势离线浏览 - 用户可在应用离线时使用它们速度 - 已缓存资源加载得更快减少服务器负载 —— 浏览器将只从服务器下载更新过或更改过的资源。下面简单来设置一下如下图所示在有网络的时候加载一个图片链接然后将网络设置成离线该链接就不可访问了。设置一下离线缓存新建manifest.appcache这里的后缀名是官方建议的。具体可以查看此处HTML5 应用缓存然后写入如下内容CACHE MANIFESThttps://dss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u3097378621,1517430839fm74app80fJPEGsizef121,90?sec1880279984t7dcb802bd45e50b25868fc4d1302ffdc里面对应的内容就是我们希望缓存的图片线上地址然后我们在有网的时候访问一下再关闭网络刷新页面就会发现图片可以正常展示并且从图中可以看出加载的图片就变成了从 cache 里获取。Web Worker我们都知道HTMl 代码的执行顺序是从上而下单线程执行所以当浏览器执行到某个 js 脚本的时候页面的状态是不可被响应的也就是会阻塞。而 Web Worker 是运行在后台的 JavaScript它独立于其他脚本不会影响页面的性能。也就是说类似于多线程给 Worker 的脚本代码开了另一个线程来执行一般来说配合 HTML5 的 postMessage 来进行与主页面的交流。Web Worker 看起来非常简单但是实际使用非常高深用得好可以提升应用性能用得不好则很多余。我实际上没怎么用过所以这里就简单介绍一下。// worker.jsvar i0;function timedCount() {i i 1;postMessage(i);setTimeout(timedCount(), 500);}timedCount();// webworker.htmlvar w;function startWorker() {if (typeof (Worker) ! undefined) {if (typeof (w) undefined) {w new Worker(webworker.js);}w.onmessage function (event) {document.getElementById(result).innerHTML event.data;};}else {document.getElementById(result).innerHTML Sorry, your browser does not support Web Workers...;}}function stopWorker() {w.terminate();}具体效果如上图所示这里需要注意的是本地文件是无法访问到 worker.js 的如果想要使用需要起一个小服务才行。其他内容 除了上面几个大块知识点HTML5 还有几个其他 API这些知识点在某些方面非常的有用所以在这里也就简单说明一下。地理定位 HTML5 还提供了地理定位功能这个就是个封装 API所以没什么可说的。var xdocument.getElementById(demo);function getLocation(){if (navigator.geolocation){navigator.geolocation.getCurrentPosition(showPosition);}else{x.innerHTMLGeolocation is not supported by this browser.;}}function showPosition(position){x.innerHTMLLatitude: position.coords.latitude Longitude: position.coords.longitude;}datalist这个属性也是非常好用的只不过我们经常使用别人已经封装好的 UI 组件所以就没怎么用过此标签就是 HTML5 封装的 Select API。可编辑内容这个属性牛逼的不行也是所有主流浏览器都支持的并且它被广泛的应用比如很多网页编辑器内容切换编辑状态等等都可以通过这个属性来实现。如下图所示 div 标签变成了可编辑的状态此属性被很多页面编辑器所应用。非常好用值得大家二次开发~跨域此处知识点也就是 postMessage 和 WebSocket 两个应该是比较重要的部分后续再写吧有点累了…总结以上就是你不得不知的HTML “新”特性了后续内容都会与前端有关持续更新中各位伙伴一起来学习前端吧学如逆水行舟不进则退
