HTML5+CSS3

HTML

1.HTML新增语义化标签

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

1.2HTML5 新增的多媒体标签

1.音频标签 audio

2. 视频标签 video

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

视频标签常见属性

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌需要添加muted来解决）
controls	controls	向用户显示播放插件
width	px	播放器的宽度
height	px	播放器的高度
loop	loop	播放完视频是否循环播放，循环播放
preload	auto(预先加载视屏） none（不加载视屏）	规定了是否提前加载视屏
poster	Imgurl	加载时等待的图片
muted	muted	静音播放
src	url	视频地址

音频标签常见属性

属性	值	描述
src	url	视频地址
loop	loop	播放完视频是否循环播放，循环播放
controls	controls	向用户显示播放插件
autoplay	autoplay	视频就绪自动播放（谷歌需要添加muted来解决）

1.3HTML新增的input类型

属性值	说明·
type=“email”	限制用户必须输入Email类型 邮箱
type=“url”	限制用户必须输入URL类型 网址
type=“date”	限制用户必须输入日期类型
type=“time”	限制用户必须输入时间类型
type=“month”	限制用户必须输入月类型
type=“week”	限制用户必须输入周类型
type=“number”	限制用户必须输入数字类型
type=“tel”	手机号
type=“search”	搜索框
type=“color”	生成一个颜色选择表单

1.4HTML新增的表单属性

属性	属性值	说明
required	required	表单不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示。
autocomplete	off / on	搜索记录是否打开 ，off是关闭搜索记录，默认是on有搜索记录
multiple	multiple	可以提交多个文件

CSS3

1.属性选择器

选择符	简介
input[value]	选择具有value属性的input元素
input[value=“age”]	选择具有value属性且属性值是等于age的input元素
input[value^=“age”]	选择具有value属性且属性值是开头age的input元素
input[value$=“age”]	选择具有value属性且属性值是结尾age的input元素
input[value*=“age”]	选择具有value属性且属性值是含有age的input元素

1.2结构伪类选择器

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

• n可以是关键字也可以是公式
• n如果是关键字even偶数 odd奇数
• 公式 2n偶数 2n+1奇数 n+5选中5个以后 5n选中 5，10 ，15