html5新特性
新的标签
header 头部标签
nav 导航栏标签
section 某个区域
footer 尾部标签
aside 侧边栏
article 内容标签
以上都相对于是div标签多媒体标签
audio 音频标签
video 视频标签
muted 静音 controls 播放按钮 autoplay 自动播放 loop 循环 poster 封面
AI 代码解读
- 新的表单和表单属性
input表单:
type属性值新增选项:email,url,date,time,month.week,time,search,tel,color,number等
表单属性:
required,placeholder、autofocus、autocomplate、multiple;
CSS3新特性
- 新增选择器
属性选择器:(权重是10 和class类选择器一样)
利用属性选择器可以不用借助于类和id选择器 E[attr]
根据属性=值选择元素 E[attr=val]
选择属性值结尾、包含或开头的某些元素 E[attr$='val'] E[attr*='val'] E[attr^='val']结构伪类选择器
根据文档结构进行选择,常用于根据父级选择器选择子元素
E:first-child last-child 第一个和最后一个
nth-child(n) nth-child(2n) n可以是数字,关键字(even或odd)或公式
E:first-of-type last-of-type nth-of-type(n)
nth-clild会把所有的盒子都排列序号,所以只使用序号会不准确,而nth-of-type不会,只会把指定类型排列序号;伪元素选择器
伪元素选择器可以利用css创建标签元素,属于行内元素
伪元素选择符主要有 ::before和::after 必须包含有content属性
伪元素选择器的权重和标签一样都是1
CSS3盒子模型:
通过box-sizing指定盒模型:两个值:content-box和border-box
content-box是默认值, border-box盒子的大小为width滤镜filter,计算函数calc(),
```
img{ filter:blur(5px) } //图片模糊
div { width: calc(100% - 50px); }
4. CSS3过渡 transition
> transtion: 要过渡的属性 花费时间 运动曲线 何时开始
> 最后两个属性可以不写;
AI 代码解读
<!DOCTYPE html>