cssday7-HTML5 和 CSS3 的新特性

这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，移动端不用担心兼容性，因为移动端是后来发展的，都是新的

1.HTML5新特性

1.1新增语义化标签

避免全局都用div没有语义化

• <header>:头部标签
• <nav>:导航标签
• <article>:内容标签
• <section>:定义文档的某个区域
  -<aside>：侧边栏标签
• <footer>:尾部标签
  
  注意：
  这种语义化标准主要是针对搜索引擎的 
  这些新标签页面中可以使用多次 
  在 IE9 中，需要把这些元素转换为块级元素
  
  其实，我们移动端更喜欢使用这些标签 
  HTML5 还增加了很多其他标签，我们后面再慢慢学

  1.2新增多媒体标签

  使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用 flash 和其他浏览器插件
  1. 音频：<audio> 2. 视频：<video>
  当前 video 元素支持三种视频格式： 尽量使用 mp4格式

属性	值写不写值都行	说明
autoplay	autoplay	视频加载好后自动播放，谷歌还要加muted来解决自动播放问题
controls	controls	播放控件
muted		静音播放
src	url	音频链接
width
height
loop		循环播放
poster	imgurl	当视频还没有加载完成时，就放这张图片

音频

属性	属性值	说明
src	同上
autoplay
controls
loop

谷歌浏览器把音频和视频自动播放禁止了
我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过JavaScript解决） 
视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性

1.3新增input表单属性

属性	说明
type=“email”	限制用户必须输入Email类型
type=“url”
type=“number”
type=“tel”	输入必须是电话号码
type=“search”	搜索框
type=“time”
type=“date”
type=“week”
required=“required”	拥有该属性的表单控件，表示其内容不能为空，必填
placeholder=“写提示文本”	提示信息
multiple=“multiple”	可以选择多文件提交
autofocus=“autofocus”	自动聚焦，也就是当你打开百度时，光标就是自动在百度的搜索框中了
autocomplete=“off/on”	当你点击搜索框的时候，如果你设置了on ，就会把你上一次搜索的历史显示出来，给你选，默认是on，一般都是关掉off，防止信息泄露

可以通过以下设置方式修改placeholder里面的字体颜色：
input::placeholder { color: pink; }

2.css新特性

2.1图片变模糊滤镜filter（了解）

img {
filter:blur(5px);
}
/*必须加单位，值越大就越模糊*/

2.2calc函数的计算

calc() 此CSS函数让你在声明CSS属性值时执行一些计算。 括号里面可以使用 + - * / 来进行计算。

width:calc(100%-80px);
/*宽度为父元素的100%再减去80px*/

2.3过渡（重点）

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
我们现在经常和 :hover 一起 搭配使用

 transition: 要过渡的属性  花费时间  运动曲线  何时开始; 

1.属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都 变化过渡， 写一个all 就可以。
2. 花费时间： 单位是 秒（必须写单位） 比如 0.5s
3. 运动曲线： 默认是 ease （可以省略）
4.何时开始 ：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）
进度条案例

2.4盒子模型

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

1. box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）
2. box-sizing: border-box 盒子大小为 width
   如果盒子模型我们改为了box-sizing: border-box ， 那padding和border就不会撑大盒子了（前提padding 和border不会超过width宽度）

3.css3新增选择器

1.属性选择器

选择符	说明
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的元素

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

选择符	说明
F E:first-child	选择父元素F中的第一个子元素名为E
F E:last-child	选择父元素F中的最后一个子元素名为E
F E:nth-child（n）	选择父元素F中的第n个子元素名为E
F E:first-of-type	选择父元素F中E元素这种标签类型的第一个
F E:last-of-type	选择父元素F中E元素这种标签类型的最后一个
F E:nth-of-type（n）	选择父元素F中E元素这种标签类型的第n个

区别：

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

nth-child（n） 选择某个父元素的一个或多个特定的子元素（重点

• n 可以是数字，关键字和公式
• n 如果是数字，就是选择第 n 个子元素， 里面数字从1开始…
• n 可以是关键字：even 偶数，odd 奇数
• 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略

公式	取值（n 从0开始）
2n	偶数 2 4 6 …
2n+1	奇数 1 3 5…
5n	5 10 15 …
n+5	5 6 7 8 …从第5个开始到最后
-n+5	5 4 3 2 1 前5个

小结：
1.结构伪类选择器一般用于选择父级里面的第几个孩子 
2. nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配 
3.nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子 
4. 关于 nth-child（n） 我们要知道 n 是从 0 开始计算的，要记住常用的公式 
5.如果是无序列表，我们肯定用 nth-child 更多 
6.类选择器、属性选择器、伪类选择器，权重为 10。

3.伪元素选择器（ 重点）

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

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

• before 和 after 创建一个元素（伪的），但是属于行内元素
• 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
• before 和 after 必须有content 属性
• 伪元素选择器和标签选择器一样，权重为 1

伪元素选择器使用场景1：伪元素字体图标

伪元素选择器使用场景2：仿土豆效果

伪元素选择器使用场景3：伪元素清除浮动