html5
新增的语义化标签
标签 | 名称 |
---|---|
<header> | 头部标签 |
<nav> | 导航标签 |
<article> | 内部标签 |
<section> | 定义文档某个区域 |
<aside> | 侧边栏标签 |
<footer> | 尾部标签 |
新增的多媒体标签
新增视频标签
<video src = "文件地址"></video>
常见属性:
属性 | 值 | 描述 |
---|---|---|
muted | muted | 静音播放 |
autoplay | autoplay | 自动播放(谷歌浏览器需要添加 muted ) |
controls | controls | 显示播放控件 |
loop | loop | 循环播放 |
poster | imgurl | 加载等待的画面图片 |
新增音频标签
<audio src = "文件地址"></audio>
常见属性:
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 自动播放 |
controls | controls | 显示播放控件 |
loop | loop | 循环播放 |
html5 新增 input 表单
属性值 | 说明 |
---|---|
type=“tel” | 手机号码 |
type=“search” | 搜索框 |
type=“color” | 生成一个颜色选择表单 |
type=“number” | 限制用户必须输入数字类型 |
type=“email” | 限制用户必须输入 email 类型 |
type=“url” | 限制用户必须输入 url 类型 |
type=“date” | 限制用户必须输入日期类型 |
type=“time” | 限制用户必须输入时间类型 |
type=“mouth” | 限制用户必须输入月类型 |
type=“week” | 限制用户必须输入周类型 |
新增表单属性:
属性 | 值 | 描述 |
---|---|---|
placeholder | 提示文本 | 表单的提示信息 |
required | required | 内容不能为空 |
multiple | multiple | 可以多选文件提交 |
autofocus | autofocus | 自动聚焦 |
autocomplete | off / on | 需要有 name 属性,显示提交过的值,默认打开 |
css3
ie9以上版本支持
新增属性选择器
属性选择器可以根据元素特定属性来选择元素,而不需要借助类和 id 选择器,用 [ ] 来进行属性的选择:
选择符 | 简介 |
---|---|
E[att] | 选择具有 att 属性的 E 元素 |
E[att = “val”] | 选择具有 att 属性且属性值等于 val 的 E 元素 |
E[att ^= “val”] | 选择具有 att 属性且值以 val 开头的 E 元素 |
E[att $= “val”] | 选择具有 att 属性且值以 val 结尾的 E 元素 |
E[att *= “val”] | 选择具有 att 属性且值含有 val 的 E 元素 |
新增结构伪类选择器
常用于根据父级选择器 来选择里面的子元素:
选择符 | 简介 |
---|---|
E : first-child | 匹配父元素 E 中的第一个子元素 |
E: first-child | 匹配父元素中的第一个子元素 E |
E: last-child | 匹配父元素中的最后一个子元素 E |
E: nth-child(n) | 匹配父元素中的第 n 个子元素 E |
E: first-of-type | 指定类型 E 的第一个 |
E: last-of-type | 指定类型 E 的最后一个 |
E: nth-of-type(n) | 指定类型 E 的第 n 个 |
nth-child(n) 和 nth-of-type(n) 的区别:
- nth-child(n) 会把所有的盒子都排列序号,执行的时候首先看 nth-child(n),再看看选中的 nth-child(n) 是否符合前面的类型,若不符合,则不执行;
- nth-of-type(n) 会把指定元素的盒子排列序号,也就是 nth-of-type(n) 先看是否符合类型,再进行排序。
- 当 子元素类型复杂时,推荐使用 nth-of-type(n);
- 当 子元素类型单一时,例如表单元素 li,推荐使用 nth-child(n);
新增伪元素选择器
伪元素选择器可以利用 css 创建新元素标签,而不需要 html 标签,从而简化 html 结构:(可以清除浮动)
选择符 | 简介 |
---|---|
::before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
注意:
- 也可以用 单冒号,浏览器会自动识别成 双冒号;
- before 和 after 创建的元素属于行内元素;
- 语法格式:
elememt::before{}
; - before 和 after 必须有 content 属性;
- 伪元素选择器,权重为 1;
盒子模型 border-box
box-sizing: border-box;
:当设置 width 范围内的 padding 和 border 值时,将不会再撑大盒子了。
推荐使用在 css 文件刚开始的 * 定义中来定义全局。