HTML5和CSS3提高

HTML5

语义化标签

• <header>：头部标签
• <nav>：导航标签
• <article>：内容标签
• <section>：定义文档内的某个区域
• <aside>：侧边栏标签
• <footer>：尾部标签

多媒体标签

视频 <video>

<video src = "文件地址" controls = "controls" ></video>

音频 <audio>

<audio src = "文件地址" controls = "controls"></audio>

input 类型

表单属性

CSS3

选择器

属性选择器

结构伪类选择器

nth-child(n)： 选择父元素的一个或多个特定的子元素

• n可以是数字，选择第n个子元素
• n可以是关键字，even偶数，odd奇数
• n可以是公式，n从0开始计算，第0个元素或者超出元素的个数会被忽略

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

• nth-child: 会把所有的子元素都排列序号，执行时先找第n个子元素，然后再看是否和E匹配
• nth-of-type: 会把指定的子元素给排列顺序，执行时先去匹配E，然后再根据去找第n个子元素

伪元素选择器

伪元素字体图标：
伪元素清除浮动：

盒子模型 border-box

css3中可以通过 border-sizing 来设置盒子模型，2个值：content-box（默认） 和 border-box 。

滤镜filter

 filter: 函数();

calc 函数

width: calc(100% - 80px);    //括号内进行 +、-、*、/ 运算

过渡