H5到底是什么？一节课带你从零开始深入理解Html5

Html5最新规范

1. 概述

2. 新增元素

3. 表单

4. 音频和视频

直播录屏版

传送门：https://v.qq.com/x/page/z0726rdy0uk.html

1.概述

什么是html5？

提到html5大家可能首先会想到的是移动端页面，但这只是html5的运用范围之⼀。

其实html5是最新的html规范，也是一系列用来制作现代web内容的相关技术的总称。

当然其中最重要的就是html5，css和js了。

html发展到如今，只经历了了短短的十多年。它是在1993年首次发布，作为一种网上信息浏览传输的规范。

之后的几年又迅速发布了2.0版，再到3.2版和4.0版。直到1999年的4.01版成为一个标志性的版本。

在这高速发展的⼏年⾥，W3C组织逐渐掌握了html规范的控制权。

当时在快速发布了这几个版本之后，业界普遍认为html已经穷途末路了，甚至想要开发其他新的语言来替代它。

因为这个时候的html如果想要支持更新的web应用，克服现有的缺点，那就迫切需要添加新的功能，指定新的规范。

2006年W3C重新接入其中，于2008年发布了html5的草案，提出了解决问题的办法和标准。

于是各大浏览器厂商按耐不住开始升级浏览器以支持html5，html重新焕发出无穷无尽的生命力并在互联网的舞台上大放光彩。

可以说，html5的出现和设计就是为了解决问题，它不是一个颠覆性的概念。

相反，它的核心理念是保持一切新特性平滑过渡，以保证兼容性所以可以放心使用。

同时它的更新非常具有实用性，它在所有可能的地方都努力进行了分离：

让表现和内容分离，使得访问下更佳，降低了不必要的复杂度

让代码更具有可读性，同时让文件不会过大导致页面加载变慢

还化繁为简，有了新的简化的doctype，新的简化的字符集声明，简单而强大的html5API

还以浏览器原生功能替代了部分js代码，开发体验使用体验大大增强。

2.新增元素

说到html的元素的使用其实非常简单，但知道如何使用这些元素和理解它们的含义，是同等重要的。

在html5中有一个很大变化是讲语义与元素所表现的结果分开。

之所以要这样做，是因为这样更合适：

html元素负责文档的内容结构

内容的表现形式则有css来控制

相互之间互不不影响，让代码清晰易读，便于团队维护开发。

搜索引擎也可以根据标签的语义确定上下文等问题。

因此写页面的时候少用那种有呈现样式作用的元素，比如strong，small之类。

尽量做到以内容类型为依据，使用最具体的元素，不不要误用元素。

2.1 新的doctype和新的字符集写法

浏览器会根据doctype来识别应该⽤什么模式来显示页⾯，用什么规则来验证⻚面。

在过去的版本中，需要加入⼀⻓串规则l地址，比如：

http://www.w3.org/TR/html4/loose.dtd">">http://www.w3.org/TR/html4/loose.dtd">

而在html5中已经没有这个必要了：

html的字符集可以告诉浏览器以什么内码什么语⾔来显示⽹页。

在过去的版本中设置这项会⽐比较复杂很难记忆：

⽽在html5中就要简单许多

2.2 新增语义元素——结构类

article 表示一篇任何形式的文章，可以独立的内容区块

aside 表示独立于周围内容的一个完整的内容块

figure 表示一副插画

figcaption 放在figure中标注插画标题的，目的是反应图片与标题之间是有关联的

header 表示增强的标题，可以包含标题或其他内容

footer 表示页面底部的页脚

hgroup 表示增强型的标题，目的是把标题和副标题联系到一起

nav 表示页面中重要的一组链接

section 表示文档中的一个区块，或一组文档。这是一个通用型的容器

基本规则就是必须开始于一个标题，然后应该在其他语义元素不适用的情况下再选用section

2.3 新增语义元素——文本类

time 标注日期和时间

output 标注js的返回值

mark 标注突显文本

3 Form表单

表单，是指从网站访问者手里收集信息的地方

比如可以填写文本的文本框，可以选中或者取消的多选框，只能多选一的单选框，下拉列表框等等。

表单的用途非常广，可以说只要上网就会遇到它。

html中的form表单和html语言几乎是同时出现的，多年来都没有丝毫改进。

一直到html5的出现，它在原来的表单基础上进行修订，增强了了许多功能，让交互变得更加容易起来。

3.1 新增的表单元素

html中的input是个神奇的存在，只需要修改它的type类型，就能实现许多不同类型的输入控件。

如果浏览器器不认识这些类型，就会把它们当做一个普通的text类型的文本框来处理，因此下面这些控件都能在不同浏览器放心使用。

在更现代的浏览器中使用这些类型的控件会显得更加方便：

可以提供便于编辑的辅助；

限制可能出现的错误；

以及执⾏行行验证。

tel 电话号码控件，在移动浏览器中会呼出特别的键盘：只包含数字没有字母

email 电子邮件控件，验证规则是这个字符串中必须含有@符号和一个点号，而且两者之间至少要间隔一个字符，点号后面至少要有两个字符，这差不多就是邮件的验证规则

url 网址类型控件

search 搜索框控件，用于执行某种搜索，它有其特定语义，便于浏览器或辅助上网软件知道这里是干嘛用的

range 滑动条控件

color 颜色控件，可以让用户从下拉式色盘中选取一个颜色

number 常规数值类型控件，浏览器自动忽略⾮数字类型字符。并且可以配合min和max属性使用

date 日期控件，提供一个方便的下拉式日历，避免输入者对日期格式的困惑，也能避免输入不存在的日期。格式为YYYY-MM-DD

time 时间控件，格式为HH:mm:ss.ss

3.2 新增的表单特性和函数

placeholder 占位

autocomplete 规定表单是否应该启用自动完成填充功能

autofocus 为表单挑选正确的起点焦点

list+datalist 显示输入建议

min+max 最小值和最大值，在多种表示数值的控件中可用

step 规定数字的间隔，可以与min和max配合使用，创建合法值范围

required 规定是否必填

4 音频和视频

最开始的网页中如果需要插入一段多媒体的音频和视频，通常都是使用元素硬塞

然后浏览器用系统的视频播放器创建一个视频窗口放在页面中。

这样做的问题在于一切都是听天由命，无法控制播放器，也不能提前缓冲，更不能知道用户到底有过哪些操作。

而用浏览器插件比如flash，解决了浏览器支持的问题。

但要把它放到网页中，必须用