【白话科普】10s 从零看懂 H5
最近大家有没有发现，很多微信公众号的动态内容变多了？我们常常可以看到，公众号内容中有很多动态图片甚至动画，还可以通过手指滑动切换页面，或者有一些小的点击互动。
这种看起来有点高级的小作品，其实是都是“互动形式的多媒体广告页面”，它是 H5 的移动端网页。
什么是 H5
H5 其实是缩写，我们一般所说的 H5，其实是指 HTML5，即第五代超文本标记语言。而超文本标记语言 HTML，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。需要注意的是 HTML 不是一种编程语言，因此 HTML 的上手极为方便。那为什么 HTML 直到第 5 代才这么热门的出现？
因为以前网页主要在电脑中访问，而如今访问网页的设备逐渐从电脑端转移到了移动设备。可是原本的网页如果用手机查看是很难看清楚内容的，这才推动了 HTML5 的出现。
文章图片
而 HTML5 也不负众望，带着一些全新特性几乎完美的达成了适配多种设备的需求。
HTML5 的特性
语义化标签
语义是指对一个词或者句子含义的正确解释，HTML 语义化让我们仅通过 HTML 元素就能看出页面的大致结构。HTML5 新增的语义化元素，让我们能够通过标签名判断标签内容。这些元素分别是：
- 标签通常放在页面或页面某个区域的顶部，用来设置页眉；
- 标签中的内容比较独立，可以是一篇新闻报道，一篇博客，它可以独立于页面的其他内容进行阅读；
- 标签表示页面中的一个区域，通常对页面进行分块或对内容进行分段， 标签和标签可以互相嵌套；
- 标签用来表示除页面主要内容之外的内容，比如侧边栏；
之前的 HTML 版本的功能，比如日期、颜色、文本框等，是需要单独的控件进行支持的，而到了 HTML5，这些常用功能直接进入了表单标签中，比如你可以直接通过
除此外， HTML 还增加了新的表单属性：
- placeholder 提供对输入域的提示值
- required 规定表单提交前输入域是否必填
- pattern 规定用于验证 input 域的正则表达式
- min 规定输入域允许的最小值
- max 规定输入域允许的最大值
- multiple 输入域可以选择多个值，适用于 email 和 file 类型
HTML5 为 DOM 作了一些专门扩展，包括 classList 属性、焦点管理、HTMLDocument 变化、字符集属性、插入标记、getElementByClassName() 方法等。这其中 getElementByClassName() 方法是最受欢迎的，它可以让添加事件处理程序不再局限于使用 ID 或标签名 (getElementsByTagName)。
媒体元素
HTML5 新增了两个与媒体相关的标签和