HTML5 新特性

• 新的标签
• 新的表单
• 新的表单属性

新的标签

针对搜索引擎的，可以多次使用，移动端更常见

• 语义化标签
  • header(头部标签)
  • nav(导航标签)
  • article(内容标签)
  • section(区域标签)
  • aside(侧边栏标签)
  • footer(尾部标签)
• 视频标签：<video></video>
  • 视频格式
    • mp4(所有浏览器都支持，尽量使用该格式)
    • WebM
    • Ogg
  • 属性
    • src(文件地址)
    • autoplay(自动播放：autoplay，谷歌浏览器需要添加muted属性解决自动播放)
    • controls(显示播放控件：controls)
    • loop(循环播放)
    • preload(预先加载：auto/none)
    • width(宽度)
    • height(高度)
    • poster(加载等待的图片)
    • muted(静音播放：muted)
• 音频标签：<audio></audio>
  • 音频格式
    • mp3(所有浏览器都支持，尽量使用该格式)
    • Wav
    • Ogg
  • 属性
    • src(文件地址)
    • autoplay(自动播放：autoplay)
    • controls(播放控件：controls)
    • loop(循环播放：loop)
    • muted(静音：muted)

新的表单

HTML5 中input表单新增了很多种类型：

• number(数字)
• email(邮箱)
• tel(电话)
• search(搜索框)
• color(颜色)
• date(日期)
• time(时间)
• month(月)
• week(周)

新的表单属性

• required(必填)
• placeholder(提示文本)
• autocomplete(自动补全之前搜索记录)
• autofocus(自动聚焦：百度首页)
• multiple(可以提交多个文件)

CSS3 新特性

CSS3 新增特性：

• 新的选择器
• 新的盒子模型
• 图片模糊处理
• 属性过度

属性选择器

属性选择器通过元素具有的属性来选择元素

语法：input[属性]

结构伪类选择器

结构伪类选择器通过文档的结构来选择元素，常用于选择父级里的子元素

nth结构伪类选择器中的n既可以是数字也可以是公式/关键字

• 数字
• even(偶数)、odd(奇数)
• 包含n的公式：n 从零开始计算，超过的不计算

nth-child(n)与 nth-of-type(n)的区别：

• nth-child(n)会把所有子元素进行排序，再看前面选择的类型，如果匹配不上，则选不上
• nth-of-type(n)只会把指定类型的元素进行排序，再选择第 n 个

伪元素选择器

伪元素选择器的由来：伪元素选择器可以利用CSS创建新标签，简化HTML代码

注意事项：

• before 和 after 创建一个元素，但是属于行内元素
• 新创建的元素在文档树中不存在，所以叫做伪元素
• before 和 after 伪元素选择器必须包含content属性
• 伪元素选择器和标签选择器一样权重是1

使用场景：

• 字体图标
• 遮罩层
• 清除浮动

CSS3 盒子模型

CSS2 的盒子模型，边框、内边距都会撑开盒子

CSS3 可以通过box-sizing无需考虑

可选择的值：

• content-box(和 CSS2 盒子模型一样)
• border-box(新的盒子模型)

CSS3 其他特性

图片变模糊

img {filter: blur(n px);}

n 越大，图片越模糊。当 n=0 时，没有模糊效果

盒子宽度计算函数 calc()

width: calc(100% - 30px)

CSS3 属性过渡

是一种简单的动画效果

语法：transtion: 要过渡的属性 花费时间 运动曲线 何时开始;，在原选择器上写(谁做过渡给谁加)。

• 属性：宽度/高度/背景颜色/内外边距/all，如果想要写多个属性，应该使用逗号分隔
• 花费时间：单位是秒
• 运动曲线：默认是 ease(可以省略)
  • linear(匀速)
  • ease(逐渐慢下来)
  • ease-in(加速)
  • ease-out(减速)
  • ease-in-out(先加速后减速)
• 何时开始：单位是秒，用于设置延迟触发时间