HTML5+CSS3 提高
1·HTML5新增语义化标签
序号 | 标签 | 描述 |
---|---|---|
1 | header | 头部标签,通常包含一组介绍性的或是辅助导航的实用元素 |
2 | nav | 导航标签,在当前文档或其他文档中提供导航链接 |
3 | article | 内容标签,表示文档、页面、应用或网站中的独立结构 |
4 | section | 定义文档的某个区域,没有更具体的语义 |
5 | aside | 侧边栏标签,表示一个和其余页面内容几乎无关的部分 |
6 | footer 尾部标签,表示页脚 |
2·多媒体标签
视频标签 <video src="地址"> </video>
width 宽
height 高
autoplay = "autoplay" 自动播放
controls = "controls" 显示播放控件
loop = "loop" 循环播放
preload = "auto" or "none" 是否预先加载,有autoplay就忽略
poster = "地址" 加载等待图片
muted = "muted" 静音播放
音频标签 <audio src="地址"> </audio>
autoplay = "autoplay" 自动播放
controls = "controls" 显示播放控件
loop = "loop" 循环播放
3·HTML5 新增的表单属性
<form action="">
<ul>
<li>数量: <input type="number" /></li>
<li>手机号码: <input type="tel" /></li>
<li>搜索: <input type="search" /></li>
<li>邮箱: <input type="email" /></li>
<li>网址: <input type="url" /></li>
<li>日期: <input type="date" /></li>
<li>时间: <input type="time" /></li>
<li>月份: <input type="month" /></li>
<li>星期: <input type="week" /></li>
<li>颜色: <input type="color" /></li>
</ul>
<div class="div">
<input type="submit" value="提交" />
</div>
</form>
属性 | 值 | 描述 |
---|---|---|
required | required | 表单拥有该属性表示内容不能为空,必填 |
placeholder | 提示文本 | 表单的提示信息,存在内容将不显示 |
autofocus | autofocus | 自动聚焦属性 |
autocomplete | on / off | 是否应该启用自动完成功能。默认已经打开,需要放在表单内,同时加上 name 属性,同时成功提交过 |
multiple | multiple | 可以多选文件提交 |
修改 palceholder 的样式
input::placeholder {
color: pink;
}
4·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 元素 |
^
以 xxx 开头$
以 xxx 结束*
包含
注意:类选择器、属性选择器、伪类选择器,权重为 10
5·结构伪类选择器
E:first-child
匹配父元素中的第一个子元素 E
E:last-child
匹配父元素中的最后一个子元素 E
E:nth-child(n)
匹配父元素中的一个或特定多个子元素 E
E:nth-last-child(n)
倒数,从最后一个开始
(n) | 第几个 |
---|---|
(n) | 从n开始到最后一个 |
(2n) | 偶数 |
(2n+1) | 奇数 |
(5n) | 5 , 10 , 15 |
(n+5) | 从第5个开始到最后一个 |
(-n+5) | 从第5个开始到最前面一个 |
E:first-of-type
匹配类型 E 的第一个
E:last-of-type
匹配类型 E 的最后一个
E:nth-of-type(n)
匹配类型 E 的第 n 个
E:nth-child(n)
先把所有盒子排序,先看(n),再看E
E:nth-of-type(n)
会把指定元素盒子排序,先看E,再看(n)
6·CSS3 新增伪元素选择器基本使用
div::before
在元素内部的前面插入内容
div::after
在元素内部的后面插入内容
注意:
- 伪元素和标签选择器的权重为1.
- before和after创建一个元素,属于行内元素
- 必须写
content: ' ';
属性 - 伪元素在文档树中找不到
两种伪元素清除浮动的原理
- 单伪元素
.clearfix::after {
content: ' '; 伪元素必写属性
display: block; 插入元素必须是块级
height: 0; 不要看见这个元素
clear: both; 核心代码
visibility: hidden; 不要看见这个元素
}
- 双伪元素
.clearfix::before,
.clearfix::after {
content: ' ';
display: table;
}
.clearfix::after {
clear: both;
}
7·CSS3 盒子模型
box-sizing
box-sizing: content-box;
盒子大小为 width + padding + border (默认)box-sizing: border-box;
盒子大小为 width
如果盒子模型我们改为了box-sizing: border-box;
那padding和border就不会撑大盒子了(前提padding 和border不会超过width宽度)
8·CSS3滤镜filter
可以对图片做模糊处理
filter: blur(5px);
- 数值越大越模糊;
- 数值为
0
最清晰(不做模糊处理)
CSS3 图片 filter 属性扩展
filter: grayscale(100%)
可以让整个网站灰度显示,清明节常用,一般给body加或者给html加
9·CSS3 calc 函数
width: calc(100% - 80px);
可以让子盒子永远比父盒子的宽度小 80px
运算符之间要有空格
10·CSS3 新增属性过渡
transition: 属性 花费时间 (运动曲线 何时开始)可以不写;
all 1s ease 0s
width
height
/* 谁做过渡,给谁加 */
/*我们现在经常和 :hover 一起搭配使用*/
- 要过渡的属性:想要变化的 css 属性,可以是:宽度、高度、背景颜色、内外边距等,all 可以让所有能动画的属性一起过渡变化
- 动画时间:单位是秒(必须写
单位
),例如:0.5s - 运动曲线:默认是 ease(可以省略)
- 何时开始:单位是秒(必须写
单位
),动画延迟触发时间,默认是 0s(可以省略)
曲线
- linear: 匀速
- ease: 以低速开始,然后加快,在结束前变慢
- ease-in: 以低速开始
- ease-out: 以低速结束
- ease-in-out: 以低速开始和结束
- steps(): 时间函数中的间隔数量(步长)