HTML5和CSS3归纳

最新推荐文章于 2024-05-05 16:18:19 发布

从入门到放弃_nys

最新推荐文章于 2024-05-05 16:18:19 发布

阅读量1.3k

点赞数 6

分类专栏：前端 CSS HTML5 文章标签： HTML5 CSS3

本文链接：https://blog.csdn.net/weixin_42031119/article/details/101550438

版权

前端同时被 3 个专栏收录

24 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

HTML5

3 篇文章 0 订阅

订阅专栏

HTML5和CSS3归纳（仅供自己记录复习基础点）

前言
一、HTML5
二、CSS3

持续慢慢补充中…

前言

在这里插入图片描述

w3c 手册中文官网 ：添加链接描述
随时查阅

一、HTML5

1.常用新标签

常用如header、nav、footer、article、section、aside、datalist、fieldset。详细可查看w3c官网HTML5新元素

header：定义文档的页眉
nav：定义导航链接的部分
footer：定义文档或节的页脚
article：定义文档内的文章
section：定义文档中的节（section、区段）（用法自由）
aside：定义其所处内容之外的内容(如侧边栏）

通俗来说，<header></header>就可理解为<div class="header"></div>，其他同理。语义更好。

datalist：标签定义选项列表。请与 input 元素配合使用该元素

<!--通过list和id来建立连接-->

<input type="text" value="" list="id值">
<datalist id="id值">
 	<option></option>
 	<option></option>
 	<option></option>
</datalist>

效果如下：
在这里插入图片描述

fieldset：元素可将表单内的相关元素分组、打包。 legend 搭配使用
```
<fieldset>
  <legend>边框标题</legend>
  表单内容
</fieldset>
```
如下图：

补充一个曾经做的一个项目所用到比较多的一个新标签

figure: 定义自包含内容，比如图示、图表、照片、代码清单等。

在这里插入图片描述

<figcaption>是定义 <figure> 元素的标题。

2.新增的input属性

1. 新增的type属性值

类型	使用示例	含义
email	`<input type="email">`	输入邮箱格式
tel	`<input type="tel">`	输入手机号码格式
url	`<input type="url">`	输入url格式
number	`<input type="number">`	输入数字格式
search	`<input type="search">`	搜索框（体现语义化）
range	`<input type="range">`	自由拖动滑块
time	`<input type="time">`	小时分钟
date	`<input type="date">`	年月日
datetime	`<input type="datetime">`	时间
month	`<input type="month">`	月年
week	`<input type="week">`	星期年

实例展示：

email
search
range
time和date
month 、week和color

其余的推荐查阅w3c

2.input常用新属性

属性	用法	含义
placeholder	`<input type="text" placeholder="请输入用户名">`	占位符，提供可描述输入字段预期值的提示信息
autofocus*	`<input type="text" autofocus>`	规定当页面加载时 input 元素应该自动获得焦点
multiple	`<input type="file" multiple>`	多文件上传，比如图片
autocomplete	`<input type="text" autocomplete="off">`	规定表单是否应该启用自动完成功能 (on/off)，on记录已经输入的值
required	`<input type="text" required>`	必填项，不能为空（加了后那一栏为必填）
accesskey	`<input type="text" accesskey="s">`	规定激活（使元素获得焦点）元素的快捷键

palceholder

在这里插入图片描述

autocomplete

<input type="text" autocomplete="off" name="名字">         <!--只写 autocomplete时等于autocomplete="on"-->
<input type="submit"/>

on，记录已经输入的值。

autocomplete属性需要提交按钮
这个表单必须给他名字name

required
给昵称一栏加了required属性，这项不能为空
<input type="text" required>

在这里插入图片描述
补充，html5兼容性问题，IE可能看不出效果，上图为火狐浏览器。

3.多媒体标签

embed：定义嵌入的内容（用得较多，但要兼容处理）
audio：播放音频
video：播放视频

<embed></embed>引入网上视频(
embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。

网站本地不提倡放视频，视频数据内存很大，而网站容量是有限的，网站上传到服务器里，是很贵的。
可以把视频上传到优酷或其他视频网站，然后再调用优酷的地址就可以
点分享，然后复制代码，复制到html文件里就可以了(有广告…）
问题：兼容性问题
audio
```
<audio src="音频地址"></audio>
```
audio属性：
- autoplay: 自动播放 (默认不自动播放）
- controls：是否显示播放控件（默认不显示）
- loop : 循环播放 loop =“2”: 循环2次 (loop或者 loop = “-1” 无限循环)

在这里插入图片描述
兼容性解决：

<audio controls="">
 	<!-- 通过source标签指定多格式音频文件 -->
 	<source src="音频地址的路径.mp3" >
 	<source src="音频地址的路径.wav" >
 	<source src="音频地址的路径.ogg" >
</audio>

vedio
```
<vedio src="视频地址的路径"></audio>
```
vedio的属性：
- autoplay：自动播放
- controls：是否显示播放控件（默认不显示）
- loop：循环播放
- width: 设置播放窗口宽度
- height：设置播放窗口高度

由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考

在这里插入图片描述
兼容性处理和上面audio一样做法即可。

二、CSS3

1.文本新增属性

1.文本颜色半透明

 color: rgba(r,g,b,a)  <!--多了个a 是alpha  透明的意思  取值范围 0~1之间

例如：

color: rgba(0,0,0,0.3)

2.文字阴影:text-shadow

text-shadow: h-shadow v-shadow blur color;

例如：
在这里插入图片描述
属性值：

在这里插入图片描述
前两项是必须写的。后两项可以选写。

实例：凹凸文字

<head>   
<meta charset="utf-8">
<style>
body {
       background-color: #ccc;      
}
div {
	color: #ccc;
	font: 700 80px "微软雅黑";
}
div:first-child {
	/* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
	text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;     <!--往下是黑色，往上是白色-->
}
div:last-child {
	/* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
	text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;   <!--往上是黑色，往下是白色-->
}
</style>
</head>
<body>
<div>我是凸起的文字</div> 
<div>我是凹下的文字</div>
</body>

在这里插入图片描述

2.新增背景属性

1.背景透明

与文本颜色半透明类似

background: rgba(0,0,0,0.3);

最后一个参数是alpha 透明度取值范围 0~1之间

注意：背景半透明是指盒子背景半透明，盒子里面的内容不收影响。

2.背景缩放:background-size

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下：

px或百分比（设置百分比时，参照盒子的宽高）
cover：会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover最多
contain: 自动调整缩放比例，保证图片始终完整显示在背景区域。

后两个用来铺满整个盒子，

cover:等比例缩放，高度和宽度都满足盒子时，停止。溢出部分隐藏
contain:等比例缩放,高度和宽度其中一个满足盒子时，停止。

background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */

比如我有一张精灵图大小是400x400，里面的小图标的大小比我要放的页面布局的大小要大，就可以通过background-size：200px 200px;缩放，然后就可以放置入页面给定的大小中。同时，找小图标在精灵图中位置时，设置background-position也要根据前面的background-size缩小，比如前面400x400改为200x200，那么横纵坐标需要减半。原来图片比例是多少，缩放的最好也是相同比例。

3.多背景图片

一个元素（盒子）可以设置多重背景图像。
如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
为了避免背景色将图像盖住，背景色通常都定义在最后一组上

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,
    url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
    url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;

3.新增选择器

1.新增伪类选择器（2种）

(1)结构伪类选择器

:first-child :选取属于其父元素的首个子元素的指定选择器
:last-child :选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) ：匹配属于其父元素的第 n 个子元素，不论元素的类型
:nth-last-child(n) ：选择器匹配属于其父元素的倒数第 n 个子元素，不论元素的类型
:nth-of-type(n)：选择器匹配属于其元素的第n个同级兄弟元素
:nth-last-of-type(n)：选择器匹配属于其元素的倒数第 n 个兄弟元素，不论元素的类型
n 可以是数字、关键词或公式
实例：
选择第一个、第二个

选取第2、4、6…个（偶数项），奇数项括号里写odd即可。

(2)目标伪类选择器
:target 目标伪类选择器 :选择器可用于选取当前活动的目标元素

 :target {
  color: red;
  font-size: 30px;
}

2.新增了伪元素选择器

::first-letter：文本的第一个单词或字（如中文、日文、韩文等）
::first-line：文本第一行；
```
p::first-line{
     font-size:14px; 
}
```
::selection: 可改变选中文本的样式；(比如鼠标选中多行文本时，选中的样式会改变）
::before和 ::after :在元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用

例如：（::before同理）

<!--CSS部分-->
div::after{
         content:"你好";
}

<!--代码部分-->
<body>
       <div>
             <p>今年</p>
       </div>
</body>

结果：
在这里插入图片描述

4.盒模型

1.CSS3盒模型：box-sizing:

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box(以W3C推荐的以前的盒模型）、border-box（新模型），这样我们计算盒子大小的方式就发生了改变。

box-sizing: content-box: 盒子大小为 width + padding + border
(content-box:此值为其默认值，其让元素维持W3C的标准Box Mode)
box-sizing: border-box: 盒子大小为 width，就是说 padding 和 border 是包含到width里面的
(设置这种模型后，设置padding和border盒子大小都没变化，因为这两者都包含到以前就设置的width里去了。）

在给元素加边框、间距、边距等，不希望破坏原始设置的宽度，保证页面的稳固。就会设置盒模型box-sizing: border-box;

div {	
	width: 400px;         /*包含了padding和border*/
	height: 200px;
	padding: 10px;       /*盒子大小不变，不撑开*/
	box-sizing: border-box;   /* padding border  不撑开盒子 */
	 /* margin: 10px; */        /*margin还是生效*/

	/* 盒子大小为 width    就是说  padding 和 border 是包含到width里面的 */
}

2.圆角边框

radius 半径（距离）

border-radius: 左上角  右上角  右下角  左下角;

在这里插入图片描述

border-radius: 10px;  /*  一个数值表示4个角都是相同的 10px 的弧度 */ 
border-radius: 50%;   /*    50% 取宽度和高度 一半  则会变成一个圆形 */
border-radius: 10px 40px;  /* 左上角和右下角是10px  右上角和左下角40 (对角线) */
border-radius: 10px 40px  80px;   /* 左上角 10   右上角和左下角 40   右下角80 */
border-radius: 10px 40px  80px  100px;   /* 左上角 10  右上角 40  右下角80  100 */

3.盒子阴影：box-shadow

6个值，前两个必写（与文字阴影相比多了阴影尺寸spread和外部阴影inset）

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；

在这里插入图片描述

默认是外阴影（outset) 但是不可以写这个属性值，不写就已经是外阴影，写了阴影就没了。想要内阴影就写inset.

注意： 文字阴影和盒子阴影都像多背景图片一样，逗号隔开，可写多个。

box-shadow: 5px 5px 10px 16px rgba(255,255,255,0.8) inset,
5px 4px 10px rgba(0,0,0,0.3);

5.过渡：transition

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态。

语法格式：

transition: 要过渡的属性  花费时间  运动曲线  何时开始;
如果有多组属性变化，还是用逗号隔开。

transition: all 0.6s;  /* 所有属性都变化用all 就可以了  后面俩个属性可以省略 */

属性：

transition-property：规定应用过渡的 CSS 属性的名称。
transition-duration：定义过渡效果花费的时间。单位必须写（s或者ms)，默认是 0s。
transition-timing-function：规定过渡效果的时间曲线。默认是 “ease”。
transition-delay：规定过渡效果何时开始。默认是 0s。

时间曲线：

在这里插入图片描述

div {
	width: 200px;
	height: 100px;
	background-color: pink;
	/* transition: 要过渡的属性  花费时间  运动曲线  何时开始; */
	transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
	/* transtion 过渡的意思  这句话写到div里面而不是 hover里面 */
}

div:hover {  /* 鼠标经过盒子，我们的宽度变为600，高度300*/
	width: 600px;
   	height: 300px；
}

6.变形：transform

transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

1. 2D变形

(1)移动：translate(x, y)

可以改变元素的位置，x、y可为负值（平移）。

translate(x,y)：水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)：仅水平方向移动（X轴移动）
translateY(y)：仅垂直方向移动（Y轴移动）

可以写px也可以写%，百分比是自己的宽高为基准。

transform: translate(50px,50px);

使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。

.box {
  	width: 499.9999px;
  	height: 400px;
  	background: pink;
 	position: absolute;
 	left:50%;     /* 父级盒子的50% */
  	top:50%;
  	transform:translate(-50%,-50%);  /* 走的自己的一半 */
}

以前在写盒子居中对齐时(绝对定位小节的补充），用得是margin-left: 自己宽度一半；但是写死了，如果宽度变了就得改。而用transform:translate(-50%）就可以了，注意是走的自己的一半。

(2)缩放：scale(x, y)

可以对元素进行水平和垂直方向的缩放。

scale(X,Y)：使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)：元素仅水平方向缩放（X轴缩放）
scaleY(y)：元素仅垂直方向缩放（Y轴缩放）

scale()的取值默认为1，0-1缩小；>1放大。

transform:scale(0.8,1);

该元素在水平方向上缩小了20%，垂直方向上不缩放。

(3)旋转：rotate(deg)

可以对元素进行旋转，正值为顺时针，负值为逆时针；注意单位是 deg 度数。

transform:rotate(45deg);

(4调整元素转换变形的原点：transform-origin

div {       /* 改变元素原点到左上角，然后进行顺时旋转45度 */    
 	transform-origin: left top;
 	transform: rotate(45deg); 
}

如果是4个角，可以用 left top这些，如果想要精确的位置，可以用px像素修改变形原点。

 div {     /* 改变元素原点到x为10,y为10   然后进行顺时旋转45度 */
 	transform-origin: 10px 10px;
 	transform: rotate(45deg); 
}

(5)倾斜：skew(deg, deg)

可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。
在这里插入图片描述

transform:skew(30deg,0deg);

元素水平方向上倾斜30度，垂直方向保持不变。

2. 3D变形

(1)立体旋转：rotateX(deg)、rotateY(deg)、rotateZ(deg)

1.rotateX(deg)
就是沿着x立体旋转。

img {
  	transition:all 0.5s ease 0s;
}
img:hover {
	transform:rotateX(180deg);
}

2.rotateY(deg)
沿着y轴进行旋转。同retateX(deg)
3.rotateZ(deg)
沿着z轴进行旋转。同上。 z轴旋转其实类似绕图片中间点旋转。

(2)透视：perspective

显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

透视原理： 近大远小 。
浏览器透视：把近大远小的所有图像，透视在屏幕上。
perspective：视距，表示视点距离屏幕的长短。如下图的d。
（视点，用于模拟透视效果时人眼的位置）

近大远小：视距越大，效果越不明显。视距越小越明显。

给父级加

父级 {
	perspective: 1000px;   /* 视距，距离，眼镜距离屏幕的距离*/
	persp
}

(3)移动：translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)

translate3d(x,y,z)
注意：
其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值。
方向是坐标轴方向。

transform: translate3d(100px,100px,300px)

比如设置一个文字鼠标放上后，往上升的效果。
在这里插入图片描述
由y轴往下的50px处，回到0处。

补充：
backface-visibility
定义当元素不面向屏幕时是否可见。

backface-visibility: visible | hidden;

7.动画：animation

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

/* 前两个必写*/
animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;

animation-name：动画名称,自定义
animation-duration：动画完成一个周期的时间，再次注意必须带单位
animation-timing-function：动画的速度曲线
animation-delay：动画何时开始，带单位

在这里插入图片描述

animation-iteration-count: infinite; 无限循环播放
animation-play-state: paused; 暂停动画
animation-direction: normal | reverse | alternate |alternate-reverse
详细更多查阅w3c

关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意。

/*  定义动画：@keyframes 动画名称{} 定义动画*/
@keyframes 动画名称 {
  	from { /* 0% */
  		开始位置；      
  	} 
  	to {  /* 100% */  
  		结束       
  	}  
}
/* 调用动画 */
元素{		
	animation： 动画名称 2s;
}

多组动画可以讲from{ } to{ } 修改为百分比。0% { } 25%{ } 50% { } 75% { } 100{ }
例子：

@keyframes go {      /* 定义动画 */
		from {
			transform: translateX(0);
		}
		to {
			transform: translateX(600px);
		}

div {      /* 调用动画 */
		width: 100px;
		height: 100px;
		background-color: pink;
		animation: go 2s ease infinite;      /* 一般我们写得前两个就可以了*/
}

8.伸缩布局

传统布局，如下图三个div每个盒子给1/3宽，容易出现一个问题，当加上margin，超出父盒子宽时最后一个不够位置会掉下去。而解决又要去修改宽度。很容易出问题。
在这里插入图片描述
而伸缩布局呢
1.父级盒子添加flex布局 display: flex;
2.子盒子添加份数 例如flex: 1; 而且加margin值也不会出现上面说的情况。

另外可以在第一个盒子给定宽度 width值，然后剩下的盒子划分份数。拉伸浏览器窗口时，固定的不变，剩下的按比例缩。

1.伸缩布局
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向。
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的。
方向：默认主轴从左向右，侧轴默认从上到下。

主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

在这里插入图片描述
Flex布局的语法规范经过几年发生了很大的变化，也给Flexbox的使用带来一定的局限性，因为语法规范版本众多，浏览器支持不一致，致使Flexbox布局使用不多
2.各属性详解

(1)flex子项目在主轴的缩放比例。不指定flex属性，则不参与伸缩分配

min-width：最小值； min-width: 280px ; 拉伸浏览器，最小宽度不能小于 280px
max-width: 最大宽度； max-width： 1280px;

div {
	min-width: 400px;
	max-width: 1280px;
}

(2)flex-direction：调整主轴方向（默认为水平方向）
通过设置主轴方向，可以实现竖着排。

flex-direction: row；  /* 水平排列，默认*/
flex-direction: column；      /* 垂直排列*/

(3) justify-content：调整主轴对齐（水平对齐）
子盒子如何在父盒子里面水平对齐

属性值	描述	白话翻译理解
flex-start	默认值。项目位于容器的开头。	让子元素从父容器的开头开始排序但是盒子顺序不变
flex-end	项目位于容器的结尾。	让子元素从父容器的后面开始排序但是盒子顺序不变
center	项目位于容器的中心。	让子元素在父容器中间显示
space-between	项目位于各行之间留有空白的容器内。	左右的盒子贴近父盒子，中间的平均分布空白间距
space-around	项目位于各行之前、之间、之后都留有空白的容器内。	相当于给每个盒子添加了左右margin外边距

(4)align-items：调整侧轴对齐（垂直对齐）
子盒子如何在父盒子里面垂直对齐（单行）

属性值	描述	白话翻译理解
flex-start	项目位于容器的开头。	垂直对齐开始位置上对齐
flex-end	项目位于容器的结尾。	垂直对齐结束位置底对齐
center	项目位于容器的中心。	垂直居中
stretch	默认值。项目被拉伸以适应容器。	让子元素的高度拉伸适用父容器（子元素不给高度的前提下)

(5)flex-wrap：是否换行
当我们子盒子内容宽度多于父盒子的时候如何处理

属性值	描述
nowrap	默认值。规定灵活的项目不拆行或不拆列。不换行，则收缩（压缩）显示强制一行内显示
wrap	规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

(6)flex-flow：是flex-direction、flex-wrap的简写形式

flex-flow: 排列方向换不换行;

flex-flow: flex-direction  flex-wrap;

(7)align-content：堆栈（由flex-wrap产生的独立行）多行垂直对齐方式
align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。
必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction: row;并且设置换行，flex-wrap: wrap;这样这个属性的设置才会起作用。也就是 flex-flow: row wrap;

属性值	描述
stretch	默认值。项目被拉伸以适应容器。
center	项目位于容器的中心。
flex-start	项目位于容器的开头。
flex-end	项目位于容器的结尾。
space-between	项目位于各行之间留有空白的容器内。
space-around	项目位于各行之前、之间、之后都留有空白的容器内。

(8)order：控制子项目的排列顺序，正序方式排序，从小到大
用css 来控制盒子的前后顺序。用order 就可以
用整数值来定义排列顺序，数值小的排在前面。可以为负值。默认值是0。

order: -1;

此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值。(移动端会再涉及）

(9)justify-content：在弹性盒对象的

元素中的局部周围留有空白
设置行内同一主轴上，有空白间隔时。除了设置float：right外，还可以设置css3的flex布局。

详细属性和demo实例可以看这里。

display {
	flex;
	justify-content: space-between;
	
}

从入门到放弃_nys

关注

6
点赞
踩
26

收藏

觉得还不错? 一键收藏
1
评论
HTML5和CSS3归纳

HTML5和CSS3归纳（仅供自己记录复习基础点）一、HTML5二、CSS3一、HTML5二、CSS3
复制链接

扫一扫

专栏目录

HTML5和CSS3归纳

HTML5和CSS3归纳（仅供自己记录复习基础点）

前言

一、HTML5

1.常用新标签

2.新增的input属性

1. 新增的type属性值

2.input常用新属性

3.多媒体标签

二、CSS3

1.文本新增属性

1.文本颜色半透明

2.文字阴影:text-shadow

2.新增背景属性

1.背景透明

2.背景缩放:background-size

3.多背景图片

3.新增选择器

1.新增伪类选择器（2种）

2.新增了伪元素选择器

4.盒模型

1.CSS3盒模型：box-sizing:

2.圆角边框

3.盒子阴影：box-shadow

5.过渡：transition

6.变形：transform

1. 2D变形

(1)移动：translate(x, y)

(2)缩放：scale(x, y)

(3)旋转：rotate(deg)

(4调整元素转换变形的原点：transform-origin

(5)倾斜：skew(deg, deg)

2. 3D变形

(1)立体旋转：rotateX(deg)、rotateY(deg)、rotateZ(deg)

(2)透视：perspective

(3)移动：translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)

7.动画：animation

8.伸缩布局

“相关推荐”对你有帮助么？

(1)立体旋转：rotateX(deg)、rotateY(deg)、rotateZ(deg)