HTML5的新特性
新增的语义化标签
注意:
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>新增语义化标签</title>
<style type="text/css">
header,nav {
height: 120px;
background-color: pink;
border-radius: 15px;
width: 800px;
margin: 15px auto;
}
</style>
</head>
<body>
<header>头部标签</header>
<nav>导航栏标签</nav>
<section>某个区域</section>
</body>
</html>
新增的多媒体标签
视频video
<video src="文件地址" controls="controls"></video>
常见属性
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题) |
controls | controls | 向用户显示播放控件 |
width | pixels(像素) | 设置播放宽度 |
height | pixels(像素) | 设置播放高度 |
loop | loop | 播放完是否继续播放该视频,循环播放 |
preload | auto(预先加载视频),none(不应加载视频) | 规定是否加载视频(如果有了autoplay就忽略该属性) |
src | url | 视频URL地址 |
poster | imgurl | 加载等待的画面图片 |
muted | muted | 静音播放 |
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>h5新增视频标签</title>
<style type="text/css">
video {
margin: 200px 500px;
width: 800px;
}
</style>
</head>
<body>
<video src="../vide/redmiG.mp4" autoplay="autoplay" muted="muted" | loop="loop"></video>
</body>
</html>
音频audio
<audio src="文件地址" controls="controls"></audio>
<audio controls="controls">
<source src="happy.mp3" type="audio/mpeg">
<source src="happy.ogg" type="audio/ogg">
您的浏览器暂不支持<audio>标签。
</audio>
常见属性
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放 |
src | url | 要播放的音频的URL |
多媒体标签总结
- 音频标签和视频标签使用方式基本一致
- 浏览器支持情况不同
- 谷歌浏览器把音频和视频自动播放禁止了
- 我们可以给视频标签添加muted属性来静音播放视频,音频不可以(可以通过JavaScript解决)
- 视频标签是重点,我们经常设置自动播放,不使用controls控件,循环和设置大小属性
新增input类型
属性值 | 说明 |
---|---|
type=“email” | 限制用户输入必须为Email类型 |
type=“url” | 限制用户输入必须为URL类型 |
type=“date” | 限制用户输入必须为日期类型 |
type=“time” | 限制用户输入必须为时间类型 |
type=“month” | 限制用户输入必须为月类型 |
type=“week” | 限制用户输入必须为周类型 |
type=“number” | 限制用户输入必须为数字类型 |
type=“tel” | 手机号码 |
type=“search” | 搜索框 |
type=“color” | 生成一个颜色选择表单 |
重点记住:number 、tel、search这三个
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>新增input表单</title>
<style type="text/css">
</style>
</head>
<body>
<!-- 我验证的时候必须添加form表单域 -->
<form action="">
<ul>
<li>邮箱:<input type="email" /></li>
<li>网址:<input type="url" /></li>
<li>日期:<input type="date" /></li>
<li>时间:<input type="time" /></li>
<li>数量:<input type="number" /></li>
<li>手机号码:<input type="tel" /></li>
<li>搜索:<input type="search" /></li>
<li>颜色:<input type="color" /></li>
<!-- 当我们点击提交按钮就可以验证表单了 -->
<li><input type="submit" value="提交"></li>
</ul>
</form>
</body>
</html>
新增的表单属性
属性 | 值 | 说明 |
---|---|---|
required | required | 表单拥有该属性表示其内容不能为空,必填 |
placeholder | 提示文本 | 表单的提示信息,存在默认值将不显示 |
autofocus | autofocus | 自动聚焦属性,页面加载完成自动聚焦到指定的表单 |
autocomplete | off / on | 当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项,默认已经打开,如autocomplete=“on”,关闭autocomplete="off"需要放在表单内,同时加上name属性,同时成功提交 |
multiple | multiple | 可以多选文件提交 |
可以通过以下设置方式修改placeholder里面的字体颜色:
input::placehokder {
color:pink;
}
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>新增表单属性</title>
<style type="text/css">
input::placeholder {
color: pink;
}
</style>
</head>
<body>
<form action="">
<input type="search" name="sear" id="" required="required" placeholder="阿波"
autofocus="autofocus" autocomplete="off">
<input type="submit" value="提交">
</form>
</body>
</html>
CSS3的新特性
CSS3新增选择器
- 属性选择器
- 结构伪类选择器
- 伪元素选择器
属性选择器
选择符 | 简介 |
---|---|
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元素 |
注意:类选择器、属性选择器、伪类选择器,权重为10
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
/* 必须是input 但是同时具有value这个属性 选择这个元素 */
input[value] {
color: pink;
}
/* 只选择type=text 文本框的input */
input[type=text] {
color: red;
}
/* 选择首先是div 然后具有class属性 并且属性值必须是icon开头的这些元素 */
div[class^=icon] {
color: orange;
}
section[class$=data] {
color: blue;
</style>
</head>
<body>
<!-- 1.利用属性选择器就可以不用借助于类或者id选择器 -->
<!-- <input type="text" value="请输入用户名"> -->
<!-- <input type="text"> -->
<br>
<!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握 -->
<input type="text" name="" id="">
<input type="password" name="" id=""><br>
<!-- 3.属性选择器可以选择属性值开头的某些因素 -->
<br>
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div><br>
<!-- 4.属性选择器可以选择属性值结尾的某些因素 -->
<section class="icon1-data">我是拉克丝</section>
<section class="icon2-data">我是金克丝</section>
<section class="icon3-ico">那我是谁</section>
</body>
</html>
结构伪类选择器
选择符 | 简介 |
---|---|
E:first-child | 匹配父元素中第一个子元素E |
E:last-child | 匹配父元素中最后一个子元素E |
E:nth-child | 匹配父元素中的第n个子元素E |
E:first-of-type | 指定类型E的第一个 |
E:last-of-type | 指定类型E的最后一个 |
E:nth-of-type(n) | 指定类型E的第n个 |
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title></title>
<style type="text/css">
/* 1.选择ul里面的第一个孩子 小li */
ul li:first-child {
background-color: pink;
}
/* 2.选择ul里面的最后一个孩子 小li */
ul li:last-child {
background-color: pink;
}
/* 3.选择ul里面的第4个孩子 小li */
ul li:nth-child(4) {
background-color: deepskyblue;
}
</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>
</ul>
</body>
</html>
nth-child选择器
- n可以是数字,关键字和公式
- n如果是数字,就是选择第n个子元素,里面数字从1开始
- n可以是关键字:even偶数,odd奇数
- n可以是公式:常见的公式如下(如果是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)
公式 | 取值 |
---|---|
2n | 偶数,相当于even |
2n+1 | 奇数,相当于odd |
5n | 5 10 15… |
n+5 | 从第5个开始(包含第五个)到最后 |
-n+5 | 前5个(包含第五个) |
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>nth-child选择器</title>
<style type="text/css">
/* 1.把所有的偶数even的孩子选出来 */
ul li:nth-child(even) {
background-color: skyblue;
}
/* 2.把所有的奇数odd的孩子选出来 */
ul li:nth-child(odd) {
background-color: pink;
}
</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>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title></title>
<style type="text/css">
/* nth-child(n) 从0开始 每次加1 往后面计算 这里面必须是n 不能是其他字母 选择了所有的孩子 */
ol li:nth-child(n) {
background-color: pink;
}
</style>
</head>
<body>
<ol>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ol>
</body>
</html>
区别
- nth-child对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和E匹配
- nth-of-type对父元素里面指定子元素进行排序选择。先匹配E,然后再根据E找第n个孩子
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>nth-type-of选择器</title>
<style type="text/css">
ul li:first-of-type {
background-color: pink;
}
ul li:last-of-type {
background-color: pink;
}
/* nth-child 会把所有的盒子都排列序列号 */
/* 执行的时候首先看:nth-child(1) 之后回去看 前面的div */
section div:nth-child(1) {
background-color: red;
}
/* nth-of-type 会把指定元素的盒子排列序号 */
/* 执行的时候首先看 div指定的元素 之后回去看:nth-of-type(1) 第几个孩子 */
section div:nth-of-type(1){
background-color: blue;
}
</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>
</ul>
<!-- 区别 -->
<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
</section>
</body>
</html>
小结
- 结构伪类选择器一般用于选择父级元素里面的第几个孩子
- nth-child对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和E匹配
- nth-of-type对父元素里面指定子元素进行排序选择,先去匹配E,然后再根据E找第n个孩子
- 关于nth-child(n)我们要知道n是从0开始计算的,要记住常用的公式
- 如果是无序列表,我们肯定用nth-child更多
- 类选择器、属性选择器、伪类选择器,权重为10
伪元素选择器(重点)
选择符 | 简介 |
---|---|
::before | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
注意:
- before和after创建一个元素,但是不属于行内元素
- 新创建的这个元素在文档树种是找不到的,我们称之为伪元素
- 语法:element::before{}
- before和after必须有content属性
- before在父元素内容的前面创建元素,after在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样,权重为1
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>伪元素选择器</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: pink;
}
div::before {
/* 这个content是必须要写的 */
content: '我';
}
div::after {
content: '阿波';
}
</style>
</head>
<body>
<div>
是
</div>
</body>
</html>
配合字体图标使用
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title></title>
<style type="text/css">
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?zc2vt0');
src: url('fonts/icomoon.eot?zc2vt0#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?zc2vt0') format('truetype'),
url('fonts/icomoon.woff?zc2vt0') format('woff'),
url('fonts/icomoon.svg?zc2vt0#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
div {
position: relative;
width: 200px;
height: 35px;
border: 1px solid red;
}
div::after {
position: absolute;
top: 10px;
right: 10px;
font-family: 'icomoon';
/* content: ''; */
content: '\e900';
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
遮罩案例修改
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>遮罩案例修改</title>
<style type="text/css">
.tudou {
position: relative;
width: 260px;
height: 200px;
background-color: pink;
margin: 30px auto;
}
.tudou img {
width: 100%;
height: 100%;
}
.tudou::before {
content: '';
/* 隐藏遮罩层 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.4) url(../img/娑娜小图标.png) no-repeat center;
}
/* 当我们鼠标经过了这个盒子,就让遮罩层显示出来 */
.tudou:hover::before {
/* 显示元素 */
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<img src="../img/娑娜.jpg" >
</div>
</body>
</html>
盒子模型
CSS3中可以通过Box-sizing来指定盒模型,有2个值:即可定为content-Box、border-Box,这样我们计算盒子大小的方式就发生了改变
可以分成两种情况:
如果盒子模型我们改为了Box-sizing:border-Box,那padding和border就不会撑大盒子了(前提是padding和border不会超过width宽度)
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
Box-sizing: content-Box;
}
p {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
/* CSS3 盒子模型 盒子最终的大小就是width 200 的大小 */
Box-sizing: border-Box;
}
</style>
</head>
<body>
<div>小猪乔治</div><br>
<p>小猪佩奇</p>
</body>
</html>
其他新特性(了解)
图片变模糊
CSS3滤镜filter:
filter CSS属性将模糊或颜色偏移等图形效果应用于元素
filter: 函数(); 例如:filter:blur(5px); blur模糊处理 数值越大越模糊
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>图片模糊</title>
<style type="text/css">
img {
/* blur是一个函数 小括号里面数值越大,图片越模糊 注意数值要加px单位 */
filter: blur(5px);
}
img:hover {
filter: blur(0);
}
</style>
</head>
<body>
<img src="../img/娑娜.jpg" >
</body>
</html>
鼠标移出变模糊
calc函数
width:calc(100% - 80px);
括号里面可以使用+、-、*、/来进行计算
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>calc函数</title>
<style type="text/css">
.father {
width: 300px;
height: 200px;
background-color: pink;
}
.son {
/* width:150px */
/* width:calc(150px + 30px); */
width: calc(100% - 30px);
height: 30px;
background-color: skyblue;
}
</style>
</head>
<body>
<!-- 需求我们的盒子宽度永远比父盒子小30px -->
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
过渡(重点)
transition:要过渡的属性 花费时间 运动曲线 何时开始;
- 属性:想要变化的css属性,宽度高度、背景颜色、内外边距都可以,如果想要所有的属性都变化过渡,写一个all就可以了
- 花费时间:单位时秒(必须写单位)比如0.5s
- 运动曲线:默认是ease(可以省略)
- 何时开始:单位是秒,可以设置延迟触发时间 默认是0s
记住过渡的使用口诀:谁做过渡给谁加
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>过渡效果</title>
<style type="text/css">
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition:变化的属性 花费时间 运动曲线 何时开始; */
/* transition: width .5s ease 0s; */
/* 如果想要写多个属性,利用逗号进行分割,若想要多个属性都变化,属性写all就可以了 */
/* transition: width .5s,height .5s; */
transition: all 0.5s;
}
div:hover {
width: 400px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
鼠标经过效果
练习
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>进度条</title>
<style type="text/css">
.bar {
width: 150px;
height: 15px;
border-radius: 15px;
padding: 1px;
}
.bar_in {
width: 50%;
height: 100%;
background-color:red;
transition: all .7s;
}
.bar:hover .bar_in {
width: 100%;
}
</style>
</head>
<body>
<div class="bar">
<div class="bar_in"></div>
</div>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。