HTML5 的新特性

HTML5 新增的语义化标签

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

注意:

  • 这种语义化标签主要是针对搜索引擎的(对盲人也有用)
  • 这些新标签页面中可以使用多次
  • 在 IE9 中,需要把这些元素转换为块级元素
  • 其实,我们移动端更喜欢使用这些标签
  • 除此之外还有很多其他标签,但均有兼容性问题

HTML5 新增的多媒体标签

新增的多媒体标签主要包含两个:

  1. 音频:<audio>
  2. 视频:<video>

使用它们可以很方便的在页面中嵌入音频和视频而不再去使用 flash 和其他浏览器插件

视频 <video>

当前 <video> 元素支持三种视频格式:MP4、WebM、Ogg,尽量使用 MP4 格式

语法:

1
2
3
4
5
6
7
<video src="文件地址" controls="controls"></video>

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
您的浏览器不支持 video 标签。
</video>
属性描述
autoplayautoplay如果出现该属性,则视频在就绪后马上播放。(谷歌浏览器需要添加 muted 来解决自动播放问题)
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性,则当媒介文件完成播放后再次开始播放。
mutedmuted如果出现该属性,视频的音频输出为静音。
posterURL规定视频正在下载时显示的图像,直到用户点击播放按钮。
preloadauto、none、metadata如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
srcURL要播放的视频的 URL。
widthpixels设置视频播放器的宽度。

音频 <audio>

当前 <audio> 元素支持三种音频格式:MP3、Wav、Ogg

语法:

1
2
3
4
5
6
7
<audio src="文件地址" controls="controls"></audio>

<audio controls>
<source src="horse.ogg" type="audio/ogg" />
<source src="horse.mp3" type="audio/mpeg" />
您的浏览器不支持 audio 元素。
</audio>
属性描述
autoplayautoplay如果出现该属性,则音频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。
looploop如果出现该属性,则每当音频结束时重新开始播放。
mutedmuted如果出现该属性,则音频输出为静音。
preloadauto、none、metadata规定当网页加载时,音频是否默认被加载以及如何被加载。
srcURL规定音频文件的 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 新增的表单属性

属性说明
requiredrequired表单拥有该属性表示其内容不能为空,必填
placeholder提示文本表单的提示信息,存在默认值将不显示
autofocusautofocus自动聚焦属性,页面加载完成自动聚焦到指定表单
autocompleteaff/on当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写过的选项,默认打开,需放在表单内,同时加上 name 属性,同时成功提交
multiplemultiple可以多选文件提交
1
2
3
4
/* 可以通过以下方式修改placeholder里面的字体颜色 */
input::placeholder {
color: pink;
}

CSS3 的新特性

CSS3 给我们新增了选择器,可以更加自由、便捷的选择目标元素

注意选择器的权重问题

  1. 属性选择器
  2. 结构伪类选择器
  3. 伪元素选择器

属性选择器

属性选择器可以根据元素的特定属性来选择元素,这样就可以不用借助于类或者 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奇数
5n5、10、15
n+5从第五个开始(包含第五个)到最后
-n+5,前 5 个(包含第五个)

区别:

  1. nth-child 对父元素里面所有孩子排序选择(序号是固定的),先找到第 n 个孩子,然后看看是否和 E 匹配
  2. 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
2
3
4
5
6
7
p::before {
position: absolute;
right: 20px;
top: 10px;
content: "\e91e";
font-size: 20px;
}

显示隐藏遮罩:

1
2
3
4
/* 当我们鼠标经过土豆这个盒子,就让里面before遮罩层显示出来 */
.tudou:hover::before {
display: block;
}

清除浮动:

1.父级添加 after 伪元素法

1
2
3
4
5
6
7
8
9
10
.clearfix:after {
content: ""; /* 伪元素必须写的属性 */
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /* IE6、7专有*/
}

2.父级添加双伪元素法

1
2
3
4
5
6
7
8
9
10
11
.clearfix:before,
.clearfix:after {
content: "";
display: table; /* 转换为块级元素并且一行显示 */
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}

CSS3 盒子模型

CSS3 中可以通过box-sizing来指定盒模型,可以分成两种情况:

  1. box-sizing: content-box; 盒子大小为 width + padding + border(默认)
  2. box-sizing: border-box; 盒子大小为 width

即如果盒子模型我们改为了box-sizing: border-box;,那 padding 和 border 就不会撑大盒子了,前提是 padding 和 border 不会超过 width 的宽度

CSS3 其他特性

滤镜 filter:

1
2
fliter: 函数();
例如:filter: blur(5px); /* blur模糊处理,数值越大越模糊 */

CSS3 calc 函数:

calc()此 CSS 函数让你在声明 CSS 属性值时执行一些计算

1
width: calc(100% - 30px);

括号里面可以使用 + - * / 来进行计算

CSS3 过渡

经常搭配 :hover 一起使用

1
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
  1. 属性:想要变换的 CSS 属性,宽度高度、背景颜色、内外边距都可以。如果想要所有的属性都变化过渡,写 all 即可
  2. 花费时间:单位是秒(必须写单位)
  3. 运动曲线:默认是 ease(可以省略)
  4. 何时开始:单位是秒(必须写单位),可以设置延迟触发时间,默认是 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 之间的数值。