H5C3新特性简单总结

南风_思学

已于 2022-02-06 21:24:05 修改

阅读量3.7k

点赞数 4

文章标签： html css html5

于 2022-02-06 21:10:19 首次发布

本文链接：https://blog.csdn.net/qq_44444069/article/details/122801688

版权

H5C3新特性简单总结

CSS3新特性：

1.颜色：新增RGBA，HSLA模式

2. 文字阴影（text-shadow）

3. 边框：圆角（border-radius）边框阴影： box-shadow

4. 盒子模型：box-sizing

5. 背景：background-size 设置背景图片的尺寸background-origin 设置背景图片的原点background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局

6. 渐变：linear-gradient、radial-gradient

7. 过渡：transition，可实现动画

8. 自定义动画

9. 在CSS3中唯一引入的伪元素：selection.

10. 媒体查询，多栏布局

11. border-image

12. 2D转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)

13. 3D转换

14.新增选择器：属性选择器、伪类选择器、伪元素选择器。

H5新特性:

1. 拖拽释放(Drag and drop) API

2. 语义化更好的内容标签（header,nav,footer,aside,article,section）

3. 音频、视频API(audio,video)

4. 画布(Canvas) API

5. 地理(Geolocation) API

6. 数据存储 localStorage、sessionStorage

7. 表单控件，calendar、date、time、email、url、search

Css3

1, CSS3 - 选择器

- 属性选择器

（自定义属性data-name使用时不可以省略data

li[data-name=hello] {font-size: 50px; } )

* 标签[类] / li[name]{ color: blue; }

+ 选择有这个属性的元素

* 标签[类="值"] / li[class=red] { color: blue; }

+ 选择指定属性等于这个值的元素 //严格匹配

* 标签[类*="值"] / li[class*=red]{ color: blue; }

+ 选择指定属性包含这个值的元素

* 标签[类^="值"] / li[class^=red]{ color: blue; }

+ 选择指定属性以这个值开头的元素

* 标签[类$="值"] / li[class$=red]{ color: blue; }

+ 选择指定属性以这个值结束的元素

- 兄弟选择器

* .active + li { color: blue; }

+ 相邻的指定类型的元素 // 单个（指定元素的下一个兄弟元素）

* .active ~ li { color: blue; }

+ 指定类型的元素 // 多个（指定元素的下面所有兄弟元素）

- 伪类选择器

* li:first-child { color: red; }

+ 相对于当前元素的父元素的第一个子元素（且为该类型才可获取到）

* li:last-child { color: red; }

+ 相对于当前元素的父元素的最后一个子元素（且为该类型才可获取到）

* li:first-of-type { color: red; }

+ 相对于当前元素的父元素的第一个该类型的子元素 // 过滤其他元素（只会选择li）

* li:last-of-type { color: red; }

+ 相对于当前元素的父元素的最后一个该类型的子元素 // 过滤其他元素

* li:nth-child(1) { color: red; }

+ 指定索引位置 nth-child(从1开始的索引||关键字||表达式)

* li:nth-of-type(even) { color: red; }

+ 指定索引位置 nth-of-type(从1开始的索引||关键字||表达式) // 严格匹配类型

*li:nth-last-of-type(even)

+ 指定同类型中的倒数第n个同级兄弟元素。

2, CSS3 - 元素伪类

- 常用伪类

* li::before { color: red; }

* li::after { color: red; }

div:nth-of-type(2)::after{

/*必须添加content属性，否则后期不可见*/

content: "";

/*默认是行级元素，如果想设置宽高，就必须转换为块级元素*/

display:block;

position: absolute;

width: 20px;6

height: 20px;

left: -10px;

bottom: -10px;

}

* p::first-letter { color: red; }

+ 获取第一个字符

* p::first-line { color: red; }

+ 获取第一行内容,跟上一个冲突

* p::-moz-selection { color: red; }

+ 设置当前选中内容的样式,不能设置文字大小

3, CSS3 - 颜色

- 使用颜色

* background-color: red;

* background-color: #c9ffa6;;

* background-color: rgb(255,150,0);

* background-color: hsl(300,100%,50%);

+ hsl(颜色(0~360)，饱和度(0%~100%)，明度(0%~100%))

* background-color: rgba(255,0,255,0.2);

+ rgba(红色，绿色，蓝色，透明度)

* background-color: hsla(300,100%,50%,0.2);

- 使用透明度

* opacity: 0.5;

4, CSS3 - 文本阴影

- 使用方法 [可以添加多个]

* text-shadow:offsetX offsetY blur color

//水平阴影的位置垂直阴影的位置模糊的距离阴影的颜色

5, CSS3 - 盒子内减

box-sizing:content-box border-box

- 使用方法

* box-sizing: border-box;

+ 自动缩减内容,使盒子不变形

content-box: 设置的width属性值是内容的宽度，

盒子的最终的宽高值=内容width+padding+border

border-box: 设置的width属性值就是盒子的最终的宽度

内容width=盒子width-border-padding

content-box

这是由 CSS2.1 规定的宽度高度行为。

宽度和高度分别应用到元素的内容框。

在宽度和高度之外绘制元素的内边距和边框。

border-box

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

6, CSS3 - 圆角

- 使用方法

1.设置一个值：四个角的圆角值都一样

border-radius: 10px;

2.设置两个值:第一个值控制左上/右下，第二个值控制右上/左下

border-radius: 10px 30px;

3.设置三个值：第一个值控制左上，第二值控制右上/左下，第三个值控制右下

1 2

3 4

border-radius: 10px 40px 60px;

4.设置四个值：左上右上右下左下

border-radius: 10px 30px 60px 100px;

7, CSS3 - 盒子阴影

- 使用方法 [可以添加多个]

* box-shadow:h v blur spread color inset

+ eg；

.demo2{

box-shadow: -10px 10px 5px 0px rgba(0,0,150,0.2) inset;

}

h:水平方向的偏移值

v:垂直方向的偏移值

blur:模糊--可选，默认0

spread:阴影的尺寸，扩展和收缩阴影的大小--可选默认0

color:颜色--可选，默认黑色

inset:内阴影--可选,默认是外阴影

8, CSS3 - 渐变

- 线性渐变 [多用于长方形的盒子背景]

* background : linear-gradient(方向 , 颜色位置)

+ 方向: [to left][45deg]

+ 颜色: color 10% // 可以为多组

- 径向渐变 [多用于圆形的盒子背景]

* background: radial-gradient(形状 | 大小 | 坐标 ,颜色位置, 颜色位置 )

+ 形状: [circle, ellipse]

+ 大小: closest-side:最近边/farthest-side:最远边/closest-corner:最近角/farthest-corner:最远角

+ 坐标: at left bottom

+ 颜色：color 10% // 可以为多组

- 重复渐变

* repeating-linear-gradient // 语法如上

* repeating-radial-gradient // 语法如上

9, CSS3 - 背景background

- 视差滚动

* background-attachment: fixed;

+ 常见易信网、QQ官网

- 多张背景

* background: url(11.jpg) no-repeat left top, url(11.jpg) no-repeat right bottom;

- 显示与裁切

* background-origin: content-box;

+ 决定从哪个部分开始显示图片

background-Origin属性指定background-position属性应该是相对位置。

* background-clip: content-box;

+ 决定从那里去裁剪

background-clip属性指定背景绘制区域。

- 缩放图片

* background-size ：100% 100%;

当通过宽度和高度值来设定尺寸时，你可以提供一或者两个数值:

如果仅有一个数值被给定，这个数值将作为宽度值大小，高度值将被设定为auto。
如果有两个数值被给定，第一个将作为宽度值大小，第二个作为高度值大小。

属性值

<length>

<length> 值，指定背景图片大小，不能为负值。

<percentage>

<percentage> 值，指定背景图片相对背景区（background positioning area）的百分比。背景区由background-origin设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框。如果attachment 为fixed，背景区为浏览器可视区（即视口），不包括滚动条。不能为负值。

auto

以背景图片的比例缩放背景图片。

cover

缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 contain 值相反，cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的左/右或者上/下部分会被裁剪。

contain

缩放背景图片以完全装入背景区，可能背景区部分空白。contain 尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示由 background-color 设置的背景颜色。

- 添加滤镜

background-blend-mode 属性定义了背景层的混合模式（图片与颜色）。

CSS background-blend-mode 属性 | 菜鸟教程

* background: url(tu02.png) no-repeat, #6a3c2b;

background-blend-mode: lighten;

10, CSS3 - 边框图片

- 使用方法

* border: 27px solid red;

* border-image-source: url("../images/border1.png");

* border-image-slice: 27 fill;

* border-image-width: 27px;

* border-image-outset: 0px;

* border-image-repeat: round;

eg：border-image: url("../images/border1.png") 27 / 27px /0px round;

11, CSS3 - transition过渡

- 使用方法

* transition-property: left;

+ 如果当前元素所有的属性都需要过渡，就写all

* transition-duration: 2s;

* transition-timing-function: linear; // 可选

* transition-delay: 2s; // 可选

eg：transition: left 2s linear 0s; // 可以分开写多个

12, CSS3 - transform二维变换

- 位移：translate 单位[100px]

* transform: translate(100px);

+ 如果只有一个参数就代表x方向

* transform: translate(400px,500px);

+ 如果有两个参数就代表x/y方向

* transform:translateX(300px);

* transform:translateY(300px);

- 缩放：scale 无单位

// 实现缩放 1指不缩放，>1.01放大 <0.99缩小参照元素的几何中心

* transform: scale(2);

+ 如果只有一个参数，就代表x和y方向都进行相等比例的缩放

* transform: scale(2,1);

+ 如果有两个参数就代表x/y方向

* transform:scaleX(0.5);

* transform:scaleY(0.5);

- 旋转：rotate 单位[45deg]

* transform:rotate(-90deg);

+ 如果只有一个参数，就代表x和y方向都进行相等比例的缩放

* transform-origin: left top;

+ 关键字：left top right bottom center

- 斜切：skew 单位[45deg]

* transform:skew(-30deg);

* transform:skew(30deg,-30deg);

* transform:skewX(30deg);

* transform:skewY(30deg);

* 实现任意元素垂直居中显示

eg：transform: translate(-50%,-50%);

* 如果之前设置了transform, 然后需要重新设置它, 一定记得保留原先的值

13, CSS3 - transform3D转换

- 位移：translate

* transform: translate3d(0px,0px,400px);

+ translate3d(X方向的偏移，Y方向的偏移，Z方向的偏移)

- 缩放：scale

* transform:scale3d(1,1,10)

+ scale3d(x方向上的缩放，y方向的缩放，z方向的缩放)

- 旋转：rotate

* transform: rotate3d(1,1,1,330deg)

+ rotate3d(代表x轴向量值,y,z,angle)

- 将网页设置为三维视角中

* transform-style: preserve-3d;

- 添加透视景深

* perspective: 0px;

+ 默认在盒子的内部

- 添加观察盒子的角度

* perspective-origin: 0px 0px;

* 左手法则: 大拇指朝向负轴方向, 其他四个手指环绕的方向便是正方向

http://isux.tencent.com/css3/index.html

14, CSS3 - 动画animation

- 创建动画

@keyframes moveTest {

from{

// from 等价于 0%

transform: translate(0,0) rotate(45deg);

}

50%{

transform: translate(0,500px);

}

to{

// to 等价于 100%

transform: translate(500px,600px);

}

- 使用动画

animation: name duration timing-function delay iteration-count direction;

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。默认：0
animation-timing-function	规定动画的速度曲线。linear速度不变 ease低速开始加快低速结束 ease-in低速开始 ease-out 低速结束 ease-in-out 低速开始和结束；默认：ease
animation-delay	规定在动画开始之前的延迟。默认：0
animation-iteration-count	规定动画应该播放的次数。 n/infinite 无限次默认：1
animation-direction	规定是否应该轮流反向播放动画。 normal 默认值。动画应该正常播放。alternate 动画应该轮流反向播放。

eg:animation: boxShadow 1.75s linear infinite alternate;

15, CSS3 - web字体

- 使用方法

* 阿里妈妈、有字库... 输入需要增加效果的文字

* 下载字体, 置入font文件夹

* 在CSS中定义字体 [找到index文件复制和粘贴]

// 修改名称和路径

@font-face {

font-family: 'shuangyuan';

src: url('../fonts/webfont.eot'); /* IE9*/

src: u rl('../fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('../fonts/webfont.woff') format('woff'), /* chrome、firefox */

url('../fonts/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

url('../fonts/webfont.svg#webfont') format('svg'); /* iOS 4.1- */

}

* 使用样式

.myFont{

font-family: shuangyuan;

}

16, CSS3 - web图标

- 使用方法

* 阿里妈妈等网站找到喜欢的图标

* 下载图标, 置入font文件夹

* 在CSS中定义字体 [找到index文件复制和粘贴]

// 修改名称和路径

@font-face {

font-family: 'iconfont';

src: url('../fonts/iconfont.eot'); /* IE9*/

src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */

url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */

}

* 使用样式

.myFont{

font-family: iconfont;

}

* <span class="myFont"></span>

* .output::before{

content: "\e640";

color: blue;

font-size: 50px;

}

自定义鼠标样式：cursor: url('~@/assets/img/ic_mouse_ban.png'), not-allowed;

Html5

1.您个人理解的什么是 HTML5

HTML超文本标记语言。HTML不是一种编程语言，而是一种标记语言。HTML5是HTML的一个新版本。HTML和以前的版本不同，它将Web带入一个成熟的应用平台，在HTML5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。

2.html5有哪些新特性?移除了哪些元素?如何区分html和html5?

1.HTML5中的新特性：
　　用于绘画的 canvas 元素
　　用于媒介回放的 video 和 audio 元素
　　对本地离线存储的更好的支持
　　新的特殊内容元素，比如 article、footer、header、nav、section
　　新的表单控件，比如 calendar、date、time、email、url、search

2.HTML5 废弃了一些过时的，不合理的 HTML 标签：
frame
frameset
noframe
applet
big
center
basefront

3. <!DOCTYPE html>声明更为简单。

HTML5能够本地存储数据，在之前都是使用cookie使用的，HTML5提供了下面两种本地存储方案：
• localStorage用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失。
• sessionStorage 同一个会话的页面才能访问并且当会话结束后数据也会随之销毁，因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储

内容	cookie	localStorage	sessionStorage
生命周期	一般由服务器生成，可设置失效的时间，如果在浏览器端生成cookie，默认关闭浏览器后失效	除非被删除，否则永久保存	仅在当前会话下有效，关闭页面或者浏览器后被删除
数据大小	4k	5M	5M
与服务器端通信	携带在http请求头中，若保存cookie过多数据会带来性能问题	仅在客户端即浏览器中保存，不参与和服务器的通信	仅在客户端即浏览器中保存，不参与和服务器的通信
易用性	需要程序员自己封装	原生接口可以接受，亦可以再次封装来对obj和Arr有更好的支持	原生接口可以接受，亦可以再次封装来对obj和Arr有更好的支持