HTML5新增特性 - 技术栈

HTML版本

HTML从1993年发展开始到1999年，从1.0版本发展到4.01版本，4.01版本是一个通用版本，在很长一段时间制作HTML网页都是使用4.01版本。

后续发展版本号发生了变化，没有直接发展到HTML5，而是到2000年发展为XHTML1.0版本，这个版本是对之前4.01版本的一个严格化和升级，但是并没有增加新的语法内容，一直到发展到XHTML2.0发生了分歧，这个2.0版本不兼容前面的很多语法内容，对于很有应用场景来说是不适用的，因此在这个分歧过程中又有了新的方向，最后合并成了HTML5版本，HTML5可以兼容之前的很多语法，并且发展了一些新的内容，因此，HTML5是未来的发展趋势。

HTML5 简介

HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。用于取代HTML4与XHTML的新一代标准版本，所以叫HTML5。

HTML5新变化

HTML5并没有抛弃XHTML，而是将XHTML作为学习的一个标准，XHTML的可扩展性和灵活性依然在发挥作用。HTML5沿用了之间的优点，增加了一些特性，也取消了一些不合法的设定。

XHTML 可扩展超文本标记语言

XHTML是一种增强了的HTML，它的可扩展性和灵活性将适应未来网络应用更多的需求。

HTML5

• HTML5的最初的设计目的是为了在移动设备上支持多媒体。

• 在发展过程中增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3特性。

• 废弃一些元素和属性比如 font 、center 等...（这些现在可以通过css实现）

HTML5优势劣势

HTML5优势

• 提高可用性和改进用户的友好体验

• 更好的语义化标签

• 可以给站点带来更多的多媒体元素(视频和音频)

• 可以很好的替代FLASH和Silverlight

• 当涉及到网站的抓取和索引的时候，对于SEO很友好；

• 将被大量应用于移动应用程序和游戏

• 可移植性好

HTML5 劣势

• 该标准并未能很好的被PC端浏览器所支持（因为它最初设计为了移动端开发）

• IE9以下的浏览器几乎都不兼容

HTML5前景趋势

广义的HTML5

• 狭义的 HTML5 是指 HTML 语言的第 5 个版本。

• 而广义的 HTML5 是 HTML5本身 + CSS3 + JavaScript 技术的综合。因为HTML5搭配另外两种技术可以实现更好的效果。

HTML5 新增语义化标签

标签语义化

以前制作网页布局，我们基本用div 来做。 div就是一个普通的块级标签，对于搜索引擎来说，是没有语义的。

新增语义化标签

• <header >：头部标签

• <nav >：导航标签

• <main >: 主体标签（包括<article>和<aside>）

• <article >：独立的内容标签，也可以说是一个主题

• <section >：区段标签，类似于div，只不过这个语义化更强一些

• <aside >：侧边栏标签（可以左边也可以右边， float: left; ）

• <footer>：尾部标签

注意事项

• 这种语义化标准主要针对搜索引擎 的，如果不需要做一些搜索引擎相关内容，还可以使用之前的标签

• 这些新标签页面中可以使用多次 的

• 在IE9中，需要把这些元素转换为块级元素 （IE9以下一般不兼容所以不用这些标签）

• 其实，我们移动端更喜欢使用这些标签

• HTML5 还增加了很多其他标签，我们后面再慢慢学

HTML 元素参考 - HTML（超文本标记语言） | MDN

示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*清除默认样式*/
        *{
            margin: 0;
            padding: 0;
        }
        /*转块避免问题出现*/
        header,nav,main,article,aside,section,footer{
            display: block;
        }
        header{
            width: 1000px;
            height: 100px;
            margin: 0 auto;
            background-color: greenyellow;
        }
        nav{
            width: 1000px;
            height: 50px;
            margin: 10px auto;
            background-color: greenyellow;
        }
        main{
            width: 1000px;
            height: 400px;
            margin: 10px auto 0;
            background-color: yellowgreen;
        }
        main aside{
            float: left;
            width: 150px;
            height: 300px;
            margin-right: 10px;
            background-color: pink;
        }
        main article{
            float: left;
            width: 840px;
            height: 400px;
            background-color: pink;
        }
        footer{
            width: 1000px;
            height: 80px;
            margin: 10px auto 0;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <header>头部</header>
    <nav>导航</nav>
    <main>
        <aside>侧边栏</aside>
        <article>主体内容</article>
    </main>
    <footer>底部</footer>
</body>
</html>

HTML5 新增多媒体标签

多媒体标签

多媒体标签包含两个，具体如下：
• 音频：<audio>
• 视频：<video>

使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的 flash 和其他浏览器插件。

1. <audio>音频标签

HTML5 在不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的。

浏览器支持音频格式

<audio>音频标签语法格式

html 复制代码

<body>
   <!-- 音频的标签和属性 -->
   <audio src="media/snow.mp3" controls="controls"></audio>
</body>

不添加controls属性无法在浏览器看见音频，controls就是添加音频控制条

在H5中如果属性名和属性值相同，可以省略属性值不写，即下面两种写法效果一样（不过最好还是按照上面的写法书写，以免出现错误）：

html 复制代码

<body>
   <!-- 效果相同 -->
   <audio src="media/snow.mp3" controls="controls"></audio>
   <audio src="media/snow.mp3" controls></audio>
</body>

<audio>音频标签常见属性

注意：在谷歌浏览器中禁止了"autoplay"属性，防止用户访问页面时突然播放吓到用户，其他浏览器都可以使用"autoplay"属性。

html 复制代码

<audio src="media/snow.mp3" controls="controls" preload="preload" loop></audio>

<audio>音频标签兼容写法

有的浏览器兼容这种音频格式，有的浏览器兼容那种，现在让所有浏览器都兼容音频标签：

根据上面音频格式和浏览器的兼容图可知，mp3和其他任意一种音频格式组合都可以覆盖所有浏览器。

html 复制代码

<body>
  <!-- 多种音频格式的兼容写法 -->
<audio controls>
    <source src="media/snow.mp3" type="audio/mpeg">
    <source src="media/snow.ogg" type="audio/ogg">
    您的浏览器版本过低，不支持音频播放
</audio>
</body>

2. <video>视频标签

HTML5 在不使用插件的情况下也可以原生的支持视频格式文件的播放，当然支持格式是有限的。

浏览器支持视频格式

<video>视频标签语法格式

html 复制代码

<body>
  <!-- 视频的标签和属性 -->
<video src="media/video.mp4" controls="controls"></video>
</body>

<video>视频标签常见属性

谷歌浏览器同样禁止视频自动播放，但是可以通过 muted 设置静音播放，如果是静音播放就允许自动播放，不是静音播放就不允许自动播放。

html 复制代码

<video src="media/video.mp4" controls="controls" autoplay="autoplay" muted="muted"></video>

poster属性（属性值就是图片路径）演示：

不自动播放且设置了poster属性，页面加载未点开视频时就会出现这张图片，也可以当作视频封面，点击播放按钮视频就会正常播放（播放完一遍后不会回到这张图）

html 复制代码

<video src="media/video.mp4" controls="controls" poster="image/logo.png"></video>

<video>视频标签兼容写法

mp4与其他两个中的任意一个组合可以包含所有浏览器

html 复制代码

<body>
  <!-- 不同的浏览器兼容写法，需要添加多个视频资源文件 -->
<video controls="controls" width="200px">
    <source src="media/video.mp4" type="video/mp4">
    <source src="media/video.ogg" type="video/ogg">
    您的浏览器版本过低，不支持video视频标签
</video>
</body>

总结

• 音频标签和视频标签使用基本一致

• 浏览器支持情况不同

• 我们可以给视频标签添加 muted 属性进行自动静音播放视频，音频不可以

• 视频标签是重点，我们经常设置自动播放，循环和设置大小属性，不使用controls 控件。

HTML5新增表单标签和属性

新增输入标签type属性

已学表单<input>标签类型：

H5新增<input>表单类型：

type="email"测试：

html 复制代码

<body>
 <form action="">
    姓名： <input type="text">
    邮箱： <input type="email">
    <input type="submit">
 </form>
</body>

type="number"演示：

max设置可以输入的最大值，min设置可以输入的最小值，step设置每点击一次按钮增加几，value设置默认值（浏览器加载完用户未输入时输入框显示的数字）

html 复制代码

 <form action="">
    年龄：<input type="number" max="100" min="0" step="4" value="10"><br>
    <input type="submit"><br>
 </form>

range和number类似，后面可以将二者综合使用，滑动条滑到几就可以在number框内显示。

type="color" 拾色器效果

<datalist>标签

• <datalist> 标签规定了 <input> 元素可能的选项列表 。（用户不需要输入，直接选择）

• <datalist>元素包含了一组<option>元素，这些元素表示预定义可选值 ，在<input>元素输入过程中，会自动响应<option>元素的值。

• 必须设置绑定才能实现用户选择效果

• 绑定的<input>标签必须设置 list 属性，属性值等于<datalist>标签的 id 属性值。（input标签中list属性的属性值与datalist的id属性值相同，完成绑定）

• 如果预定义的选项中没有用户想要的值，用户也可以自己输入

代码中的value的值广州就是预定义的值，""gz"即"广州"的关联项，即用户输入gz就会弹出广州供用户选择

html 复制代码

 <form action="">
    城市：<input type="text" list="list01"><br>
    <!-- 预定义一些选项 -->
    <datalist id="list01">
        <option value="广州">gz</option>
        <option value="深圳">sz</option>
        <option value="上海">sh</option>
    </datalist>
    <input type="submit" value="提交"><br>
 </form>

如果没有关联值，也可以这样写：

html 复制代码

<body>
 <form action="">
    城市：<input type="text" list="list01"><br>
    <!-- 预定义一些选项 -->
    <datalist id="list01">
        <option value="广州">
        <option value="深圳">
        <option value="上海">
    </datalist>
    <input type="submit" value="提交"><br>
 </form>

二者也可以同时出现在同一个datalist中。

新增表单属性

required="required"必填项：

html 复制代码

姓名： <input type="text" required="required"><br>

placeholder 提示信息：

html 复制代码

    姓名： <input type="text" required="required" placeholder="请输入姓名"><br>

autofocus=" autofocus" 在一个表单，自动聚焦到某一个表单元素上，就是打开一个页面，页面中有一个光标存在，这就是自动聚焦：

一个页面中默认只设置一个自动聚焦

html 复制代码

    搜索框：<input type="search" autofocus=" autofocus"><br>

autocomplete默认是 on 的状态，同时要定义 name 属性才可以：

html 复制代码

    自动完成搜索框：<input type="search" autocomplete="on" name="sousuo"><br>

multiple="multiple"同时选择多个文件

html 复制代码

    文件： <input type="file" multiple="multiple">

最终：

html 复制代码

<body>
 <form action="">
    <!-- 姓名必填项 -->
    姓名： <input type="text" required="required" ><br>
    <!-- 提示文本 -->
    邮箱：<input type="email" placeholder="请输入邮箱"><br>
    <!-- 自动聚焦 -->
    搜索框：<input type="search" autofocus=" autofocus"><br>
    <!-- autocomplete -->
    自动完成搜索框：<input type="search" autocomplete="on" name="sousuo"><br>
    城市：<input type="text" list="list01"><br>
    <!-- 预定义一些选项 -->
    <datalist id="list01">
        <option value="广州">
        <option value="深圳">
        <option value="上海">
    </datalist>
    文件： <input type="file" multiple="multiple">
    <input type="submit" value="提交"><br>
 </form>
</body>