前端学习-HTML5 和 CSS3 新特性

目录

1 HTML5 的新特性

1.1 HTML5 新增的语义化标签

1.2 HTML5 新增的多媒体标签

1.3 HTML5 新增的 input 类型

1.4 HTML5 新增的表单属性

2 CSS3 新特性

2.1 属性选择器

2.2 结构伪类选择器

2.3  伪元素选择器

2.4 CSS3 盒子模型

2.5 CSS3的其他特性

2.6 CSS3 过渡

2.7 CSS3 2D转换 transform

2.8 CSS3 动画 animation

2.9 3D转换

3.1 私有前缀

3.2 提倡的写法

---

1 HTML5 的新特性

HTML 5 的新特性是针对之前的不足，增加了一些新标签、新表单和新的表单属性。

1.1 HTML5 新增的语义化标签

<header>	头部标签
<nav>	导航标签
<article>	内容标签
<section>	定义文档某个区域，可以看作是个大号的盒子
<aside>	侧边栏标签
<footer>	尾部标签

1.2 HTML5 新增的多媒体标签

可以在菜鸟教程上查询视频、音频格式支持的浏览器。

 1）视频 <video>

<video src="文件地址" controls="controls"></video>

• src=url；视频的url地址
• autoplay=autoplay；视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
• controls=controls；向用户展示播放控件（一般会设置为不展示，然后用js来设置）
• loop=loop；设置视频循环播放
• preload=auto(预先加载视频) | none；若设置了视频自动播放，则忽略该属性；
• poster=mgurl；设置视频加载时的等待图片
• muted=muted；设置视频静音播放
• width:宽度px；设置播放器的宽度
• height:高度px；设置播放器的高度

注意：除了宽度和高度可以放CSS里，其余都在标签内部定义。

2）音频 <audio>

<audio src="文件地址" controls="controls"></audio>

常见属性

• autoplay="autoplay"；视频自动播放，谷歌浏览器禁止视频、音频自动播放
• controls="controls"；音频播放控件
• loop="loop"；音频播放结束时重新开始播放
• src=”url"；要播放的音频的地址

1.3 HTML5 新增的 input 类型

使用方法

使用时必须用form标签包住。点击提交按钮时就可以验证表单。

HTML5 新增的 input 类型

属性值	说明
email	限制用户输入必须为email类型
url	限制用户输入必须为 url 类型
date	限制用户输入必须为日期类型
time	限制用户输入必须为时间类型
month	限制用户输入必须为月份类型
week	限制用户输入必须为周类型
number	限制用户输入必须为数字类型
tel	手机号码
search	搜索框
color	生成一个颜色选择表单

1.4 HTML5 新增的表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成后自动聚焦到指定的表单
autocomplete	off / on	用户填写时，有之前填过的内容选项。 默认为on，需要加上name属性，同时成功提交。
multiple	multiple	可以多选文件提交

若想修改placeholder里的文本样式，可以使用伪元素选择器。

eg：input::placeholder { color:pink;}

2 CSS3 新特性

2.1 属性选择器

选择符	说明
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。E[att]这个权重是属性选择器10+标签选择器1=11

2.2 结构伪类选择器

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

选择符	说明
F E:first-child	匹配父元素F中第一个子元素 E
F E:last-child	匹配父元素F中最后一个 E 元素
F E:nth-child(n)	匹配父元素 F 中第 n 个子元素 E；eg：ul li:nth-child(2)
F E:first-of-type	匹配父元素F中第一个子元素 E
F E:last-of-type	匹配父元素F中最后一个 E 元素
F E:nth-of-type(n)	匹配父元素 F 中第 n 个子元素 E；eg：ul li:nth-child(2)

注意

1）E:nth-child(n)中的n 可以是数字、关键字(even偶数、odd奇数)和公式。n是公式时，有以下几种情况：

• 括号里可以写n，即：E:nth-child(n)。代表从0开始，逐个加1，直到父元素的最后一个子元素。也就是这么写会选中父元素的所有子元素。
• 括号里是2n时，等价于even，选择所有的偶数。即0、2、4、6、8...
• 括号里是2n+1时，等价于odd，选择所有的奇数。即1、3、5、7...
• 括号里为5n时，等价于选取所有5的倍数。即0、5、10...
• 括号里为n+5时，等价于选择从第5个开始的后面所有子元素。即5、6、7、8...
• 括号里为-n+5时，等价于选择前5个元素。即0、1、2、3、4、5

2) nth-type 和 nth-child 的区别

• F E:nth-child(n) 会把F父元素的所有子孩子都进行排序，先找到第n个孩子，然后判断元素类型是否是E，必须序号和元素类型都一致，才能把它选出来；
• F E:nth-of type(n) 会先给F父元素中所有E类型的元素排序，然后再对应序号n；
• 当父元素中的子元素类型多样时，两个写同一个序号，选出来的子元素会不一样。

2.3  伪元素选择器

利用CSS创建新的标签，不需要HTML标签，简化HTML结构。例如：导航栏右侧的小箭头、黑色遮罩。

1）选择符

::before 在元素内部的前面插入内容

::after 在元素内部的后面插入内容

注意：

• before和after创建一个盒子，但是属于行内元素
• 新创建的元素在文档树中是找不到的，所以称之为伪元素

2）语法

element::before{}

注意：

• before和after必须具有content属性
• before在父元素内容的最前面创建元素，after在父元素内容的后面插入元素
• 伪元素选择器和标签选择器一样，权重为1。div::before的权重是2，div是1，再加上before的1

3）使用场景

a) 小图标

用字体图标，将字体图标里的小方块放到content里，或者将前面的编码放在content里。使用编码时，要加一个转义符号。例如：content:"\e920"

 b) 黑色半透明盒子

将原来的mask层改为.tu:before，内容设置为空即可。注意：hover 和 ::before中间没有空格 

c) 清除浮动

当父元素的所有子元素均浮动时，父元素的高度为0。为了改变这样的情况，需要清除浮动。

.clearfix:after {
    contnent:'';
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}

2.4 CSS3 盒子模型

CSS3 可以通过box-sizing 来指定盒模型，可以指定位content-box和border-box。

• content-box：盒子大小=width+padding+border
• border-box：盒子大小=width

2.5 CSS3的其他特性

1）滤镜 filter 图片变模糊

filter:函数()；

例如：filter:blur(5px)；blur模糊处理，数值越大越模糊。

2）calc函数

可以让声明CSS属性时，进行一些计算。一定要在运算符前后加空格。

width:calc(100% - 80px);

2.6 CSS3 过渡

1）语法

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

• 属性：想要变化的属性，宽度、高度、背景颜色、内外边距等都可。
• 花费的时间：单位是秒，必须写单位，如：0.5s
• 运动曲线：默认是ease（逐渐慢下来），可省略
• 何时开始：单位是（必须写单位），可以设置延迟触发时间。默认是0s。

2）注意

• 谁做过渡，transition属性给谁加；
• 若想写多个属性，可以用，进行分隔。例如：transition: width 1s, height .5s；若想要所有属性都过渡，可以写all

2.7 CSS3 2D转换 transform

1）移动 translate

2D移动是2D转换里的一种功能，可以改变元素在页面中的位置，类似定位。

语法：

• transform: translate(x,y);        //在X轴和Y轴一起移动元素
• transform: translateX(n);        //在X轴移动元素
• transform: translateY(n);        //在Y轴一起移动元素

重点：

• 最大的优点：不会影响其他盒子的位置。
• translate对行内标签没有效果。
• translate的百分比单位是相对于自身元素的。

应用：

大盒子里的小盒子水平居中，垂直居中，可以结合定位和translate来实现。小盒子代码如下：

.little_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

2）旋转rotate

2D旋转是指让元素顺时针或逆时针旋转。

语法：

transform: rotate(度数)

重点：

• rotate里面的单位是度数（deg），正数为顺时针，负数为逆时针。
• 默认旋转的中心是元素的中心。

 应用：

可以用盒子边框实现小三角的形状，不用字体图标。代码如下：

div::after {
    content:'';
    position: absolute;
    top: 8px;
    right: 15px;
    width: 10px;
    height: 10px;
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    /* 旋转45度变成向下的小三角*/
    transform:rotate(45deg);
}

3）2D转换中心点 transform-origin

设置元素转换时的中心点

语法：

transform-origin: x y;

重点：

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

4）缩放 scale

通过缩放元素来控制元素的大小。

语法：

transform: scale(x,y);        // 元素宽变成原来的x倍，高变成原来的y倍。

重点：

• 参数x和y是用逗号分隔。括号里的xy是用逗号分隔的，没有括号包围的是用空格分隔的。
• 参数x和y不跟单位时，就表示倍数；数字小于1为缩小，大于1为放大。
• 等比例缩放，同时修改x和y时，参数可以为一个数。scale(2)==scale(2,2)
• 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，且缩放后不影响其他盒子。

5）2D转换的连写

1. 可以使用多个转换，格式为：transform：translate() rotate() scale()...等
2. 其顺序会影响转换的效果；尤其旋转后会改变坐标轴的方向
3. 当我们同时有位移和其他属性时，一定要将位移放到最前面

2.8 CSS3 动画 animation

制作动画分两步：1）定义动画；2）调用动画。可以使用多个动画，中间用逗号分隔开即可。

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

@keyframes 动画名称 {
    /* 开始状态 */
    0% {
        width: 100px;
    }
    /* 结束状态 */
    100% {
        width: 200px;
    }
}

动画序列：

• 可以使用关键字 from 和 to ，相当于0% 和100%
• 可以有多个状态，状态百分比要用整数，百分比代表总共时间的划分。

2）调用动画

div {
    animation-name: 动画名称；
    animation-duration: 持续时间s；
}

3）常用的动画属性

• iteration：重复
• infinite：无限 
• alternate：交替

4）动画简写属性

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

• 属性的顺序有一定的要求，像持续时间在何时开始的前面。
• 前两个属性“动画名称和持续时间”一定要写，不可以省略。
• 简写的属性里，不包含animation-play-state，经常和鼠标经过等其他的配合使用
• 想要动画来回走，而不是直接跳回来，animation-direction:alternate;
• 盒子动画后，停在结束的位置：animation-fill-mode:forwards.

5）速度曲线

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

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

应用：

使用步长时，可以实现打字机效果。

2.9 3D转换

三维坐标系

• x轴水平向右，右边为正
• y轴垂直向下，下边为正
• z轴垂直屏幕，往外为正

1）translate 3d

• transform:translateX(100px)：仅在X轴移动
• transform:translateY(100px)：仅在Y轴移动
• transform:translateZ(100px)：仅在Z轴移动，一般用px为单位
• transform:translate3d(x,y,z) ：x,y,z分别指要移动的轴的方向的距离

 注意：translate3d(x,y,z)是不可以省略的，如果没有可以写0。

2）透视perspective

让2D平面中产生3D效果。透视也成为视距，就是人的眼睛到屏幕的距离。

• 透视应该写在被观察元素的父盒子上。
• 透视的单位是像素，透视也就是视距d越小，成像越大，视距越大，成像越小。

3）3D 旋转rotate

• transform:rotateX(45deg)：沿着X轴正方向（顺时针）旋转45度
• transform:rotateY(45deg)：沿着Y轴正方向（顺时针）旋转45度
• transform:rotateZ(45deg)：沿着Z轴正方向（顺时针）旋转45度
• transform:rotate3d(x,y,z,deg) ：沿着自定义轴，旋转deg角度，了解即可

eg：transform:rotate3d(1,1,0,45deg)：沿着x轴和y轴的矢量方向，旋转45度。

判断元素旋转的方向，可以利用左手准则

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

 4）3D呈现 transform-style

• 控制子元素是否开启三维立体环境
• transform-syle:flat 子元素不开启3d立体空间，默认为不开启
• transform-style:preserve-3d； 子元素开启立体空间
• 代码要写给父级，但是影响的是子盒子

3 浏览器私有前缀

3.1 私有前缀

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

3.2 提倡的写法

先把私有前缀的写好，最后再写一个没有私有前缀的。

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