前端学习自用笔记（二）

1 HTML5的新特性

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

1.1 HTML5新增的语义化标签

<header>：头部标签，<nav>：导航标签，<article>：内容标签，<section>：定义文档某个区域，<aside>：侧边栏标签，<footer>：尾部标签。
在IE9需要把这些元素转换为块级元素使用。
移动端使用很多。

1.2 HTML5新增的多媒体标签

<audio>音频

音频尽量使用MP3格式。
谷歌浏览器禁用自动播放。

<video>视频

视频尽量使用MP4格式。
谷歌浏览器禁用自动播放，需要添加muted属性来解决该问题。

1.3 HTML新增的input类型

例：type=“email”，限制用户输入必须为Email类型。

1.4 HTML新增的表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填。
palceholder	提示文本	表单的提示信息，存在默认值将不显示。
autofocus	autofocus	自动聚焦属性，页面加载完成都自动聚焦到指定表单。
autocomplete	off/on	当用户在字段开始键入时，浏览器基于之前键入过的值，显示在字段中填写的选项。默认打开（on），为了隐私安全最好关闭（off）。需要放在表单内，同时加上name属性，且成功提交过。
multiple	multiple	可以多选文件提交

2 CSS3的新特性

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

2.1 CSS3新增选择器

属性选择器

根据元素特定属性来选择元素。
类选择器，伪类选择器，属性选择器权重都是0,0,1,0。

选择符	简介
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元素

结构伪类选择器

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

选择符	简介
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中的最后一个子元素E
E:nth-child(n)	匹配父元素中的第n个子元素且该元素类型为E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

n可以是数字（选择则第n个子元素），关键字（奇数odd，偶数even）和公式，常见公式如下：

公式	取值
n	所有
2n	偶数
2n+1	奇数
5n	5 10 15 …
n+5	从第5个开始到最后
-n+5	前5个（包含第5个）

伪元素选择器

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

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

before和after必须有content属性。
伪元素选择器和标签选择器权重都是0,0,0,1。

2.2 CSS3盒子模型

CSS3可以通过box-sizing来指定盒模型，有2个值：即可指定为content-box、border-box。
box-sizing: content-box（默认），盒子大小为 width + padding + border。
box-sizing: border-box，盒子大小为 width。

2.3 CSS3其他特性

CSS3 滤镜filter

filter属性将模糊或颜色偏移等图形效果应用于元素。
filter: 函数(); 例如：filter: blur(5px); blur模糊处理，数值越大越模糊。

CSS3 calc函数

calc()函数让你在声明CSS属性值时执行一些计算。
width: calc(100%-80px);括号里面可以用 + - * / 来计算。

2.4 CSS3 过渡

过渡（transition）：从一个状态渐渐过渡到另一个状态，经常和 :hover 一起搭配使用。

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

属性：想要变化的css属性。如果所有属性都要变化过渡，则写all。
花费时间：单位是 秒（必须写单位）。
运动曲线：默认是 ease（逐渐减速）（可以省略）。
何时开始：单位是 秒（必须写单位），可以设置延迟触发时间，默认是 0s（可以省略）。
如果想要多个属性，可以使用逗号分割。