小白学习前端day10

HTML5 和 CSS3 提高

HTML5 提高-新增语义化标签

问题 1：HTML 5 新特性有兼容性问题吗？IE 多少版本以上的浏览器才能支持？

HTML5 的新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持；如果不考虑兼容性问题，可以大量使用这些新特性。

问题 2：HTML5 新增的语义化标签有什么好处？

有利于搜索引擎搜索和网站的 SEO （Search Engine Optimization，搜索引擎优化）。

问题 3：视频中介绍了哪些 HTML 5 的语义标签？分别可以用在布局的什么位置？

HTML5 新增视频标签

问题 1：HTML5 主要新增了哪两个多媒体标签？

video 视频标签 audio 音频标签

问题 2： video 标签支持几种视频格式？推荐使用哪一种格式？

问题 3： video 标签是单标签还是双标签？ img 标签呢？

video 是双标签，可以针对不同浏览器提供不同格式的视频；

img 是单标签，指定 src 既可以显示图像，不存在浏览器兼容问题。

</video>

问题 4： video 标签提供了哪些控制播放的属性？

问题 5： video 标签的宽高属性可以通过 CSS 控制吗？

可以

HTML5 新增音频标签

问题 1： audio 标签支持几种音频格式？推荐使用哪一种格式？

推荐使用 mp3 格式的音频

问题 2： audio 标签是单标签还是双标签？ img 标签呢？

audio 是双标签，可以针对不同浏览器提供不同格式的音频；

img 是单标签，指定 src 既可以显示图像，不存在浏览器兼容问题。

</audio>

问题 3： audio 标签提供了哪些控制播放的属性？

问题 4： audio 标签的使用和 video 标签的使用有什么共同点？应该如何记忆和使用？

1. 音频标签和视频标签使用方式基本一致

2. 浏览器支持情况不同

1. 视频使用 mp4 格式 2. 音频使用 mp3 格式

3. 谷歌浏览器禁用了音频和视频的自动播放

1. 视频标签添加 muted 属性来静音播放视频 2. 音频不可以（可以通过 JavaScript 解决）

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

HTML5 新增 input 表单

问题 1：HTML5 为什么新增很多的表单 input 类型？

方便程序员的开发，与表单域联用，不同的 input 类型能够自动添加校验功能；方便移动端的开发，不同的 input 类型，键盘的弹出方式不同。

问题 2：需要重点记忆那三个 input 类型？

需要重点记忆： number 、 tel 、 search 三个 input 类型；

常用输入类型： text 、 password 、 radio 、 checkbox 、 button 、 file 、 hidden 、 submit 、 reset 。

HTML5 新增表单属性

CSS3 选择器

CSS3 新增属性选择器

问题 1：新增的 CSS3 特性有兼容性问题吗？在开发中要使用吗？

CSS3 的新特性都有兼容性问题，IE9+ 以上版本的浏览器才支持；在开发中要使用，这是因为移动端支持优于 PC 端。

问题 2：我们今天会学习哪 3 类选择器？

属性选择器结构伪类选择器伪元素选择器

问题 3：属性选择器的作用是什么？一定要记住的语法是什么？

可以根据元素属性来选择元素。

属性选择器语法

问题 1：属性选择器的权重是多少？

CSS3 新增结构伪类选择器-选择第 n 个元素

问题 1：结构伪类选择器的作用是什么？

根据文档结构来选择器元素，常用于选择父级选择器里面的子元素。

问题 2： nth-child 的 n 是数字是从 0 开始还是从 1 开始？

从 1 开始，数字是几就选择第几个孩子。

问题 1： nth-child 的 n 的可以使用哪些关键字？分别代表什么含义？

even 偶数 / odd 奇数

问题 2： nth-child 中可以使用 n 吗？表示什么含义？能用其他字母吗？

nth-child 可以使用 n ，但是不能使用其他字母；直接使用 n 会选择所有孩子 n 表示从 0 开始，每次加 1，依次向后面计算，超出范围的元素会被忽略。

CSS3 新增 nth-child 选择器常用公式

问题 1： nth-child 和 nth-of-type 有什么区别？

E:nth-child(n)

会先把所有的盒子都排列序号

首先根据 :nth-child(n) 找到孩子，再去看前面的 E 是否匹配。

E:nth-of-type(n)

会把指定元素 E 的盒子排列序号

首先看 E 指定的元素，之后再去看 :nth-of-type 的第几个孩子。

问题 2： nth-child 和 nth-of-type 哪一个用的多？为什么？

nth-child

开发时，结构伪类选择器大多用于无序列表 ul 或有序列表 ol

CSS3 新增伪元素选择器使用场景和由来

问题 1：伪元素选择器的作用是什么？

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

问题 2：伪元素是真正意义的元素吗？

伪元素不是真正意义的元素，是通过 CSS 创建的。

问题 3：我们重点要学习哪两个伪元素？伪元素和伪类在语法上有什么区别？

::before 和 ::after

从语法结构上看

伪元素使用 :: 开头，关键字内容；

伪类使用 : 开头，关键字状态。

问题 4： ::before 和 ::after 属于行内元素吗？

属于

问题 1： ::before 和 ::after 会在什么位置创建元素？

::before 在父元素内容的前面插入元素； ::after 在父元素内容的后面插入元素。

问题 2： ::before 和 ::after 必须要指定什么属性？

content 属性

问题 3：伪元素选择器的权重是多少？

伪元素选择器的权重是 1

伪元素选择器使用场景 3-伪元素清除浮动本质

四种清除浮动的方式

1. 额外标签法也称为隔墙法，是 W3C 推荐的做法；

2. 父级添加 overflow 属性；

3. 父级添加 after 伪元素；

4. 父级添加双伪元素。

CSS3 盒子模型 border-box

问题 1：CSS3 中可以哪一个属性来指定盒子模型？

box-sizing

问题 2： box-sizing 属性有几个值，设置了哪一个值之后，设置 padding 、 border 不会影响盒子的大小？

content-box ：盒子大小为 width + padding + border （以前默认的）；

border-box ：盒子大小为 width ，设置 padding 、 border 不会影响盒子的大小。

CSS3 图片模糊处理

问题 1：CSS3 中给图片增加滤镜是哪一个属性？

filter 属性

问题 2：这个属性的哪一个函数可以对图片做模糊处理？语法格式是什么？

blur 函数语法： filter: blur(5px); 数值越大越模糊数值为 0 最清晰（不做模糊处理）

计算盒子宽度 calc 函数

问题 1：CSS3 可以使用哪一个函数计算盒子的宽度？应用场景是什么？

calc 函数； width: calc(100% - 80px); 可以让子盒子永远比父盒子的宽度小 80px

类似京东商城的商品列表下方的水平滚动条的宽度，可以用这种方法处理。

CSS3 新增属性过渡

问题 1：CSS3 中可以通过哪一个属性实现过渡动画效果？

transition

问题 2：过渡动画的应用场景是什么？经常和什么一起搭配使用？

是从一个状态渐渐的过渡到另外一个状态，从一个属性值，过渡到另外一个属性值；

经常和 :hover 一起搭配使用，让页面更好看，且动感十足。

问题 3：过渡动画的语法是什么？初期最应该记住哪一个？

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