【前端学习日志】HTML5和CCS3的提高

一、HTML5的新特性

HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等

1. HTML5新增的语义化标签

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

2. 新增的多媒体标签

• audio 音频
• video 视频

2.1 视频常见属性

属性	描述
autoplay	视频就绪自动播放
controls	向用户显示播放控件
width	设置播放器宽度
height	设置播放器高度
loop	播放完是否继续播放该视频，循环
preload	规定是否预加载视频
src	视频Url地址
poster	加载等待的画面图片
muted	静音播放

2.21 音频常见属性

属性	描述
autoplay	音频就绪自动播放
controls	向用户显示播放控件
loop	播放完是否继续播放该音频，循环
src	音频Url地址

3. 新增的input标签

4. 新增的表单属性

二、CSS3的新特性

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

1.新增属性选择器

2.新增结构伪类选择器

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

• n可以是数字，关键字和公式
• n如果是数字，就是选择第n个子元素，里面数字从1开始
• n可是是关键字：even偶数，odd奇数

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

区别：

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

3.新增伪元素选择器

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

注意：

• before和after创建一个元素，但是属于行内元素
• 新创建的这个元素在文档树中是找不到的、，所以我们称为伪元素
• 语法：element::before{}
• before和after必须有content属性
• before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
• 伪元素选择器和标签选择器一样，权重为1