目录
HTML5的新特性
1. HTML5 的新特性
1.1 HTML5 新增的语义化标签
1.2 HTML5 新增的多媒体标签
1. 视频
2. 音频
3. 多媒体标签总结
1.3 HTML5 新增的 input 类型
1.4 HTML5 新增的表单属性
required 必须输入信息,不能为空;
重点:placeholder 提示文本
autofocus:每次刷新都会自动获得光标
multiple 可以选择多文件提交
2. CSS3 的新特性
2.1 CSS3 的现状
2.2 属性选择器
2.3 结构伪类选择器
nth-child(n) 选择某个父元素的一个或多个特定的子元素(重点)
关于nth-of-type(n):
区别:
小结
2.4 伪元素选择器(重点)
伪元素选择器使用场景1:伪元素字体图标
伪元素选择器使用场景2:仿土豆效果
伪元素选择器使用场景3:伪元素清除浮动
1. 额外标签法也称为隔墙法,是 W3C 推荐的做法(不提倡)
升级:
优化:两堵墙:
2.5 CSS3 盒子模型
2.6 CSS3 其他特性(了解)
CSS3滤镜filter:
CSS3 calc 函数:
2.7 CSS3 过渡transition(重点)
我们现在经常和 :hover 一起 搭配使用
进度条案例
3.狭义的HTML5 CSS3
3.1广义的HTML5
总结不易~本节对我的收获和帮助巨大,希望对你也是~!!!
HTML5的新特性
1. HTML5 的新特性
1.1 HTML5 新增的语义化标签
<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>
1.2 HTML5 新增的多媒体标签
1. 视频<video>
<video src=" 文件地址 " controls="controls"></video>
属性 | 值 | 描述 |
autoplay | autoplay | 视频就绪自动播放(谷歌浏览器需要加muted来解决自动播放问题) |
controls | controls | 向用户显示播放控件 |
width | pixels(像素) | 设置播放器宽度 |
height | px(像素) | 设置播放器高度 |
loop | loop | 播放完是否继续播放该视频,循环播放 |
preload | auto(预先加载视频) none(不应加载视频) | 规定是否预先加载视频(如果有了autoplay 可以忽略这个属性) |
src | url | 视频url地址 |
poster | lmgurl | 加载等待的画面图片 |
muted | muted | 静音播放 |
2. 音频<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 | src | 要播放音频的URL |
3. 多媒体标签总结
1. 音频标签和视频标签使用方式基本一致2. 浏览器支持情况不同3. 谷歌浏览器把音频和视频自动播放禁止了4. 我们可以给视频标签添加 muted 属性来静音播放视频,音频不可以(可以通过JavaScript解决)5. 视频标签是重点,我们经常设置自动播放,不使用 controls 控件,循环和设置大小属性
1.3 HTML5 新增的 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这三个
1.4 HTML5 新增的表单属性
required 必须输入信息,不能为空;
重点:placeholder 提示文本
autofocus:每次刷新都会自动获得光标
multiple 可以选择多文件提交
属性 | 值 | 说明 |
required | required | 表单拥有该属性表示其内容不能为空,必填 |
placeholder | 提示文本 | 表单的提示信息,存在默认值将不提示 |
autofocus | autofocus | 自动聚焦属性,页面加载完成自动聚焦到指定表单 |
autocomplete | off / on | 默认时on 会留下历史的搜索记录;如果手动为off就会关闭掉 |
multiple | multiple | 可以多选文件提交 |
input::placeholder {color: pink;}
2. CSS3 的新特性
2.1 CSS3 的现状
1. 新增的CSS3特性有兼容性问题,ie9+才支持2. 移动端支持优于 PC 端3. 不断改进中4. 应用相对广泛5. 现阶段主要学习: 新增选择器 和 盒子模型 以及 其他特性
2.2 属性选择器
选择符 | 简介 |
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;
2.3 结构伪类选择器
这样,对于取名字就会方便很多,只用知道:
ul li:nth-child(n)
就可以随时对ul里面的哪一个小li进行选
选择符 | 简介 |
E:first-child | 匹配父元素中的第一个子元素E |
E:last-child | 匹配父元素中最后一个E元素 |
E:nth-child(n) | 匹配父元素中的第n个子元素E |
nth-child(n) 选择某个父元素的一个或多个特定的子元素(重点)
1. n 可以是数字,关键字和公式2. n 如果是数字,就是选择第 n 个子元素, 里面数字从1开始…3. n 可以是关键字:even 偶数,odd 奇数4. n 可以是公式:常见的公式如下 ( 如果n是公式,则从0开始计算,但是第 0 个元素或者超出了元素的个数会被忽略 )
公式 | 取值 |
2n | 偶数 |
2n+1 | 奇数 |
5n | 5 10 15... |
n + 5 | 从第5个开始(包含第5个)到最后 |
- n + 5 | 前五个(包含第5个)... |
关于nth-of-type(n):
选择符 | 简介 |
E:first-of-type | 指定类型E的第一个 |
E:last-of-type | 指定类型E的最后一个 |
E:nth-of-type(n) | 指定类型E的第n个 |
区别:
小结
1. 结构伪类选择器一般用于选择父级里面的第几个孩子2. nth-child 对父元素里面所有孩子排序选择(序号是固定的) 先找到第n个孩子,然后看看是否和E匹配3. nth-of-type 对父元素里面指定子元素进行排序选择。 先去匹配E ,然后再根据E 找第n个孩子4. 关于 nth-child(n) 我们要知道 n 是从 0 开始计算的,要记住常用的公式5. 如果是无序列表,我们肯定用 nth-child 更多6. 类选择器、属性选择器、伪类选择器,权重为 10。
2.4 伪元素选择器(重点)
选择符 | 简介 |
::befor | 在元素内部的前面插入内容 |
::after | 在元素内部的后面插入内容 |
1. before 和 after 创建一个元素,但是属于行内元素2. 新创建的这个元素在文档树中是找不到的,所以我们称为 伪元素3. 语法: element::before {}4. before 和 after 必须有 content 属性5. before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素6. 伪元素选择器和标签选择器一样,权重为 1(div+::befor 权重=1 + 1 =2)
伪元素选择器使用场景1:伪元素字体图标
1.就是设置div盒子大小2.利用div::after伪元素选择器来制作这个箭头3.在after内添加字符图标等,就当作一个盒子来对待4.利用浮动,子绝父相来进行定位箭头的位置
<!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>@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?1lv3na');src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?1lv3na') format('truetype'),url('fonts/icomoon.woff?1lv3na') format('woff'),url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}div {position: relative; width: 300px;height: 35px;border: 1px solid red;}div::after {position: absolute;font-family: 'icomoon';content: '\e91e';right: 10px;top: 10px;color: red;font-size: 18px;}</style>
</head><body><div></div>
</body></html>
伪元素选择器使用场景2:仿土豆效果
<!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>.tudou {position: relative;width: 444px;height: 320px;background-color: pink;margin: 30px auto;}.tudou img {width: 100%;height: 100%;}.tudou::before {content: ' ';/* display: none;可以隐藏元素还不占空间 */display: none;/* 加了绝对定位,属于行内元素,可以直接指定宽度和高度 */position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .3) url(images/arr.png) no-repeat center;}/* 当我们鼠标经过tudou的盒子就显示出遮罩层 */.tudou:hover::before {display: block;}</style>
</head><body><div class="tudou"><img src="images/tudou.jpg" alt=""></div>
</body></html>
伪元素选择器使用场景3:伪元素清除浮动
1. 额外标签法 也称为隔墙法,是 W3C 推荐的做法。2. 父级添加 overflow 属性3. 父级添加after伪元素4. 父级添加双伪元素
1. 额外标签法也称为隔墙法,是 W3C 推荐的做法(不提倡)
升级:
.clearfix::after { content: ""; display: block; height: 0; clear: both; visibility: hidden;
}
优化:两堵墙:
2.5 CSS3 盒子模型
1. box-sizing: content-box 盒子大小为 width + padding + border (以前默认的)2. box-sizing: border-box 盒子大小为 width
2.6 CSS3 其他特性(了解)
1. 图片变模糊2. 计算盒子宽度 width: calc 函数
CSS3滤镜filter:
filter: 函数 (); 例如: filter: blur(5px); blur 模糊处理 数值越大越模糊
CSS3 calc 函数:
width: calc(100% - 80px);
2.7 CSS3 过渡transition(重点)
我们现在经常和 :hover 一起 搭配使用
transition: 要过渡的属性 花费时间 运动曲线 何时开始 ;
进度条案例
<!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>.bar {width: 150px;height: 15px;border: 1px solid red;border-radius: 7px;}.bar_in {width: 50%;height: 100%;background-color: red;border-radius: 7px;transition: width 1s;}.bar:hover .bar_in {width: 100%;}</style>
</head><body><div class="bar"><div class="bar_in"></div></div>
</body></html>