(十).HTML5的新标签，CSS3的新增长度和颜色单位

1 HTML5 新增语义化标签

1.1 新增页面结构标签（最重要）

标签名	语义和功能	属性	单标签还是双标签
header	页头		双标签
footer	页脚		双标签
nav	导航		双标签
section	页面或文章中的一部分		双标签
aside	侧边栏		双标签
article	文章		双标签
main	主要内容		双标签

1.2 新增状态标签（了解）

标签名	语义和功能	属性	单标签还是双标签
meter	静态的度量		双标签
progress	动态的进度		双标签

meter 和 progress 什么区别：

1. meter 表示静态的度量，如电池电量、磁盘容量、温度等
2. progress 表示动态的进度，如进度条

1.3 新增注释标签（注音标签）

标签名	语义和功能	属性	单标签还是双标签
ruby	注音包裹标签		双标签
rt	注音		双标签

<ruby>
    饕餮
    <rt>taotie</rt>
</ruby>

1.4 新增文本标签

标签名	语义和功能	属性	单标签还是双标签
mark	标记标签		双标签

可以用于搜索结果中关键字的标记！

2 HTML5 表单新增功能

2.1 表单控件新增属性

旧标准存在的表单控件属性：

name		设置表单控件名称
value		设置表单控件的值
disabled	设置表单控件不可用

新标准增加的表单控件属性：

placeholder			设置提示文字，用于输入框、文本域。
required			设置必填或必选，不需要设置值
autofocus			自动获取焦点，不需要设置值
autocomplete		设置是否开启浏览器对输入框的记录  值： on（默认值）、off
pattern				使用正则表达式对表单输入框中的内容进行验证

2.2 input 标签的 type 属性新增的值

旧标签 input 标签 type 属性的值：

text、password、radio、checkbox、submit、reset、button

① 输入框类（5个）

<!-- 邮箱 提交表单的时候会进行验证 如果不填写不会验证 -->
<input type="email" placeholder="请输入邮箱">
 
<!-- 数字 -->
<input type="number" placeholder="请输入数字">
<input type="number" max="9999" min="1000" placeholder="请输入数字">
<input type="number" max="9999" min="1000" step="100" placeholder="请输入数字">
<input type="number" placeholder="请输入数字" step=".01">
 
<!-- URL 验证是否是URL，如果不填不会验证-->
<input type="url" placeholder="请输入网址">
 
<!-- 电话号码 不会验证，在移动端会弹出数字键盘-->
<input type="tel" placeholder="请输入电话号码">
 
<!-- 搜索框 -->
<input type="search" placeholder="搜索...">

② 范围选择框（1个）

<input type="range">
<input type="range" min="-100" max="100">
<input type="range" name="num" min="-100" max="100" step="10">

③ 颜色选择框（1个）

<input type="color">

④ 日期时间选择框类（5个）

<!-- 年月 -->
<input type="month">
 
<!-- 哪一年的第几周 -->
<input type="week">
 
<!-- 年 月 日 -->
<input type="date">
 
<!-- 时间 -->
<input type="time">
 
<!-- 日期+时间 年月日时分 -->
<input type="datetime-local">

2.3 form 标签新增属性

novalidate		不进行验证，该属性无需设置值。

3 HTML5 音视频

3.1 音视频标签

标签名	功能和语义	属性	单标签还是双标签
video	视频	src：设置视频地址。 controls：显示控制条，不需要值。 autoplay：自动播放，不需要值。 muted：静音，不需要值。 loop：循环播放，不需要值。 preload：预先加载，不需要值。 poster：设置视频封面图片地址。 width：设置宽度。 height：设置高度	双标签
audio	音频	src：设置音频地址。 controls：显示控制条，不需要值。 autoplay：自动播放，不需要值。 muted：静音，不需要值。 loop：循环播放，不需要值。 preload：预先加载，不需要值。	双标签
source	加载音频或视频	src：音频或视频文件的地址。 type：音频或视频的类型	单标签

1. chrome 要求，只有静音设置自动播放才有效。
2. chrome 要求，音频不能自动播放

/* 设置video标签自动适应父元素的尺寸 */
	object-fit:cover;

3.2 浏览器支持的音视频格式

① 视频格式

mp4
webm
ogg

② 音频格式

mp3
wav
ogg

4 HTML5 新增全局属性

旧标准中的全局属性：

name
id
class
style
lang
title

HTML5 标准新增的全局属性

hidden		隐藏元素，该属性不需要值

a 标签新增的属性：

download	该属性不需要值

5 HTML5 兼容性方案

5.1 设置元信息

<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
 
<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta name="renderer" content="webkit">

5.2 html5shiv.js 让IE8以及以下的浏览器支持H5新标签

<!--[if lt ie 9]>
	<script src="../js/html5shiv.js"></script>
<![endif]-->

6 CSS3 基本语法

6.1 CSS3 浏览器私有前缀

-webkit-	chrome浏览器、 Safari浏览器
-moz-		Firefox
-ms-		IE
-o-			Opera

6.2 CSS3 新增长度单位

rem			根元素字体大小的倍数，常用
vw			(视口被均分为100单位的)视口宽度的百分之几，常用
vh			(视口被均分为100单位的)视口高度的百分之几
vmax		视口宽高中较大的一个的百分之几
vmin		视口宽高中较小的一个的百分之几

6.3 CSS3 新增颜色设置方式

① rgba

a 表示不透明度，取值范围 0 ~ 1，值越大越不透明，0 表示完全透明，1表示完全不透明

② hsl

h	色相、色调， 取值： 0 ~ 360   红0 绿 120 蓝 240
s 	饱和度 取值： 0% ~ 100%
l	亮度 取值： 0% ~ 100%

③ hsla

在 hsl 的基础上增加了不透明度