目录
1、HTML5的新特性
HTML5的新增性主要是针对于以前的不足,增加了一些新的标签
、新的表单
和新的表单属性
等。
这些新特性有兼容性问题,基本都是IE9+以上版本才支持,如果不考虑兼容性问题,可以大量使用这些新特性。
1.1、HTML5的新增的语义化标签
以前布局,基本都是div来做,但它对于搜索引擎来说,是没有语义的。
注意
:
- 这种语义化标准主要是针对搜索引擎的
- 这些新标签页面中可以使用多次
- 在IE9中,需要把这些元素转换成块级元素
- 移动端更喜欢使用这些标签
- HTML5还增加了很多其他标签
<header>: 头部标签
<nav>: 导航标签
<article>: 内容标签
<section>:定义文档某个区域
<aside>:侧边栏标签
<footer>: 尾部标签
1.2、HTML5的新增的多媒体标签
使用多媒体标签可以很方便的在页面中嵌入音频和视频,而不再使用flash和其他浏览器插件。
HTML5在不使用插件的情况下,也可以原生的支持视频格式文件的播放,当然,支持的格式有限。
音频 <audio>
视频 <video>
1、视频
当前 video 元素支持三种视频格式: 尽量使用mp4格式
浏览器 | MP4 | WebM | Ogg |
---|---|---|---|
Internet Explorer | YES | NO | NO |
Chrome | YES | YES | YES |
Firefox | YES 从Firefox 21版本开始 Linux系统从Firefox 30开始 | YES | YES |
Safari | YES | NO | NO |
Opera | YES 从Opera 25版本开始 | YES | YES |
语法
<video src="文件地址" controls="controls"></video>
常见属性
2、音频
当前 audio 元素支持三种音频格式,
浏览器 | MP3 | Wav | Ogg |
---|---|---|---|
Internet Explorer | YES | NO | NO |
Chrome | YES | YES | YES |
Firefox | YES | YES | YES |
Safari | YES | YES | NO |
Opera | YES | YES | YES |
语法
<audio src="文件地址" controls="controls"></audio>
常见属性
3、多媒体标签总结
- 音频标签和视频标签使用方式基本一致
- 浏览器支持情况不同
- 谷歌浏览器把音频和视频自动播放禁止了
- 可以给视频标签添加muted属性来静音播放视频,音频不可以(JavaScript解决)
- 视频标签是重点,经常设置自动播放,不适用controls控件,循环和设置大小属性
1.3、HTML5的新增的input类型
重点:number、 tel 、search
1.4、HTML5的新增的表单属性
属性 | 值 | 说明 |
---|---|---|
required | required | 表单拥有该属性表示其内容不能为空,必填 |
placeholder | 提示文本 | 表单的提示信息,存在默认值将不显示 |
autofocus | autofocus | 自动聚焦属性,页面加载完成自动聚焦到指定表单 |
autocomplete | off/on | 当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项; 默认已经打开on,关闭off需要放在表单内,同时加上name属性,同时提交成功 |
multiple | multiple | 可以多选文件提交 |
可以通过以下设置方式修改placeholder里面的字体颜色
input :: placeholder {
color:pink;
}
2、CSS3的新特性
- 新增的CSS3特性有兼容性问题,ie9+才支持
- 移动端支持优于PC端
- 应用相对广泛
2.1、新增选择器
1、属性选择器
可以根据元素特定属性来选择元素,不要借助类或者id选择器。
注意: 类选择器、属性选择器、伪类选择器,权重为10
例: div[class^=icon] {
color: pink;
}
选择符 | 简介 |
---|---|
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元素 |
2、结构伪类选择器
主要根据文档结构
来选择元素,常用于根据父级选择器里面的子元素。
nth-child(n) 和nth-of-type(n)区别:
- 前者对父元素里所有孩子排序选择(序号是固定的),先找到第n个孩子,然后看是否和E匹配。—>基于父元素编号。
- 后者是对父元素里面指定子元素进行排序选择,先去匹配E,然后再根据E找第n个孩子。—>基于当前元素编号。
nth-child(n) 选择某个父元素的一个或多个特定的子元素:
- n可以是数字,关键字和公式
- n如果是数字,就是选择第n个子元素,里面数字从1开始…
- n可以是关键字: even偶数, odd奇数
- n可以是公式:常见公式(如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)
公式 | 取值 |
---|---|
n | 全部 |
2n | 偶数 |
2n+1 | 奇数 |
5n | 5 10 15… |
n+5 | 从第5个开始(包含第五个)到最后 |
-n+5 | 前5个(包含第5个) |
ul li :first-child {
background-color: pink;
}
ul li :last-child {
background-color: pink;
}
ul li :nth-child(3) {
background-color: pink;
}
ul li :nth-child(even) {
background-color: pink;
}
ul li :nth-child(odd) {
background-color: pink;
}
选择符 | 简介 |
---|---|
E : first-child | 匹配父元素中的第一个子元素E |
E : last-child | 匹配父元素中的最后一个子元素E |
E : nth-child(n) | 匹配父元素中的第n个子元素E |
E : first-of-type | 指定类型E的第一个 |
E : last-of-type | 指定类型E的最后一个 |
E : nth-of-type(n) | 指定类型E的第n个 |
3、伪元素选择器
利用CSS创建新标签元素,不需要HTML标签,从而简化HTML结构。
选择符 | 简介 |
---|---|
element::before | 在元素内部的前面插入内容 |
element::after | 在元素内部的后面插入内容 |
注意:
- before和after创建一个元素,但是属于行内元素
- 新创建的这个元素在文档中是找不到的,所以称为
伪元素
语法 element ::before {}
- before和after必须有
content属性
- before在父元素内容的前面创建元素,after在父元素内容的后面插入元素
伪元素选择器
和标签选择器
一样,权重为1
伪元素选择器使用场景:
1、伪元素选择器使用场景1: 伪元素字体图标
2、伪元素选择器使用场景2: 伪土豆效果
.tudou::before {
content: '';
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background: rgba(0,0,0,0.3) url(arr.png) no-repeat center;
}
.tudou:hover::before {
display:block;
}
3、伪元素选择器使用场景3: 伪元素清除浮动
- 额外标签法(隔墙法)
- 父级添加overflow属性
- 父级添加after伪元素
- 父级添加双伪元素
2.2、盒子模型
可以通过 box-sizing
来指定盒模型,有两个值:可指定为content-box
、border-box
,这样计算盒子大小的方式就发生了改变。
如果盒子模型改成 box-sizing:border-box 那 padding和border 就不会撑大盒子了(前提是padding和border不会超过盒子宽度width)
- box-sizing:content-box 盒子大小为 width + padding +border(以前默认的);
- box-sizing:
border-box
盒子大小为width;
2.3、其他特性
1、图片模糊处理
CSS3滤镜 filter:filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
filter: 函数(); 例如:filter:blur(5px); bulr模糊处理 数值越大越模糊
2、计算盒子宽度width:clac 函数
括号里面可以使用+ - * /来进行计算
width:clac (100%-80px);
2.4、CSS过渡(重点)
在不使用 Flash动画或 javaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画:从一个状态渐渐过渡到另外一个状态。
可以让页面更好看,动感十足,虽然低版本浏览器( ie9以下版本)不支持,但是不影响页面布局。
经常和 : hover
一起搭配使用。
口诀:谁做过渡给谁加
/*如果想要写多个属性,利用逗号进行分割*/
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
1. 属性:想要变化的css属性,宽度高度、背景颜色、内外边距都可以。如果想要所有的属性都变化过渡,写一个all
就可以。
2. 花费时间:单位是 秒
(必须写单位) 比如 0.5s
3. 运动曲线:默认是ease(可以省略);
linear:匀速 | ease: 逐渐慢下来 | ease-in:加速 | ease-out:减速 | ease-in-out:先加速后减速 |
---|
4. 何时开始:单位是秒,必须写单位,可以设置延迟触发时间,默认是0秒(可以省略)
2.5、CSS 2D转换
转换 是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果。
1、移动: translate
可以改变元素在页面中的位置,类似定位
重点:
- 定义2D转换中的移动,沿着X和Y轴移动元素,X轴向右是正值,Y轴向下是正值
- 最大优点:不会影响其他元素位置
- translate中的百分比单位是相对于
自身元素
的translate:(50%,50%) - 对行内标签无效果
语法:
transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);
案例:
/* 实现盒子水平和垂直居中,常用定位搭配transform:translate(-50%,-50%); */
div {
position: relative;
width: 500px;
height: 500px;
background-color: #fff;
}
p {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
/* 盒子往左 往上走自己高度 宽度的一半 */
transform:translate(-50%,-50%);
}
2、旋转:rotate
元素在二维平面内顺时针或者逆时针旋转。
重点:
- rotate里面跟度数,单位是deg,比如 rotate(45deg)
- 角度为正:顺时针 负:逆时针
- 默认旋转中心点是元素中心点
语法:
transform: rotate(度数);
转换中心点 ransform-origin
设置元素转换中心点
transform-origin: x y;
x y空格隔开
x y 默认转换中心点是元素中心点 (50% 50%)
还可以给元素设置 像素 或者 方位名词 (top bottom left right center)
transform-origin: left bottom ;
transform-origin: 50px 100px ;
案例:
div {
width: 200px;
height: 200px;
border: 1px solid #ccc;
overflow: hidden;
}
div::before {
content: "栗子";
/* before伪元素属于行内元素 */
display: block;
width: 100%;
height: 100%;
background-color: green;
transform: rotate(180deg);
transform-origin: left bottom;
transition: all 0.4s;
}
/* 鼠标经过div 里面的before复原 */
div:hover::before {
transform: rotate(0deg);
}
3、缩放:scale
重点:
- 优势:可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子
语法:
x,y用逗号隔开
transform: scale(x, y);
transform: scale(1, 1); 宽高放大一倍,等于没有放大
transform: scale(2, 2);宽高都放大两倍
transform: scale(2); 只写一个参数,则第二个参数和第一个一样,相当于scale (2,2)
transform: scale(0.3, 0.3);缩小
案例:
图片放大
div {
overflow: hidden;
}
div img {
/* 谁做过渡给谁加 */
transition: all 0.4s;
}
div img:hover {
transform: scale(1.1); 宽高一起放大1.1倍
}
<div><a href="#"><img src="scale.jpg" alt=""></a></div>
分页按钮
li {
width: 30px;
height: 30px;
border: 1px solid pink;
text-align: center;
line-height: 30px;
list-style: none;
border-radius: 50%;
cursor: pointer;
transform: all 0.4s;
}
li:hover {
transform: scale(1.2);
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
4、 2D转换综合性写法
transform: translate() rotate() scale().... 空格隔开
顺序会影响转换效果(先旋转会改变坐标轴方向)
当同时有位移和其他属性的时候,位移要放在最前面
2.6、CSS 动画
动画(animation)
可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。
动画序列
- 0% 是动画开始,100%是动画完成,这样的规则是动画序列
- keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果
- 动画是使元素从一种样式逐渐变化为另一种样式的效果,可以改变任意多的样式任意多
次数
- 请用百分比来规定变化发生的时间,或者用关键词‘
from
’‘to
’等同于0% 100%
1、先定义动画
keyframes定义动画(类似定义选择器)
@keyframes 动画名称move {
/*动画开始*/
0% {
width: 100px;
transform: translateX(0px);
}
/*动画结束*/
100% {
width: 200px;
transform: translateX(1000px);
}
}
2、再使用(调用)动画
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;
/* 调用动画 */
animation-name:动画名称 move ;
/* 持续时间 */
animation-duration: 持续时间 5s;
}
动画常用属性
动画简写属性
2.7、CSS 3D转换
3、广义的HTML5
- 广义的HTML5 是HTML5 本身 + CSS3 +JavaScript
- 这个集合有时称为HTML5和朋友,通常缩写为HTML5
- 虽然HTML5的一些特性仍然不被某些浏览器支持,但是它是一种发展趋势。
- HTML5 MDN介绍
- https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML