HTML5和CSS3的新特性

简单介绍一下 HTML5 和 CSS3 的部分新特性：

1、HTML5新特性

html5的新增特性，增加了一些新的 标签、表单和表单属性。

1.新增的语义化标签

在以前的html布局中，我们基本上用的都是div布局，在html5中新增了一些语义化标签。部分如下：

语义化标签	描述
header	头部标签
nav	导航标签
section	定义某个区域的文档标签
article	内容标签
aside	侧边栏标签
footer	尾部标签

2.HTML5中新增的多媒体标签

html中新增的多媒体标签有： video、audio 标签

（1）video标签介绍
video的视频格式有mp4、webM和Ogg格式。一般主流浏览器都支持MP4格式[IE、Chrome、Firefox、safari、opera]，对于WebM和Ogg格式， IE和safari 不兼容。

<!--基本使用-->
<video src="视频地址" controls="controls">

video属性：

属性	属性值	描述
src	url	视频播放地址
autoplay	autoplay	视频就绪自动播放
controls	controls	向用户显示播放控件
muted	muted	静音播放
loop	loop	循环播放
width	px	设置播放器宽度
height	px	设置播放器高度
poster	imgurl	视频未加载完成时，播放器等待的画面
preload	auto（预加载视频） none（不加载）	是否预加载视频(如果有autoplay属性忽略)

<video src="../source/1.mp4" controls="controls"></video>

显示效果：

（2）audio标签介绍：
audio的音频格式有mp3、wav和ogg格式。一般主流浏览器都支持mp3格式 [IE、Chrome、Firefox、Safari、Opera] ，IE不支持Wav模式，Safari不支持和IE不支持ogg模式。

<audio src="音频地址" controls="controls"></audio>

audio属性：

属性	属性值	描述
src	url	音频播放地址
autoplay	autoplay	音频就绪自动播放
controls	controls	向用户显示播放控件
loop	loop	向用户循环播放音频文件

<audio src="../source/IU - Celebrity.mp3" controls="controls" loop="loop"></audio>

显示效果：

3.HTML5新增的input类型

类型值	描述
type=“email”	限制用户输入必须为email类型
type=“url”	限制用户输入的必须为url类型
type=“number”	限制用户输入必须为数字型
type=“tel”	手机号码
type=“search”	搜索框
type=“date”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“month”	限制用户输入必须为月类型
type=“week”	限制用户输入必须为周类型
type=“color”	生成一个颜色选择表单

4.HTML5新增的表单属性

属性	属性值	描述
required	required	表单的内容不能为空，为必填项
placeholder	提示文本	表单的提示信息
autofocus	autofocus	自动聚焦，页面加载后，自动聚焦到指定表单
autocomplete	on/off	当用户键入字段时，浏览器会根据之前输入的值，显示到字段填写的位置；on显示，off不显示
multiple	multiple	可以多选进行提交文件

2、CSS3新特性

css3新特性主要介绍css3中的 新增选择器、盒子模型和一些新特性。

1.属性选择器

属性选择器可以 根据元素的特定属性来选择元素。这样做可以不用借助 id 或者类选择器。

属性选择器	描述
E[att]	选择具有att属性的E元素
E[att=“val”]	选择具有att属性，且属性值等于val的E元素
E[att^=“val”]	匹配具有att属性，且属性值以val开头的E元素
E[att$=“val”]	匹配具有att属性，且属性值以val结尾的E元素
E[att*=“val”]	匹配具有att属性，且属性值中含有val的E元素

<input type="text" value="name">
<input type="text">
<input type="password">
<!--css样式效果-->
input[value] {
    background-color: aquamarine;
}
input[type=password] {
    background-color: coral;
 }

显示效果：

<!--[^]测试-->
<div class="icon1">图标1</div>
<div class="icon2">图标2</div>
<!--[$]测试-->
<div class="qq">qq</div>
<div class="qq-data">data1</div>
<div class="weixin-data">data2</div>
<div class="bilibili-data">data3</div>
<!--[*]测试-->
<div class="hello">hello</div>
<div class="hi-hello">hi</div>

<!--样式效果-->
  div[class^=icon] {
    color:cornflowerblue
  }
  div[class$=data] {
    color:darksalmon
  }
  div[class*=hello] {
    color:goldenrod
  }

显示效果：

2.结构伪类选择器

结构伪类选择器主要是 根据文档结构来选择元素。常用于根据父级选择子元素。

结构伪类选择器	描述
E:first-child	匹配父元素的第一个子元素E
E:last-child	匹配父元素的最后一个元素E
E:nth-child(n)	匹配父元素中的第n个子元素
E:first-of-type	指定类型E的第一个元素
E:last-of-type	指定类型E的最后一个元素
E:nth-of-type(n)	指定类型E的第n个元素

<!--html代码-->
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ul>

<!--css样式效果-->
  ul li:first-child {
    color:red;
  }
  ul li:last-child {
    color: blue;
  }
  ul li:nth-child(3) {
    color: purple;
  }

显示效果：

<!--html代码-->
<h4>我是h4-1</h4>
<p>我是p1标签</p>
<h5>我是h5-1标签</h5>
<p>我是p2标签</p>
<h5>我是h5—2标签</h5>
<h4>我是h4-2</h4>

<!--css样式-->
  h4:first-of-type {
    color:chocolate;
  }
  h4:last-of-type {
    color:dodgerblue;
  }
  p:nth-of-type(2) {
    color:goldenrod
  }

显示效果：

注意：
（1）nth-child(n)可以选择某个父元素的一个或者多个子元素。

• n 可以是 数字、关键字或者公式
• 如果 n为数字的话，n是从1开始的
• 如果n为关键字，可以取: even(偶数)、odd(奇数)
• 如果 n为公式的话，可以取：2n+1, n+5 …（这里的 n从0开始，n超出元素范围忽略）

<!--html代码-->
 <ul>
   <li>li-1</li>
   <li>li-2</li>
   <li>li-3</li>
   <li>li-4</li>
   <li>li-5</li>
 </ul>

<!--css样式效果-->
  ul li:nth-child(even) {
    color: red;

  }
  ul li:nth-child(2n+1) {
    color: green;
  }

显示效果：

（2）nth-child(n) 和nth-of-type(n)的区别：
E:nth-child(n) 是先将父元素中子元素都编上号，再查看是否与E元素匹配。
E:nth-of-type(n) 是先和E元素进行匹配，然后再对匹配的E元素类型进行编号。

<!--html代码编写-->
 <section>
   <p>哈尔的移动城堡</div>
   <div>千与千寻</div>
   <p>悬崖上的金鱼姬</p>
   <div>天空之城</div>
 </section>

<!--css样式编写-->
  section p:nth-child(3) {
    color: red;
  }
  section div:nth-of-type(2) {
    color: blue;
  } 

显示效果：

3.伪元素选择器

伪元素选择器可以利用css来创建新标签元素，而不需要html标签。（在html DOM树中是找不到的）

选择符	描述
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

<!--html代码-->
<div class="wei">hello</div>

<!--css样式-->
.wei::before, .wei::after {
    content: " yibo ";
 }

显示效果：

注意：
（1）使用before、after创建的元素 属于行内元素
（2）新创建的元素在文档树中是找不到的，所以叫做伪元素
（3）before和after 必须有content属性

4.css3盒子模型

css盒模型有两种：IE盒模型和标准盒模型。
（1）标准盒模型： content (内容实际的大小） + padding（内边距） + border （边框）

/*标准盒模型,也是默认的样式*/
box-sizing: content-box;

（2）IE盒模型： content（内容包含内边距和边框）

/*IE盒模型样式*/
box-sizing: border-box;

标准盒模型演示：

/*html代码*/
<div class="biaozhun">标准盒模型</div>
/*css样式效果*/
.biaozhun {
    height: 200px;
    width: 200px;
    padding: 20px;
    border: 5px solid #000;
    margin: 20px;
    background-color: brown;
    /* box-sizing: content-box; */
  }

盒子实际的宽度和高度为：200+ (20+5)*2 = 250px

IE盒模型演示：

/*html代码*/
<div class="IE">IE盒模型</div>
/*css样式效果*/
.IE {
    height: 200px;
    width: 200px;
    padding: 20px;
    border: 5px solid #000;
    margin: 20px;
    background-color: skyblue;
    box-sizing: border-box;
  }

5.css3其他特性

1、css3滤镜filter

filter将模糊或者颜色偏移应用于元素。

/*html代码*/
<img src="../source/wyb2.jpg" alt="">
/*css样式效果*/
img {
    width: 250px;
    filter:blur(4px);
  }

显示效果：

2、css3中的calc函数

/*html代码*/
<div class="parent">
    <div class="son">sun</div>
</div>
/*css样式效果*/
.parent {
    width: 300px;
    height: 300px;
    background-color: cornflowerblue;
  }
  .son {
    width: calc(100% - 20px);
    background-color: indianred;
  }

显示效果：

3、css3过渡

transition的基本使用：

transtion: 需要添加过渡的属性 花费时间 过渡曲线 何时开始

属性：属性添加原则，谁过渡给谁加，全部属性使用all
花费时间：花费时间的单位为s，eg: 0.5s
运动曲线：默认为ease。linear（匀速）、ease（逐渐慢下来）、ease-in（加速）、ease-out（减速）、ease-in-out（先加速后减速）
何时开始：默认从0开始，可以设置延迟时间

/*html代码*/
<div class="transition"></div>
/*css样式效果*/
  .transition {
    width: 100px;
    height: 90px;
    background-color: greenyellow;
    transition: width .5s ease;
  }
  .transition:hover {
    width: 300px;
  }