1. 什么是 HTML5
什么是HTML5 : 参考网址
定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML 。
1.1 两个概念：
是一个新版本的 HTML 语言，定义了新的标签、特性和属性。
拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5。
1.2 HTML5 拓展了哪些内容
语义化标签；
本地存储；
兼容特性；
2D、3D ；
动画、过渡；
CSS3 特性；
性能与集成；
1.3 HTML5 的现状
绝对多数新的属性，都已经被浏览器所支持，最新版本的浏览器已经开始陆续支持最新的特性；
总的来说：HTML5 已经是大势所趋。
2. HTML5 新增标签
什么是语义化；
新增了那些语义化标签：
-
header--- 头部标签 -
nav--- 导航标签 -
article--- 内容标签 -
section--- 块级标签 -
aside--- 侧边栏标签 -
footer--- 尾部标签
语义化标签
- 使用语义化标签的注意：
语义化标签主要针对搜索引擎；
新标签可以使用一次或者多次；
在 IE9 浏览器中，需要把语义化标签都转换为块级元素；
语义化标签，在移动端支持比较友好；
另外，HTML5 新增的了很多的语义化标签，随着课程深入，还会学习到其他的。
3. 多媒体音频标签
- 多媒体标签有两个，分别是：
音频 -- audio
视频 -- video
- audio 标签说明
可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放；
但是：播放格式是有限的；
- audio 支持的音频格式
-
audio 目前支持三种格式
audio 目前支持三种格式
- audio 的参数
audio 的参数
- audio 代码演示
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5新增多媒体标签</title>
</head>
<body>
<!-- 谷歌浏览器将 autoplay 属性禁用了 -->
<audio src="../media/陆虎-雪落下的声音.mp3" controls autoplay ></audio>
<!-- 因为不同浏览器支持不同格式，我们采取的方案是我们为这个音频准备多个格式 -->
<audio controls>
<source src="../media/陆虎-雪落下的声音.mp3" type="audio/mpeg">
<source src="../media/陆虎-雪落下的声音.ogg" type="audio/ogg">
</audio>
</body>
</html>
4. 多媒体视频标签
- video 视频标签：目前支持三种格式
video视频标签目前支持的三种格式
2.语法格式
<video src="./media/video.mp4" controls="controls"></video>
- video 参数
video参数
- 代码演示:
<head>
<meta charset="UTF-8">
<title>HTML5新增视频标签</title>
<style>
video {
width: 200px;
}
</style>
</head>
<body>
<div>
<!-- poster 设置未播放时显示的图片 -->
<video src="../media/mi.mp4" controls muted loop poster="../media/logo.png"></video>
<!-- 谷歌浏览器将自动播放功能关闭了 有解决方案 给视频加上静音属性就可以实现自动播放 -->
<video src="../media/mi.mp4" autoplay muted></video>
<video autoplay muted loop>
<source src="../media/mi.mp4" type="video/mp4">
<source src="../media/mi.ogg" type="video/ogg">
</video>
</div>
</body>
5.多媒体标签总结
- 音频标签与视频标签使用基本一致
- 多媒体标签在不同浏览器下情况不同，存在兼容性问题
- 谷歌浏览器把音频和视频标签的自动播放都禁止了
- 谷歌浏览器中视频添加 muted 标签可以自己播放
- 注意：重点记住使用方法以及自动播放即可，其他属性可以在使用时查找对应的手册
5. 新增 input 标签
新增的input标签类型
- 演示代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增表单类型</title>
<style>
.form {
width: 600px;
height: 600px;
margin: 100px auto;
border: 1px solid #ccc;
}
li {
line-height: 50px;
}
</style>
</head>
<body>
<div class="form">
<ul>
<li><label for="email"> 邮箱 <input type="email" id="email"></label></li>
<li><label for="url">网址 <input type="url" id="url"></label></li>
<li><label for="date">日期<input type="date" id="date"></label></li>
<li><label for="time">时间<input type="time" id="time"></label></li>
<li><label for="month">月份<input type="month" id="month"></label></li>
<li><label for="week">星期<input type="week" id="week"></label></li>
<li><label for="number">数字<input type="number" id="number"></label></li>
<li><label for="tel">电话<input type="tel" id="tel"></label></li>
<li><label for="search">搜索<input type="search" id="search"></label></li>
<li><label for="color">颜色<input type="color" id="color"></label></li>
</ul>
</div>
</body>
</html>
6. 新增表单属性
新增表单属性
- 代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增表单属性</title>
<style>
.form {
width: 600px;
height: 600px;
margin: 100px auto;
border: 1px solid #ccc;
}
li {
line-height: 50px;
}
</style>
</head>
<body>
<div class="form">
<form action="#">
<ul>
<li><label for="username">用户名<input type="text" name="username" id="username" required></label></li>
<li><label for="tip">提示文本属性<input type="text" name="tip" id="tip" placeholder="请输入用户名"></label></li>
<li><label for="autofocus">自动获取焦点<input type="text" name="autofocus" id="autofocus" autofocus></label></li>
<li><label for="autocomplete">填写提示<input type="text" name="autocomplete" id="autocomplete"
autocomplete="off"></label></li>
<li><label for="upload">上传多个文件<input type="file" name="upload" id="upload" multiple="multiple"></label></li>
<li><label><input type="submit" value="提交"></label></li>
</ul>
</form>
</div>
</body>
</html>
7. CSS3 属性选择器
7.1 什么是 CSS3
- 在 CSS2 的基础上拓展、新增的样式
7.2 CSS3 发展现状
移动端支持优于 PC ;
CSS3 目前还草案，在不断改进中;
CSS3 相对 H5，应用非常广泛。
7.3 属性选择器列表
属性选择器列表
- 代码演示 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3属性选择器</title>
<style>
button {
cursor: pointer;
}
/* 属性选择器使用方法 */
/* 选择的是 ： 即是button 又有disabled 这个属性的元素 */
/* 属性选择器的权重是 10 */
/* 1. 直接写属性 */
button[disabled] {
cursor: default;
}
/* 属性选择器 、 类选择器、伪类选择器权重为10 */
/* 2. 属性值等于 */
input[type='search'] {
color: #f00;
}
/* 3.属性值以什么开头 */
div[class^='icon'] {
color: skyblue;
}
/* 4. 属性值以什么结尾 */
div[class$='icon'] {
color: #0f0;
}
/* 5. 属性值中包含即可 */
div[class*='icon'] {
color: pink;
}
</style>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button disabled="disabled">按钮</button>
<button disabled="disabled">按钮</button>
<input type="text" name="" id="one" value="文本框">
<input type="text" name="two" id="two" value="文本框">
<input type="text" name="three" id="three" value="文本框">
<input type="search" name="four" id="four" value="搜索框">
<input type="search" name="five" id="five" value="搜索框">
<input type="search" name="six" id="six" value="搜索框">
<div class="icon1">图标1</div>
<div class="icon2">图标2</div>
<div class="icon3">图标3</div>
<div class="i1icon">图标4</div>
<div class="i2icon">图标5</div>
<div class="i3icon">图标6</div>
<div class="i1icon1">图标1</div>
<div class="i2icon2">图标2</div>
<div class="i3icon3">图标3</div>
<div class="i4icon4">图标4</div>
<div class="i5icon5">图标5</div>
<div class="i6icon6">图标6</div>
</body>
</html>
- 效果:
效果
8. 结构伪类选择器
- 属性列表 ：
属性列表
- 代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3中的结构伪类选择器</title>
<style>
/* 1. 选择第一个元素 */
li:first-child {
background-color: pink;
}
/* 2. 选择最后一个元素 */
li:last-child {
background-color: #f00;
}
/* 3. nth-child(n)需要第几个就写第几个 */
li:nth-child(3) {
background-color: #f0f;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
- 显示效果:
显示效果
9. nth-child(n) 参数详解
- nth-child(n) 详解
- 注意：本质上就是选中第几个子元素
- n 可以是数字、关键字、公式
- n 如果是数字，就是选中第几个
- 常见的关键字有 even 偶数、odd 奇数
- 常见的公式如下(如果 n 是公式，则从 0 开始计算)
- 但是第 0 个元素或者超出了元素的个数会被忽略
nth-child参数
- 代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3中的结构伪类选择器nth-child(n)</title>
<style>
/* nth-child(n) odd 是基数 even 是偶数 */
/*.nth li:nth-child(even) {
background-color: pink;
}
.nth li:nth-child(odd) {
background-color: chocolate;
}*/
/* 第 n 个孩子 */
.nth li:nth-child(2n) {
background-color: skyblue;
}
/* 选择奇数项 */
.nth li:nth-child(2n + 1) {
background-color: hotpink;
}
/* 选择5的倍数 */
.nth li:nth-child(5n) {
background-color: darkorchid;
}
/* 选择前5个 */
.pre5 li:nth-child(-n + 5) {
background-color: deeppink;
}
/* 选择 第10个 之后 */
.next10 li:nth-child(n + 10) {
background-color: lightgreen;
}
</style>
</head>
<body>
<ul class="nth">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<h3> 选择前 5 个 </h3>
<ul class="pre5">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<h3>选择第10个之后</h3>
<ul class="next10">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>
</body>
</html>
10. nth-child 和 nt-of-type 的区别
- 代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3结构伪类选择器</title>
<style>
div :first-child {
background-color: deeppink;
}
div span:first-of-type {
background-color: lightgreen;
}
div p:first-of-type {
background-color: lightblue;
}
div span:last-of-type {
background-color: lightcoral;
}
div span:nth-of-type(2) {
background-color: #f00;
}
</style>
</head>
<body>
<div>
<p>我是一个屁</p>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
</div>
</body>
</html>
- 区别
-
nth-child选择父元素里面的第几个子元素，不管是第几个类型; -
nt-of-type选择指定类型的元素
11. 伪元素选择器
- 伪类选择器
伪类选择器
- 伪类选择器注意事项
- before 和 after 必须有 content 属性
- before 在内容前面，after 在内容后面
- before 和 after 创建的是一个元素，但是属于行内元素
- 创建出来的元素在 Dom 中查找不到，所以称为伪元素
- 伪元素和标签选择器一样，权重为 1
- 代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style>
div {
width: 400px;
height: 400px;
border: 1px solid #ccc;
}
div::before {
content: '我';
display: inline-block;
width: 50px;
height: 50px;
background-color: pink;
}
div:after {
content: '小猪佩奇';
display: inline-block;
width: 100px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div>是</div>
</body>
</html>
12. 伪元素的案例
- 添加字体图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例-伪元素选择器制作图标</title>
<style>
/* 使用字体需要引入 */
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?7kkyc2');
src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('../fonts/icomoon.woff?7kkyc2') format('woff'),
url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
div,
p {
position: relative;
width: 249px;
height: 40px;
border: 1px solid #ccc;
}
span {
position: absolute;
top: 10px;
right: 10px;
font-family: 'icomoon';
}
/* 使用第二种方式伪元素选择器的方式 */
p::before {
position: absolute;
content: '\ea52';
top: 10px;
right: 10px;
font-family: 'icomoon';
}
</style>
</head>
<body>
<h3>第一种方式</h3>
<div>
<span></span>
</div>
<h3>第二种方式</h3>
<p></p>
</body>
</html>
