快来了解——HTML5、CSS3新特性

HTML5新特性

HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单、新的表单属性。这些特性都有兼容性问题，IE9+以上版本才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

新增语义化标签

<header>:头部标签

nav:导航标签

<article>:内容标签

<section>:定义文档某个区域

<side>:侧边栏标签

<footer>：尾部标签

• 注意：
  • 这些语义化标准主要是针对搜索引擎的
  • 这些新标签页面中可以使用多次
  • 在IE9中，需要把这些元素转化为块级元素
  • 其实，移动端更喜欢这些标签
  • HTML5还增加了很多其他标签

新增多媒体标签

主要包含两个：

1. 音频：<audio>

2. 视频：<video>

视频标签

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

浏览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (从 Opera 25 起)	YES	YES

尽量使用MP4格式。

语法：

<video src="文件地址" controls="controls"></video>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	如果出现该属性，视频的音频输出为静音。
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	URL	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

音频标签

浏览器	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

语法：

<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  Your browser does not support this audio format.
</audio>

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	如果出现该属性，则音频输出为静音。
preload	auto metadata none	规定当网页加载时，音频是否默认被加载以及如何被加载。
src	URL	规定音频文件的 URL。

HTML5新增的input类型

语法：

<input type="value">

属性值：

值	描述
button	定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。
checkbox	定义复选框。
color	定义拾色器。
date	定义 date 控件（包括年、月、日，不包括时间）。
datetime	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。
datetime-local	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
email	定义用于 e-mail 地址的字段。
file	定义文件选择字段和 “浏览…” 按钮，供文件上传。
hidden	定义隐藏输入字段。
image	定义图像作为提交按钮。
month	定义 month 和 year 控件（不带时区）。
number	定义用于输入数字的字段。
password	定义密码字段（字段中的字符会被遮蔽）。
radio	定义单选按钮。
range	定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
reset	定义重置按钮（重置所有的表单值为默认值）。
search	定义用于输入搜索字符串的文本字段。
submit	定义提交按钮。
tel	定义用于输入电话号码的字段。
text	默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
time	定义用于输入时间的控件（不带时区）。
url	定义用于输入 URL 的字段。
week	定义 week 和 year 控件（不带时区）

HTML5新增的表单属性

属性	值	描述
accept	audio/* video/* image/* MIME_type	规定通过文件上传来提交的文件的类型。 (只针对type=“file”)
align	left right top middle bottom	HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (只针对type=“image”)
alt	text	定义图像输入的替代文本。 (只针对type=“image”)
autocomplete New	on off	autocomplete 属性规定 元素输入字段是否应该启用自动完成功能。
autofocus New	autofocus	属性规定当页面加载时 元素应该自动获得焦点。
checked	checked	checked 属性规定在页面加载时应该被预先选定的 元素。 (只针对 type=“checkbox” 或者 type=“radio”)
disabled	disabled	disabled 属性规定应该禁用的 元素。
form New	form_id	form 属性规定 元素所属的一个或多个表单。
formaction New	URL	属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type=“submit” 和 type=“image”)
formenctype New	application/x-www-form-urlencoded multipart/form-data text/plain	属性规定当表单数据提交到服务器时如何编码(只适合 type=“submit” 和 type=“image”)。
formmethod New	get post	定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type=“submit” 和 type=“image”)
formnovalidate New	formnovalidate	formnovalidate 属性覆盖 元素的 novalidate 属性。
formtarget New	_blank _self _parent _top framename	规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type=“submit” 和 type=“image”)
height New	pixels	规定 元素的高度。(只针对type=“image”)
list New	datalist_id	属性引用 元素，其中包含 元素的预定义选项。
max New	number date	属性规定 元素的最大值。
maxlength	number	属性规定 元素中允许的最大字符数。
min New	number date	属性规定 元素的最小值。
multiple New	multiple	属性规定允许用户输入到 元素的多个值。
name	text	name 属性规定 元素的名称。
pattern New	regexp	pattern 属性规定用于验证 元素的值的正则表达式。
placeholder New	text	placeholder 属性规定可描述输入 字段预期值的简短的提示信息 。
readonly	readonly	readonly 属性规定输入字段是只读的。
required New	required	属性规定必需在提交表单之前填写输入字段。
size	number	size 属性规定以字符数计的 元素的可见宽度。
src	URL	src 属性规定显示为提交按钮的图像的 URL。 (只针对 type=“image”)
step New	number	step 属性规定 元素的合法数字间隔。
type	button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week	type 属性规定要显示的 元素的类型。
value	text	指定 元素 value 的值。
width New	pixels	width 属性规定 元素的宽度。 (只针对type=“image”)

CSS3新特性

• 新增的CSS3特性有兼容性问题，IE9+才支持
• 移动端支持由于PC端
• 不断改进中
• 应用相对广泛
• 现阶段主要学习：新增选择器和盒子模型以及其它特性。

CSS3新增选择器

CSS3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

属性选择器

• 利用属性选择器可以不用借助于类或者id选择器。

<style>
  /*必须是input而且其中有value这个属性*/
  input[value] {
    color: pink;
  }
</style>  

<input type="text" value="请输入用户名">
<input type="text">

• 属性选器还可以选择属性=值的某些元素。（重点）

<style>
  /*input标签中属性type的属性值为text*/
  input[type=text] {
    color: pink;
  }
</style>
<input type="text">
<input type="password">

• 属性选择器可以选择属性值开头的某些元素。

<style>
  /*选择首先是div然后具有class属性，并且属性值必须是icon开头的这些元素*/
  div[class^=icon] {
    color: pink;
  }
</style>

<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>打酱油</div>

• 属性选择器可以选择属性值结尾的某些元素

<style>
  /*选择首先是div然后具有class属性，并且属性值必须是icon开头的这些元素*/
  div[class$=blue] {
    color: blue;
  }
</style>

<div class="icon1-blue">小图标1</div>
<div class="icon2-blue">小图标2</div>
<div class="icon3-yellow">小图标3</div>
<div class="icon4-red">小图标4</div>
<div>打酱油</div>

注意：类选择器、属性选择器、伪类选择器，权重为10。

结构伪类选择器

• E:first-child：匹配父元素中的第一个E元素
• E:last-child：匹配父元素中最后一个E元素
• E:nth-child(n)：匹配父元素中的第n个子元素E（小括号中n可以为数字，公式：2n——偶数，2n+1——奇数，5n——5的倍数，n+5——5之后的所有，-n+5——前5个 ，关键字：even——偶数，odd——奇数）【会把所有的盒子都排序号】
• E:first-of-type：指定类型E的第一个
• E:last-of-type：指定类型E的最后一个
• E:nth-of-type()：指定类型E的第n个

区别：

1. nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配。
2. nth-of-type对父元素里面指定子元素进行排序。先去匹配E，然后再根据E找到第n个孩子。

伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新元素，而不需要HTML标签

• ::before：在元素内部的前面插入内容
• ::after：在元素内部的后面插入内容

注意：

• before，after创建一个元素，但是属于行内元素
• 新创建的这个元素在文档树中找不到，所以我们称之为伪元素
• 语法：element::before{}
• before和after必须有content属性
• before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
• 伪元素选择器和标签选择器一样，权重都是1

CSS3盒子模型

CSS3中可以通过box-sizing来指定盒模型，有两个值：即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

• 可以分成两种：
  • box-sizing: content-box:盒子大小width+padding+border（以前默认的）
  • box-sizing: border-box:盒子大小为width
• 如果盒子模型我们改变了box-sizing: border-box，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）

CSS3其他特性

CSS3滤镜filter

filter CSS属性将模糊或颜色偏移等图像效果应用于元素。

filter: 函数();例如：filter: blur(5px);

blur模糊处理，数值越大越模糊。

添加filter: blur(5px);之后：

CSS3 calc函数

calc()此CSS函数让你在声明CSS属性值时执行一些计算。

width: clac(100%-80px);

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .father {
            width: 300px;
            height: 200px;
            background-color: pink;
        }
        
        .son {
            width: calc(100% - 30px);
            height: 30px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

• 注意：css的运算符"+ - * /"左右两边均要留空格。

CSS3过渡（重点）

• 过渡（transition）是CSS3中具有颠覆性的特征之一，我们可以在不适用Flash动画或Javascript的情况下，当元素从一种样式变换为另一种样式时添加效果。
• 过渡动画：是从一个状态，渐渐的过渡到另外一个状态
• 我们可以让页面更好看，动感十足，虽然低版本浏览器不支持（ie9以下）但是不会影响页面布局
• 经常与:hover一起搭配使用。
• transition：要过渡的属性 花费时间 运动曲线 何时开始；
  • 属性：想要变化的CSS属性，宽度、高度、背景颜色、内外边框都可以。如果想要所有属性都变化过渡，写一个all就可以。
  • 花费时间：单位是秒（必须写单位）例如0.5s
  • 运动曲线：默认是ease（可以省略）
  • 何时开始：单位是秒（必须写单位），可以设置延迟触发时间 默认是0s（可以省略）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            transition: width 1s;
        }
        
        div:hover {
            width: 400px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

• 记住过渡的使用口诀：谁做过渡给谁加！如果想要写多个属性，用逗号隔开，但建议使用all。