HTML5 的新特性
HTML5 新增的语义化标签

- <header>:头部标签
- <nav>:导航标签
- <article>:内容标签
- <section>:定义文档某个区域
- <aside>:侧边栏标签
- <footer>:尾部标签
注意:
- 这种语义化标签主要是针对搜索引擎的(对盲人也有用)
- 这些新标签页面中可以使用多次
- 在 IE9 中,需要把这些元素转换为块级元素
- 其实,我们移动端更喜欢使用这些标签
- 除此之外还有很多其他标签,但均有兼容性问题
HTML5 新增的多媒体标签
新增的多媒体标签主要包含两个:
- 音频:<audio>
- 视频:<video>
使用它们可以很方便的在页面中嵌入音频和视频而不再去使用 flash 和其他浏览器插件
视频 <video>
当前 <video> 元素支持三种视频格式:MP4、WebM、Ogg,尽量使用 MP4 格式

语法:
1 | <video src="文件地址" controls="controls"></video> |
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。(谷歌浏览器需要添加 muted 来解决自动播放问题) |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
muted | muted | 如果出现该属性,视频的音频输出为静音。 |
poster | URL | 规定视频正在下载时显示的图像,直到用户点击播放按钮。 |
preload | auto、none、metadata | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。 |
src | URL | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
音频 <audio>
当前 <audio> 元素支持三种音频格式:MP3、Wav、Ogg

语法:
1 | <audio src="文件地址" controls="controls"></audio> |
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放。 |
muted | muted | 如果出现该属性,则音频输出为静音。 |
preload | auto、none、metadata | 规定当网页加载时,音频是否默认被加载以及如何被加载。 |
src | URL | 规定音频文件的 URL。 |
小结
- 音频标签和视频标签使用方式基本一致
- 浏览器支持情况不同
- 谷歌浏览器把视频自动播放禁止了
- 我们可以给视频标签添加 muted 属性来静音播放视频,音频不可以(可以通过 JavaScript 解决)
HTML5 新增的 input 类型
属性值 | 说明 |
---|---|
type="email" | 限制用户输入必须为 Email 类型 |
type="url" | 限制用户输入必须为 URL 类型 |
type="date" | 限制用户输入必须为日期类型 |
type="time" | 限制用户输入必须为时间类型 |
type="month" | 限制用户输入必须为月 L 类型 |
type="week" | 限制用户输入必须为周类型 |
type="number" | 限制用户输入必须为数字类型 |
type="tel" | 手机号码 |
type="search" | 搜索框 |
type="color" | 生成一个颜色选择表单 |
重点记住:number、tel、search
HTML5 新增的表单属性
属性 | 值 | 说明 |
---|---|---|
required | required | 表单拥有该属性表示其内容不能为空,必填 |
placeholder | 提示文本 | 表单的提示信息,存在默认值将不显示 |
autofocus | autofocus | 自动聚焦属性,页面加载完成自动聚焦到指定表单 |
autocomplete | aff/on | 当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写过的选项,默认打开,需放在表单内,同时加上 name 属性,同时成功提交 |
multiple | multiple | 可以多选文件提交 |
1 | /* 可以通过以下方式修改placeholder里面的字体颜色 */ |
CSS3 的新特性
CSS3 给我们新增了选择器,可以更加自由、便捷的选择目标元素
注意选择器的权重问题
- 属性选择器
- 结构伪类选择器
- 伪元素选择器
属性选择器
属性选择器可以根据元素的特定属性来选择元素,这样就可以不用借助于类或者 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: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)
选择某个父元素的一个或多个特定的子元素
- n 可以是数字,关键字和公式
- n 如果是数字,就是选择第 n 个子元素,里面数字从 1 开始
- n 可以是关键字:
even
偶数,odd
奇数 - n 可以是公式:常见的公式如下(如果 n 是公式,则从 0 开始计算,但是第 0 个元素或者超出了元素的个数会被忽略)
公式 | 取值 |
---|---|
2n | 偶数 |
2n+1 | 奇数 |
5n | 5、10、15 |
n+5 | 从第五个开始(包含第五个)到最后 |
-n+5 | 前 5 个(包含第五个) |
区别:
nth-child
对父元素里面所有孩子排序选择(序号是固定的),先找到第 n 个孩子,然后看看是否和 E 匹配nth-of-type
对父元素里面指定子元素进行排序,先匹配 E,然后再根据 E 找第 n 个孩子
小结
- 结构伪类选择器一般用于父级里面的第几个孩子
nth-child
对父元素里面所有孩子排序选择(序号是固定的),先找到第 n 个孩子,然后看看是否和 E 匹配nth-of-type
对父元素里面指定子元素进行排序选择,先去匹配 E,然后再根据 E 找第 n 个孩子- 关于
nth-child(n)
,我们要知道 n 是从 0 开始计算的,要记住常用的公式 - 如果是无序列表,我们肯定用
nth-child
更多 - 类选择器,属性选择器,伪类选择器权重为 10
伪元素选择器
伪元素选择器可以帮助我们利用 CSS 创建新标签元素,而不需要 HTML 标签,从而简化 HTML 结构
选择符 | 简介 |
---|---|
::before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
注意:
- before 和 after 创建一个元素,但是属于行内元素
- 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
- 语法:element::before {}
- before 和 after 必须有 content 属性
- before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样,权重为 1
伪元素字体图标:

1 | p::before { |
显示隐藏遮罩:
1 | /* 当我们鼠标经过土豆这个盒子,就让里面before遮罩层显示出来 */ |
清除浮动:
1.父级添加 after 伪元素法
1 | .clearfix:after { |
2.父级添加双伪元素法
1 | .clearfix:before, |
CSS3 盒子模型
CSS3 中可以通过box-sizing
来指定盒模型,可以分成两种情况:
box-sizing: content-box;
盒子大小为 width + padding + border(默认)box-sizing: border-box;
盒子大小为 width
即如果盒子模型我们改为了box-sizing: border-box;
,那 padding 和 border 就不会撑大盒子了,前提是 padding 和 border 不会超过 width 的宽度
CSS3 其他特性
滤镜 filter:
1 | fliter: 函数(); |

CSS3 calc 函数:
calc()
此 CSS 函数让你在声明 CSS 属性值时执行一些计算
1 | width: calc(100% - 30px); |
括号里面可以使用+ - * /
来进行计算
CSS3 过渡
经常搭配 :hover 一起使用
1 | transition: 要过渡的属性 花费时间 运动曲线 何时开始; |
- 属性:想要变换的 CSS 属性,宽度高度、背景颜色、内外边距都可以。如果想要所有的属性都变化过渡,写 all 即可
- 花费时间:单位是秒(必须写单位)
- 运动曲线:默认是 ease(可以省略)
- 何时开始:单位是秒(必须写单位),可以设置延迟触发时间,默认是 0s(可以省略)
值 | 描述 |
---|---|
linear | 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。 |
ease | 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。 |
ease-in | 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。 |
ease-out | 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。 |
ease-in-out | 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Gahotx's blog!
评论