**
HTML5 新增标签
**
- 什么是语义化
- 新增了那些语义化标签
header --- 头部标签
nav --- 导航标签
article --- 内容标签
section --- 块级标签
aside --- 侧边栏标签
footer --- 尾部标
- 使用语义化标签的注意
- 语义化标签主要针对搜索引擎
- - 新标签可以使用一次或者多次
- - 在 `IE9` 浏览器中,需要把语义化标签都转换为块级元素
- - 语义化标签,在移动端支持比较友好,
二、多媒体音频标签
4. 多媒体标签有两个,分别是
音频 – audio
视频 – video 2. audio 标签说明
可以在不使用标签的情况下,也能够原生的支持音频格式文件的播放,
但是:播放格式是有限的
5. audio 支持的音频格式
audio 目前支持三种格式
6. audio 的参数
7.adiuo 和 video 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
video{
width:200px;
height:200px;
}
</style>
</head>
<body>
<audio controls="controls" autoplay="autoplay" loop="loop">
<source src="source/01.mp3">
<source src="source/01.wav">
<source src="source/01.ogg">
您的浏览器版本不支持
</audio>
<video controls="controls" muted="muted" poster="images/2.jpg" autoplay="autoplay" loop="loop">
<source src="source/02.mp4">
<source src="source/02.ogg">
您的浏览器不支持此种格式
</video>
</body>
</html>
四、多媒体视频标签
video 视频标签
1.目前支持三种格式
7. 语法格式
<video src="./media/video.mp4" controls="controls"></video>
- video 参数
- video 代码演示
<body>
<!-- <video src="./media/video.mp4" controls="controls"></video> --> <!-- 谷歌浏览器禁用了自动播放功能,如果想自动播放,需要添加 muted 属性 --> <video controls="controls" autoplay muted loop poster="./media/pig.jpg"> <source src="./media/video.mp4" type="video/mp4">
<source src="./media/video.ogg" type="video/ogg">
</video>
</body>
- 多媒体标签总结
音频标签与视频标签使用基本一致
多媒体标签在不同浏览器下情况不同,存在兼容性问题
谷歌浏览器把音频和视频标签的自动播放都禁止了
谷歌浏览器中视频添加 muted 标签可以自己播放
注意:重点记住使用方法以及自动播放即可,其他属性可以在使用时查找对应的手册
五、新增 input 标签
<form action="">
<input type="email" required placeholder="提示文字内容" autofocus>
<input type="text" autocomplete="on">
<input type="email">
<input type="url">
<input type="date">
<input type="time">
<input type="week">
<input type="month">
<input type="search">
<input type="number">
<input type="tel">
<input type="submit">
</form>
属性选择器列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 属性选择器 */
/* input[disabled]{
width:200px;
}
input[type="email"]{
width: 50px;
} */
input[type^="t"]{
width:50px;
}
input[type$="t"]{
width:50px;
}
input[type*="t"]{
width:50px;
}
</style>
</head>
<body>
<input type="text" disabled>
<input type="email">
<input type="number">
</body>
</html>
六、结构伪类选择器
- 属性列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 第一个子元素 */
ul li:first-child{
background-color:green
}
/* 最后一个子元素 */
ul li:last-child {
background-color: lightcoral;
}
/* 指定第几个元素 */
ul li:nth-child(3) {
background-color: blue }
/* 指定最后一个元素*/
ul li:last-of-type {
background-color: red}
/* 指定类型第几个 */
ul li:nth-of-type(2) {
background-color: black}
</style>
<body>
<ul>
<li>1111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
</body>
</html>
七. nth-child 参数详解
1.注意:本质上就是选中第几个子元素
n 可以是数字、关键字、公式
n 如果是数字,就是选中第几个
常见的关键字有 even 偶数、 odd 奇数
常见的公式如下(如果 n 是公式,则从 0 开始计算)
但是第 0 个元素或者超出了元素的个数会被忽略
2. 区别
nth-child 选择父元素里面的第几个子元素,不管是第几个类型
nt-of-type 选择指定类型的元素
八、伪元素选择器
1 伪类选择器
2. 伪类选择器注意事项
before 和 after 必须有 content 属性
before 在内容前面,after 在内容后面
before 和 after 创建的是一个元素,但是属于行内元素
创建出来的元素在 Dom 中查找不到,所以称为伪元素
伪元素和标签选择器一样,权重为 1