HTML5&CSS3特性总结

HTML5的新特性

HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题（例如：移动端），便可以大量使用这些新特性。

语义化标签

以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的。

：头部标签
：导航标签
：内容标签
：定义文档的某个区域
：侧边栏标签
：尾部标签

注意：

这种语义化标准主要是针对搜索引擎的
这些新标签页面中可以使用多次
在 IE9 中，需要把这些元素转换为块级元素
其实，我们移动端更喜欢使用这些标签
HTML5 还增加了很多其他标签，我们后面再慢慢学




    
    
    
    HTML5新增语义化标签
    


头部标签
导航栏标签
某个区域

多媒体标签

新增的多媒体标签主要包含两个：

音频：
视频：

使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用 flash 和其他浏览器插件。

视频

HTML5 在不使用插件的情况下，也可以原生的支持视频格式文件的播放。当然，支持的格式是有限的。

当前元素支持三种视频格式：尽量使用 mp4 格式。

HTML

语法：

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	如果出现该属性，视频的音频输出为静音。
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	URL	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

音频

HTML5 在不使用插件的情况下，也可以原生的支持音频格式文件的播放。当然，支持的格式是有限的。

当前元素支持三种音频格式：尽量使用 mp3 格式。

浏览器	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

语法：

属性：

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	如果出现该属性，则音频输出为静音。
preload	auto metadata none	规定当网页加载时，音频是否默认被加载以及如何被加载。
src	URL	规定音频文件的 URL。

多媒体标签总结

浏览器支持情况不同
谷歌浏览器把音频和视频自动播放禁止了
我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过 JavaScript 解决）
视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性

input类型





    
    
    
    Document





    
        邮箱: 
        网址: 
        日期: 
        时间: 
        数量: 
        手机号码: 
        搜索: 
        颜色:

input表单属性

修改placeholder字体颜色

input::placeholder {
    color: hotpink;
}




    
    
    
    HTML5新增表单属性

CSS3新特性

新增的 CSS3 特性有兼容性问题，IE9+ 才支持，移动端支持优于 PC 端。

新增选择器

属性选择器

属性选择器可以根据元素特定属性来选择元素。这样就可以不用借助于类或者 id 选择器。

选择符	简介
`E[att]`	选择具有 att 属性的 E 元素
`E[att="val"]`	选择具有 att 属性且属性值等于 val 的 E 元素
`E[att^="val"]`	匹配具有 att 属性且值以 val 开头的 E 元素
`E[arr$="val"]`	匹配具有 att 属性且值以 val 结尾的 E 元素
`E[att*="val"]`	匹配具有 att 属性且值中含有 val 的 E 元素

注意：类选择器、属性选择器、伪类选择器，权重都是10。




    
    
    
    CSS3新增属性选择器
    









小图标1
小图标2
小图标3
小图标4
我是打酱油的

我是安其拉
我是哥斯拉
哪我是谁

结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级来选择其子元素。

n 可以是数字，关键字和公式
n 如果是数字，就是选择第 n 个子元素，里面数字从 1 开始……
n 可以是关键字：even 偶数，odd 奇数
n 可以是公式：常见的公式如下（如果 n 是公式，则从 n = 0 开始计算，但是第 0 个元素和超出了元素的个数会被忽略）

公式	取值
`2n`	偶数（2、4、6、……）
`2n+1`	奇数（1、3、5、……）
`5n`	5 10 15...
`n+5`	从第 5 个开始（包含第 5 个）到最后
`-n+5`	前 5 个（包含第 5 个）

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级来选择其子元素。

选择器	简介
`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 个

nth-child(n) 选择某个父元素的一个或多个特定的子元素（重点）。

n 可以是数字，关键字和公式
n 如果是数字，就是选择第 n 个子元素，里面数字从 1 开始……
n 可以是关键字：even 偶数，odd 奇数
n 可以是公式：常见的公式如下（如果 n 是公式，则从 n = 0 开始计算，但是第 0 个元素和超出了元素的个数会被忽略）

公式	取值
`2n`	偶数（2、4、6、……）
`2n+1`	奇数（1、3、5、……）
`5n`	5 10 15...
`n+5`	从第 5 个开始（包含第 5 个）到最后
`-n+5`	前 5 个（包含第 5 个）

区别：

nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第 n 个孩子，然后看看是否和 E 匹配
nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配 E，然后再根据 E 找第 n 个孩子

小结：

结构伪类选择器一般用于选择父级里面的第几个孩子
nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第 n 个孩子，然后看看是否和 E 匹配
nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配 E，然后再根据 E 找第 n 个孩子
若父元素内都是同一种标签（如：列表），优先用 nth-child，否则就只能使用 nth-of-type
类选择器、属性选择器、伪类选择器，权重为 10




    
    
    
    CSS3新增结构伪类选择器
    



    我是第1个孩子
    我是第2个孩子
    我是第3个孩子
    我是第4个孩子
    我是第5个孩子
    我是第6个孩子
    我是第7个孩子
    我是第8个孩子

伪元素选择器

伪元素选择器可以帮助我们利用 CSS 创建新标签元素，而不需要 HTML 标签，从而简化 HTML 结构。

选择器	简介
`::before`	在元素内容的前面插入内容
`::after`	在元素内容的后面插入内容

注意：

before 和 after 创建一个元素，属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
语法：element::before{}
before 和 after 必须有 content 属性
before 在父元素内容的前面创建元素，after 在父元素内容的后面创建元素
伪元素选择器和标签选择器一样，权重为 1

（1）伪元素选择器使用场景1：伪元素字体图标

p::before {
    position: absolute;
    right: 20px;
    top: 10px;
    content: '\e91e';
    font-size: 20px;
}





    
    
    
    伪元素选择器使用场景-字体图标

（2）伪元素选择器使用场景2：仿土豆效果

/* 当我们鼠标经过了 土豆这个盒子，就让里面 before 遮罩层显示出来 */
.tudou:hover::before {
    /* 而是显示元素 */
    display: block;
}

（3）伪元素选择器使用场景3：伪元素清除浮动

额外标签法也称为隔墙法，是 W3C 推荐的做法
父级添加 overflow 属性
父级添加 after 伪元素
父级添加双伪元素

额外标签法也称为隔墙法，是 W3C 推荐的做法。

注意：要求这个新的空标签必须是块级元素。

后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化。

.clearfix:after {
    content: "";            /* 伪元素必须写的属性 */
    display: block;            /* 插入的元素必须是块级 */
    height: 0;                /* 不要看见这个元素 */
    clear: both;            /* 核心代码清除浮动 */
    visibility: hidden;        /* 不要看见这个元素 */
}

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;            /* 转换为块级元素并且一行显示 */
}

.clearfix:after {
    clear: both;
}

盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型，有 2 个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）
box-sizing: border-box 盒子大小为 width

如果盒子模型我们改为了 box-sizing: border-box，那 padding 和 border 就不会撑大盒子了（前提 padding 和 border 不会超过 width 宽度）




    
    
    
    CSS3盒子模型
    



    小猪乔治


    小猪佩奇

过渡

过渡（transition）是 CSS3 中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画：是从一个状态渐渐的过渡到另外一个状态。

可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（IE9 以下版本）但是不会影响页面布局。

我们现在经常和 :hover 一起搭配使用。

语法：

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

属性：想要变化的 css 属性，宽度高度、背景颜色、内外边距都可以。如果想要所有的属性都变化过渡，写一个 all 就可以
花费时间：单位是秒（必须写单位）比如 0.5s
运动曲线：默认是 ease（可以省略）
何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是 0s（可以省略）

记住过渡的使用口诀：谁做过渡给谁加！




    
    
    
    CSS3过渡效果

其他特性

图片变模糊




    
    
    
    图片模糊处理filter

计算盒子宽度 width:calc 函数




    
    
    
    CSS3属性calc函数

CSS3提高

2D转换

转换（transform）是 CSS3 中具有颠覆性的特征之一。可以实现元素的位移、旋转、缩放等效果。

转换（transform）你可以简单理解为变形。

移动：translate
旋转：rotate
缩放：scale

二维坐标系

2D 转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系。

移动 translate

语法：

transform: translate(x, y); 
/* 或者分开写 */
transform: translateX(n);
transform: translateY(n);

重点：

定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素
translate 最大的优点：不会影响到任何其他元素的位置（优于定位的地方）
translate 中的百分比单位是相对于自身元素的 translate: (50%, 50%);
对行内元素没有效果





    
    
    
    2D转换之移动translate

案例2：让一个盒子水平居中

旋转 rotate

2D 旋转指的是让元素在 2 维平面内顺时针旋转或者逆时针旋转。

语法：

transform: rotate(度数)

重点：

rotate 里面跟度数，单位是 deg，比如 rotate(45deg)
角度为正时，顺时针；负时，逆时针
默认旋转的中心点是元素的中心点

案例：图片旋转360度





    
    
    
    2D转换之旋转rotate

案例：旋转箭头

转换中心点 transform-origin

我们可以设置元素转换的中心点。

语法：

transform-origin: x y;

重点：

注意后面的参数 x 和 y 用空格隔开
x y 默认转换的中心点是元素的中心点（50% 50%）
还可以给 x y 设置像素或者方位名词（top bottom left right center）





    
    
    
    transform-origin





    
    
    
    旋转中心点

缩放 scale

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

语法：

transform: scale(x, y);

注意：

注意其中的 x 和 y 用逗号分隔
transform: scale(1, 1) ：宽和高都放大一倍，相当于没有放大
transform: scale(2, 2) ：宽和高都放大了 2 倍
transform: scale(2) ：只写一个参数，第二个参数默认等于第一个参数，相当于 scale(2, 2)
transform: scale(0.5, 0.5) ：缩小
scale 缩放最大的优势：可以设置缩放的基准点（默认以中心点缩放）；并且缩放不会影响其他盒子的位置（以上两个特点都是直接设置 width 和 height 都无法做到的）





    
    
    
    2D转换之缩放

案例：图片放大





    
    
    
    图片放大案例

综合写法

注意：

同时使用多个转换，其格式为：transform: translate() rotate() scale() ...等
其顺序会影转换的效果。（先旋转会改变坐标轴方向）
当我们同时有位移和其他属性的时候，记得要将位移放到最前





    
    
    
    Document

总结

2D 移动 translate(x, y) 最大的优势是不影响其他盒子，里面参数用 %，是相对于自身宽度和高度来计算的
2D 旋转 rotate(度数) 可以实现旋转元素，度数的单位是 deg
2D 缩放 sacle(x, y) 里面参数是数字，不跟单位，可以是小数。最大的优势在于不影响其他盒子
设置转换中心点 transform-origin : x y; 参数可以百分比、像素或者是方位名词
当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前

动画

动画（animation）是 CSS3 中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

基本使用

制作动画分为两步：

先定义动画
再使用（调用）动画

用 keyframes 定义动画（类似定义类选择器）

@keyframes 动画名称 {
   0% {
        width: 100px;
   }  
   100% {
        width: 200px;
   }
}

动画序列

0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列
在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%

元素使用动画

div {
    width: 200px;
    height: 200px;
    background-color: aqua;
    margin: 100px auto;
    /* 调用动画 */
    animation-name: 动画名称;
    /* 持续时间 */
    animation-duration: 持续时间;
}





    
    
    
    CSS3动画的基本使用

动画常用属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state 属性
animation-name	规定 @keyframes 动画的名称（必须的）
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是 0（必须的）
animation-timing-function	规定动画的速度曲线，默认是 “ease”
animation-delay	规定动画何时开始，默认是 0
animation-iteration-count	规定动画被播放的次数，默认是 1，还有 infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是 "normal", alternate 逆播放
animation-play-state	规定动画是否正在运行或暂停。默认是 "running", 还有 "paused"
animation-fill-mode	规定动画结束后状态，保持 forwards 回到起始 backwards

动画简写属性

animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态。

animation: myfirst 5s linear 2s infinite alternate;

简写属性里面不包含 animation-play-state
暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用
想要动画走回来，而不是直接跳回来：animation-direction: alternate
盒子动画结束后，停在结束位置：animation-fill-mode: forwards

案例：热点图





    
    
    
    大数据热点图

速度曲线

animation-timing-function：规定动画的速度曲线，默认是 "ease"。

值	描述
linear	动画从头到尾的速度是相同的（匀速）
ease	默认。动画以低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
steps()	指定了时间函数中的间隔数量（步长）





    
    
    
    速度曲线步长
    



我在这里等你





    
    
    
    奔跑的熊大案例

案例：奔跑的熊





    
    
    
    奔跑的熊大案例

3D转换

我们生活的环境是 3D 的，照片就是 3D 物体在 2D 平面呈现的例子。

有什么特点

近大远小
物体后面遮挡不可见

当我们在网页上构建 3D 效果的时候参考这些特点就能产出 3D 效果。

三维坐标系

x 轴：水平向右（注意：x 右边是正值，左边是负值）
y 轴：垂直向下（注意：y 下面是正值，上面是负值）
z 轴：垂直屏幕（注意：往外面是正值，往里面是负值）

3D 转换我们主要学习工作中最常用的 3D 位移和 3D 旋转。

主要知识点

3D 位移：translate3d(x, y, z)
3D 旋转：rotate3d(x, y, z)
透视：perspective
3D 呈现：transfrom-style

3D移动 translate3d

3D 移动在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向。

transform:translateX(100px)：仅仅是在 X 轴上移动
transform:translateY(100px)：仅仅是在 Y 轴上移动
transform:translateZ(100px)：仅仅是在 Z 轴上移动（注意：translateZ 一般用 px 单位）
transform:translate3d(x, y, z)：其中 x、y、z 分别指要移动的轴的方向的距离

因为 z 轴是垂直屏幕，由里指向外面，所以默认是看不到元素在 z 轴的方向上移动（要借助透视）。

透视 perspective

在 2D 平面产生近大远小视觉立体，但是效果只是二维的。

如果想要在网页产生 3D 效果需要透视（理解成 3D 物体投影在 2D 平面内）
模拟人类的视觉位置，可认为安排一只眼睛去看
透视我们也称为视距：视距就是人的眼睛到屏幕的距离
距离视觉点越近的，在电脑平面成像越大，越远成像越小
透视的单位是像素

透视写在被观察元素的父盒子上面。

d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。

z：就是 z 轴，物体距离屏幕的距离，z 轴越大（正值）我们看到的物体就越大。





    
    
    
    3D移动translate3d

translateZ

translform:translateZ(100px)：仅仅是在 Z 轴上移动。有了透视，就能看到 translateZ 引起的变化了。

translateZ：近大远小
translateZ：往外是正值
translateZ：往里是负值





    
    
    
    translateZ

3D旋转 rotate3d

3D旋转指可以让元素在三维平面内沿着 x轴，y轴，z轴或者自定义轴进行旋转。

语法

transform: rotateX(45deg)：沿着 x 轴正方向旋转 45 度
transform: rotateY(45deg)：沿着 y 轴正方向旋转 45deg
transform: rotateZ(45deg)：沿着 z 轴正方向旋转 45deg
transform: rotate3d(x, y, z, deg)：沿着自定义轴旋转 deg 为角度（了解即可）

对于元素旋转的方向的判断，我们需要先学习一个左手准则。

X轴左手准则

左手的手拇指指向 x 轴的正方向
其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向





    
    
    
    rotateX

Y轴左手准则

左手的手拇指指向 y 轴的正方向
其余手指的弯曲方向就是该元素沿着 y 轴旋转的方向（正值）





    
    
    
    rotateY





    
    
    
    rotateZ

transform: rotate3d(x, y, z, deg)：沿着自定义轴旋转 deg 为角度（了解即可）。

xyz 是表示旋转轴的矢量，表示你是否希望沿着该轴旋转，最后一个表示旋转的角度。

transform: rotate3d(1, 0, 0, 45deg)：就是沿着 x 轴旋转 45deg
transform: rotate3d(0, 1, 0, 45deg)：就是沿着 y 轴旋转 45deg
transform: rotate3d(0, 0, 1, 45deg)：就是沿着 z 轴旋转 45deg
transform: rotate3d(1, 1, 0, 45deg)：就是沿着对角线（矢量计算）旋转 45deg





    
    
    
    rotate3d

3D呈现 transfrom-style

控制子元素是否开启三维立体环境
- transform-style: flat 子元素不开启 3d 立体空间（默认的）
- transform-style: preserve-3d; 子元素开启立体空间
代码写给父级，但是影响的是子盒子
这个属性很重要，后面必用





    
    
    
    transform-style

案例：两面翻转的盒子

li 设置大小，加透视和 3d 呈现
front 需要前移 17.5 像素
bottom 需要下移 17.5 像素并且要沿着 x 轴翻转负 90 度
鼠标放到 box 让盒子旋转 90 度

案例：旋转木马

给 body 添加透视效果 perspective: 1000px;
给 section 添加大小，一定不要忘记添加 3d 呈现效果控制里面的 6 个 div
- 别忘记子绝父相，section 要加相对定位
里面 6 个 div 全部绝对定位叠到一起，然后移动不同角度旋转和距离
- 注意：旋转角度用 rotateY 距离肯定用 translateZ 来控制
给 section 添加动画 animation，让它可以自动旋转即可





    
    
    
    综合案例：旋转木马

浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。

私有前缀

-moz-：代表 firefox 浏览器私有属性
-ms-：代表 ie 浏览器私有属性
-webkit-：代表 safari、chrome 私有属性
-o-：代表 Opera 私有属性

提倡的写法

-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
-o-border-radius: 10px; 
border-radius: 10px;

参考

黑马程序员pink老师前端入门教程

HTML CSS