【白话科普】10s 从零看懂 H5

最近大家有没有发现,很多微信公众号的动态内容变多了?我们常常可以看到,公众号内容中有很多动态图片甚至动画,还可以通过手指滑动切换页面,或者有一些小的点击互动。

这种看起来有点高级的小作品,其实是都是“互动形式的多媒体广告页面”,它是 H5 的移动端网页。

什么是 H5

H5 其实是缩写,我们一般所说的 H5,其实是指 HTML5,即第五代超文本标记语言。而超文本标记语言 HTML,是一种标记语言。它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的 Internet 资源连接为一个逻辑整体。需要注意的是 HTML 不是一种编程语言,因此 HTML 的上手极为方便。那为什么 HTML 直到第 5 代才这么热门的出现?

因为以前网页主要在电脑中访问,而如今访问网页的设备逐渐从电脑端转移到了移动设备。可是原本的网页如果用手机查看是很难看清楚内容的,这才推动了 HTML5 的出现。

【白话科普】10s 从零看懂 H5_第1张图片

而 HTML5 也不负众望,带着一些全新特性几乎完美的达成了适配多种设备的需求。

HTML5 的特性

语义化标签

语义是指对一个词或者句子含义的正确解释,HTML 语义化让我们仅通过 HTML 元素就能看出页面的大致结构。HTML5 新增的语义化元素,让我们能够通过标签名判断标签内容。这些元素分别是:

  • 标签通常放在页面或页面某个区域的顶部,用来设置页眉;
  • 标签中的内容比较独立,可以是一篇新闻报道,一篇博客,它可以独立于页面的其他内容进行阅读;
  • 标签表示页面中的一个区域,通常对页面进行分块或对内容进行分段,
    标签和
    标签可以互相嵌套;
  • 标签位于页面或页面某个区域的底部,用来设置页脚,通常包含版权信息,联系方式等。

增强型表单

之前的 HTML 版本的功能,比如日期、颜色、文本框等,是需要单独的控件进行支持的,而到了 HTML5,这些常用功能直接进入了表单标签中,比如你可以直接通过 控制颜色。

除此外, HTML 还增加了新的表单属性:

  • placeholder 提供对输入域的提示值
  • required 规定表单提交前输入域是否必填
  • pattern 规定用于验证 input 域的正则表达式
  • min 规定输入域允许的最小值
  • max 规定输入域允许的最大值
  • multiple 输入域可以选择多个值,适用于 email 和 file 类型

DOM 扩展

HTML5 为 DOM 作了一些专门扩展,包括 classList 属性、焦点管理、HTMLDocument 变化、字符集属性、插入标记、getElementByClassName() 方法等。这其中 getElementByClassName() 方法是最受欢迎的,它可以让添加事件处理程序不再局限于使用 ID 或标签名 (getElementsByTagName)。

媒体元素

HTML5 新增了两个与媒体相关的标签

Web Storage

Web Storage 有两个主要目标:

  • 提供一种在 cookie 之外存储会话数据的途径
  • 提供一种存储大量可以跨会话存在的数据的机制

常用的两个对象分别是:

  • localStorage:对象存储某个特定会话的数据,该数据只保持到浏览器关闭。
  • sessionStorage:目的是跨越会话存储对象,但有特定的访问限制,限制因浏览器而异。

WebSockets

HTML5 支持了 WebSockets。WebSockets 可以让双工、双向通信能在一个单独连接上持久存在,WebSocket 协议更好的节省了服务器资源和带宽,并且能够更实时地进行通讯。但是这个需要支持这种协议的专门服务器,当然我们也可以选择使用云服务来解决。详细可以查看《聊聊 WebSocket,还有 HTTP》

HTML5 的优劣

任何特性如果单独看可能并不能直白的体会到它的优势,那我们就来直白地看一下这些特性让 HTML5 相较之前的版本增加了多少优势:

  • 提高了用户体验并且提高了可用性:这些特性让站点能够加入更多多媒体元素,音视频的使用更为广泛。同时它替代了 FLASH 和 Silverlight
  • 对网站而言:对 SEO 的抓取和索引都更为友好了,让用户能够更容易的查找到网站。
  • 提高了移植性:这让大量应用程序和游戏不再局限于 PC 端,而是能使用手机访问。
  • 节省开发成本:充分提现了“响应式设计”的概念,只要使用一套代码就可以适配任何设备、任何系统、任何分辨率。

不过作为一个全新的版本,HTML5 有着新东西都有的痛点。最标志的就是不能被所有的浏览器支持,比如 IE,当前 IE9 以下的浏览器都不兼容 HTML5。

【白话科普】10s 从零看懂 H5_第2张图片

但是在移动端设备越来越普及,功能也越来越强大的当下。HTML5 占领全部市场只是时间问题,你看微信公众号内容都开始出现 HTML5 了不是么?

推荐阅读

网络安全(一):常见的网络威胁及防范

进击的 Ansible(二):如何快速搞定生产环境 Ansible 项目布局?

你可能感兴趣的