2024年最新HTML CSS整理笔记_html css 整理(1)，HarmonyOS鸿蒙开发视频教学

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

1.除IE外通用写法
类名或标签名::placeholder {color: red;}
2.加兼容前缀写法

css超出一行显示省略号：
给定宽度(width:100px)、
超出隐藏（overflow:hidden）、
强制在同一行显示（white-space: nowrap）、
省略号（text-overflow:ellipsis）

——常见字体单位——
1.em
相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：该div继承的父级字体大小*1.5。（根据他爸）

2.rem
r即root，始终相对于根节点html的font-size进行缩放。（根据祖先html）

3.vh
vh指当前屏幕可见高度的1%，即 height:100vh == height:100%;
区别：当元素没有内容时候，若设置height:100%该元素高度不会被撑开。但设置height:100vh，该元素会被撑开和屏幕高度一致。

4.vw
Viewport width 视窗宽度。1vw = 视窗宽度的1%，1vw就是当前屏幕宽度的1%，
对比：
width:100%; 设置元素宽度占父元素的宽度100%。
width:100vw; 相对于屏幕可见宽度来设置，所以会出现50vw 比50%大的情况。

从这里往下是分类整理

——1.HTML5基础——
5.在网页中，HTML决定结构和内容，CSS设定网页的表现样式，JavaScript控制网页的行为。
6.必须位于HTML文档第一行。
7.标签：用于方便浏览器解析或搜索引擎搜索，一般放置于中，用"名称/值"方式：
(1)表示文档内容类型、字符串编码信息 如：
(2)为搜索引擎定义关键词:

(3)为网页定义描述内容:

(4)定义网页作者:

(5)每30秒中刷新当前页面:

8.字体样式标签：字体变粗、和都有斜体的效果，区别表示对内容的强调
9.注释
10.常用转义字符：
  //空格
> //大于号>
< //小于号<
" //双引号"
© //版本符号

11.常用图片格式：JPG、GIF、PNG、BMP
12.图片标签，必须要有src和alt属性：

13.超链接标签(target指定在哪个窗口打开 值有_self自身窗口、_blank新建窗口)
附连接的文本或图像
14.链接地址
(1)绝对路径(指向目标地址的完整描述 多指向本站点外的文件
如百度)、
(2)相对路径(一般指向本站点内的文件,如登陆)
(3)相对路径中"…/“表示当前目录的上级目录，”…/…/“表示上上级目录
15.超链接的应用场合：
(1)页面间链接：如为您跳转到登录页
(2)锚链接：
先在目标位置B设置标记如：这里是目标位置，
然后在A位置设置链接路径href属性值为”#标记名"如：<a href="#marker"当前位置A
(3)功能性链接：单击时启动本机自带的应用程序如QQ、电子邮箱等
如电子邮件链接：“mailto:电子邮件地址”

16.元素分类
(1)块元素：如

无论内容有多少，该元素都独占一行(一块)。
块状元素特点：如果没有设置自身宽度，则显示为父容器的100%。
(2)行内元素：如 显示宽度由自己的内容决定，其他元素可以排在它后面。

16.元素类型转换：
(1)块状元素转为内联元素：display: inline;
(2)内联元素转为块状元素：display: block;
(3)把元素设为内联块状元素： display: inline-block;
(就是同时具备内联元素、块状元素特点，如img、input)

——2 列表、表格、媒体元素——
17.三种列表：
(1)有序列表

1. 
   (2)无序列表
   • ul中只能嵌套li，而li可以嵌套任意标签。
     (3)定义列表

     是标题及列表项的结合。
     18.表格基本结构：单元格、行、列
     (1)
     跨行(竖跨)：，两者都要删除被合并的其他单元格。
     (4)表格特点：同行单元格高度一致且水平对齐，同列单元格宽度一致且垂直对齐。

     	(2)HTML5中已废除table的border属性，用css控制边框宽度。 (3)跨列(横跨)：	内容	内容

19.视频元素：
(1)controls属性提供播放暂停和音量控件、autoplay属性自动播放、loop属性循环播放
你的浏览器不支持video标签
(2)source元素链接不同的视频文件，浏览器会自动选择第一个可识别的格式：


你的浏览器不支持video标签

20.音频元素：使用语法和视频元素一样，只要把video换成audio即可。

21.HTML5的结构元素(先划分结构再写内容)：
header(头部)、footer(脚部)、
section(独立区域)、article(独立文章内容)、
aside(相关内容或应用,常用于侧边栏)、nav(导航类辅助内容)

22.框架:方便在页面中引用站外的页面内容。

23.和锚链接的结合：使锚链接的内容在iframe框架中打开 点击在框架中打开

——3 表单——
24.表单标签form：

表单内容 (1)action="url"属性意为把表单提交到某个页面,method=get|post意为向服务器发送数据的方式。 (2)提交方法：get提交,表单数据会在地址栏url中显示；而post提交不会显示，所以post提交更安全。 (3)enctype="text/plain"指enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。text/plain 空格转换为加号+，但不对特殊字符编码。

24.表单元素：
(1)表单元素标签的属性：
type(默认text,其他password,email,checkbox,radio,button,submit,reset,file,image,url,hidden,number,range,search等)、name、value(可选,该元素的初始值)、size(该元素的初始宽度)、maxlength(可输入的最大字符数)、checked(按钮被选中)
(2)列表框标签：
中至少包含一个。在有多行选项需滚动查看时，size属性设置可提示看到的行数，selected属性默认选中该列表项。
(3)按钮：button普通(要和事件如onclick关联使用),submit(提交表单到action指定的url并传递表单数据),reset重置。要求美观可使用图片按钮如
(4)多行文本域：不能用value属性赋初始值

自我评价

(5)数字number：限制输入的数据为数字，设定最大值最小值、合法的数据间隔step或默认值等

(6)滑块range：作用和数字number一样，只是外观显示为用滑动条选择数值

(7)search搜索框:在任意页面中用于输入搜索关键词的文本框

(8)文件域：多用于文件上传


(9)当表单数据包含普通数据、文件数据等多部分内容时，要设置表单的enctype编码属性为 multipart/form-data,表示把表单数据分为多部分提交。
(10)表单隐藏域hidden：数据不会页面中显示，但会随表单一同提交。

(11)表单元素 只读属性readonly、禁用disabled
(12)W3CHTML5标准中，规定对布尔类型的属性，属性值可以省略。
(13)表单元素的标注label：当点击标注的文本时，浏览器会自动对焦关联的表单元素，for属性规定label与哪个表单元素绑定。name和id属性必需。
女

24.HTML5表单新标签

供用户输入的表单 输入域 文本域 (多行输入) 定义 元素的标签，一般为输入标题 定义一组相关的表单元素，并使用外框包含起来 定义 元素的标题 下拉选项列表 选项组 下拉列表中的选项 点击按钮 指定一个预先定义的输入控件选项列表 定义了表单的密钥对生成器字段 计算结果

25.表单验证
(1)好处：减轻服务器的压力；保证数据的可行性和安全性。
(2)placeholder:为文本框提示用户输入

(3)required：规定文本框不能为空

(4)pattern：输入的内容必须符合正则表达式自定义的规则
规定以13、15开头的11位数字

——4 CSS3基础——
26.CSS：Cascading Style Sheet层叠样式表,又称风格样式表Style Sheet，用于设计网页风格。
27.CSS3的基本语法结构：
(1)CSS中注释为 /内容/
(2)CSS规则由选择器、声明组成。
(3)声明必须放在大括号{}中，声明可以是一或多条。
(4)每条声明由一个属性和值组成，属性和值用冒号:分开，每条语句以分号;结尾如

28.在HTML中引入CSS样式的方式：
(1)行内样式：直接在标签中用style属性设置CSS 如

字体大小

(2)内部样式表：把css写在head的

29.样式优先级：“就近原则”，行内样式>内部样式表>外部样式表
当有很多样式时，用 !important 可以为某一个样式覆盖掉其他所有样式。
如 #textcolor{ clor:pink !important;}

30.CSS选择器命名规范：驼峰命名法，用语义化单词命名且不能和ID选择器同名.
31.CSS3的基本选择器
(1)标签选择器：以标签名作选择器的名称如 h1{color:red;}
(2)类选择器：选择器名可自定义如 .red{color:red;}同时要设置<标签 class=“red”>内容</标签>
(3)ID选择器：选择器名可自定义如 #red{color:red;}同时要设置<标签 id=“red”>内容</标签>，但同一个id属性的选择器在页面中只能用一次。

32.基本选择器的优先级：ID选择器>类选择器>标签选择器
31.CSS3的高级选择器
1.层次选择器：
(1)后代选择器A B{ }：中间用空格隔开，只要是A的后代元素都会被选中。
(2)子选择器A>B{ }：只能选择A的子元素。
(3)相邻兄弟选择器A+B{ }：只用于A后面一个同级元素
(4)通用兄弟选择器A~B{ }：用于A后面所有的同级元素

2.结构伪类选择器：根据文档对象模型DOM的节点(元素级别)来操作。
(1)B:first-child	作为父元素的第一个子元素B，作用和(3)相似
(2)B:last-child	作为父元素的最后一个子元素B
(3)A B:nth-child(n)	在父级中查第n个子元素是不是B，不分类型
(4)B:first-of-type 	选择父元素内B类型的第一个元素B
(5)B:last-of-type	选择父元素内B类型的最后一个元素B
(6)A B:nth-of-type(n) 在父级里先是不是B类型，再看位置n

3.属性选择器：
(1)A[arrt]  选择包含属性arrt的A标签(也可写多个属性，但要同时存在)
(2)A[arrt = val]  选择包含属性arrt,且属性值=val(区分大小写)的A标签
(3)A[arrt ^= val] 选择包含属性arrt,且属性值以val开头的任意字符串
(4)A[arrt $= val] 选择包含属性arrt,且属性值以val结尾的任意字符串
(5)A[arrt *= val] 选择包含属性arrt,且属性值包含val字符串的A标签

——5 CSS3美化网页——
32.CSS3设置文本样式：
(1)标签：用来设置行内元素(或几个文字)的样式。
(2)字体样式：
font-size：常用单位px
font-family：若同时设中英文字体，英文字体要设置在中文字体前面
font-style：normal标准、italic斜体、oblique倾斜
font-variant：small-caps; 字体设置为新型的大写字母，所有小写字母都转换为大写。
font-weight：normal标准、bold粗、bolder更粗、lighter细、100-900数字越大越粗
font：一次设置字体所有属性，顺序为"字体风格-粗细-大小-类型"
如 font:italic bold 36px “宋体”;

(3)用font简写方式至少要指定 font-size和 font-family 属性，其他的属性(如font-weight、font-style、font-variant、line-height)如未指定将使用默认值。缩写时 font-size 与 line-height中间要加"/"斜扛如 "12px/1.5em"

32.Text-transform：控制文本的大小写：
none 默认，定义既有小写字母也有大写字母的标准文本(原文)
capitalize 每个单词以大写字母开头
uppercase 全部为大写字母
lowercase 全部小写字母
inherit 从父元素继承text-transform属性的值。

32.direction属性：规定文本的方向/书写方向。
ltr 文本方向从左到右
rtl 方向从右到左
inherit 继承父元素direction属性的值。
32.文字排版
(1)适用大多数浏览器：
从左向右 writing-mode: vertical-lr;
从右向左 writing-mode: vertical-rl;
(2)只适用IE浏览器:
从左向右 writing-mode: tb-lr;
从右向左 writing-mode: tb-rl

33.排版网页文本
(1)color文本颜色:
RGB：如color:#FF0000; 另一种方法rgb(r,g,b)其中三个参数取整0~255
RGBA：在RGB基础上加控制alpha透明度的参数，取值0~1，0表示完全透明
(2)text-align水平对齐:
left左(默认)、center中间、right右、justify两端对齐
(3)text-indent首行缩进：2em或2px 缩进两个字符
(4)text-height文本行高: 单位px或 按倍数(行高是字体大小的倍数)
(5)text-decoration文本装饰：
none默认无、underline下划线、overline上划线、line-through删除线

(2)vertical-align垂直对齐：只能作用于<table>表格单元格的对象:
	top顶、middle居中、bottom底

(4)text-shadow文本阴影：
语法"text-shadow:阴影颜色 x轴位移(x-offset) y轴位移(y-offset) 模糊半径(blur-radius);"
如text-shadow: blue 10px 10ox 2px;
(5)查询浏览器是否支持HTML5及CSS3属性的网址www.caniuse.com

33.CSS3设置超链接样式：
伪类:根据标签处于某种行为或状态来修饰超链接样式。其他标签如p可以使用hover
和active。
语法"标签名:伪类名{声明;}"
(1)a:link 未访问前的超链接
(2)a:visited 访问过后
(3)a:hover 鼠标移到链接上
(4)a:active 鼠标点击未释放
(5)设置伪类的顺序：a:link - a:visited - a:hover - a:active
(6)虽有四种样式,但实际开发中只设置标签选择器样式、鼠标悬浮链接样式

34.CSS3设置列表样式
(1)list-style-type：列表项标记类型
none无符号、decimal数字、disc实心圆(默认)、circle空心圆、square实心正方形
(2)list-style-image：用图像做列表项标记
(3)list-style-position：设置列表项标记的位置
(4)list-style：一次设置列表的所有属性 (属性值为none时说明列表无样式)
顺序为 list-style-type + list-style-position + list-style-image

35.

：可用于网页布局，把HTML文档分成独立不同的部分。
36.CSS3设置背景样式：
(1)background-color：背景色不能继承，其默认值是透明transparent
(2)background-image：url(图片路径)、none(不显示背景图像)
(3)background-repeat：背景图像重复平铺
repeat(沿水平和垂直方向)、no-repeat(不平铺,只显示一次)、
repeat-x(只沿水平方向)、repeat-y(只沿垂直方向)、

(4)background-position：背景图的位置(X水平Y垂直方向的偏移量，如果只有一个方向关键字，则默认另一个关键字为center)
 1.Xpos Ypos:如 0px 0px：默认无偏移,从左上角出现
		   30px 40px：正向偏移,图像向右和向下出现
		   -50px -60px：反向偏移,图像向左和向上出现
 2.X% Y%：如30% 50%(水平方向偏移30%，垂直方向居中)
 3.X水平关键词(left,center,right)、Y垂直关键词(top,center,bottom)

(5)background：一次设置背景的所有属性 
(6)background-size背景图片尺寸：
auto(保持图片原尺寸,不易失真)、cover(放大填满容器标签)、
百分比percentage、contain(按照图片本身的宽高比例适应定义背景的区域)

37.gradient线性渐变：颜色沿着一条直线方向过渡
(1)常规语法：" linear-gradient(position, color1, color2,…)"
(2)浏览器兼容语法：" -兼容前缀-linear-gradient(position,color1,color2,…)"
(3)渐变的直线方向：
to left 从右向左、to top left 向左上方、to bottom left 向左下方、
to right 从左向右、to top right向右上方、to bottomo right向右下方、
to bottom从上向下、to top 从下向上、
38.CSS3径向渐变radial-gradient：圆形渐变，颜色从一个起点朝所有方向混合，语法和线性渐变相似。

———6 盒子模型———
39.盒子模型的组成：
content网页内容、border边框、padding内边距、margin外边距
(1)边框border：
border-color 边框颜色：如border-color:#369 #000 #111 #F00;按“上右下左顺时针”设置
border-width 边框粗细：如细thin、中等medium、粗的thick
border-style 边框样式：常用none无边框、dotted点线边框、dashed虚线边框、solid实线边框
border 简写:如下边框border-bottom:9px red dashed;四条边框border:9px blue solid;
(2)margin外边距：盒子边框以外和其他盒子间的距离
margin-top:上外边距、margin-bottom：下外边距
margin-left：左外边距、margin-right：右外边距
margin：简写"上右下左"
auto：设置盒子在它的父容器里居中显示。如margin:0px auto;让整个盒子居中。
如果将元素的 margin设为负值，则元素会变大。
(块元素可以把左右页边距设置为"自动"中心对齐。margin:auto;但前提宽度不能是100%)

注意：很多标签都有自身默认的外边距，所以一般用并集选择器统一设置这些标签的外边距为0px,这样不会产生不必要的空隙。
如清除body和h2自带的外边距 body,h2{margin:0px;}

(3)padding内边距：
padding-left、padding-right、padding-top、padding-bottom、
padding"上右下左"

40.盒子模型的尺寸：
增加边框、内边距、外边距后不会影响内容区域的尺寸，但会增加盒子模型的总尺寸。
(1)内盒总尺寸 = border(上下/左右)+padding(上下/左右)+内容宽/高度
(2)整个盒子的宽度 = 内容宽度+左右padding+左右边框border+左右margin

41.box-sizing拯救布局
(语法)box-sizing:content-box、border-box、inherit
(1)content-box：盒子的宽度或高度=border+padding+(margin)+width/height
(2)border-box：盒子的宽或高度等于元素内容的宽或高度
(即 该内容宽/高度=盒子宽/高度-border-padding )
(3)inherit：使元素继承父元素的盒子模型模式。

42.border-radius圆角边框：语法和边框相似，只是四个边框带圆角
(语法)border-radius:length{1~4个数字};
(1)用border-radius制作特殊图形
圆形：元素的宽度和高度必须相同。圆角半径为元素宽度的一半，或直接设圆角半径为50%
半圆形：元素的高度是宽度的2倍，且圆角半径为元素的宽度值。
扇形：即制作四分之一圆形。"三同"元素宽度、高度、圆角半径 “一不同”

43.盒子阴影：和文本阴影相似
(语法)box-shadow:inset x-offset y-offset blur-radius color;
inset：内部阴影，可选。
x-offset：X轴水平位移，正值在右，负值在左。
y-offset：Y轴垂直位移，正值在下，负值在上。
blur-radius：模糊半径可选，只能>=0 值越大阴影向外面积越大,边缘越模糊。

——7 浮动——
44.标准文档流：元素根据块元素或行内元素的特性从上到下，从左到右的方式自然排列。
45.display属性：用于指定标签的显示方式
block：块元素的默认值，该元素前后自带换行符
inline：行内元素的默认值，元素会显示为行内元素
inline-block：行内块元素，兼具行内元素和块元素的特性
none：元素不会显示

46.Float：指定网页元素向哪个方向浮动
left左、right右、none默认无(元素不浮动 显示在其文本出现的位置)
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果是右浮动，后面的文本流将环绕在它左边：

47.clear清除浮动：当子元素全部浮动了，父级将包不住子元素会造成边框塌陷，所以要清除浮动元素对其他元素的影响。
48.clear属性：规定元素的哪一侧不允许其他浮动元素。
left(左侧不允许浮动元素)、right(右侧不允许)、
both(左右都不允许，常用于文本在图片下方显示)、
none(允许浮动元素出现在两侧)

49.解决父级边框塌陷的方法：
(1)浮动元素后加空的div，该div设样式clear:both;margin:0px;padding:0px;
(2)设置父元素固定高度把边框撑开。
(3)父级添加overflow属性:设置外层盒子的overflow:hidden。但此方法不能用于有下拉列表框的场景。
(4)父级用伪类after设样式(推荐)

50.Overflow属性：溢出处理，也可用于扩展盒子高度。
1) visible 默认溢出内容可见，显示在盒子外面
2) hidden 多出来的内容被隐藏且没有滚动条
3) scroll 有垂直水平2条滚动条，可查看多余内容
4) auto 如果内容溢出，自动显示滚动条(只有垂直条)查看
5) inherit 继承父特性

————8 定位网页元素————
51.Position属性：指定盒子的位置，相对它父级的位置或它自身应该在的位置。
(1)static 默认无定位，元素按照标准文档布局。
(2)relative相对定位
a.特性:
1.以标准文档流排版为基础，相当于它在原来位置偏移指定的距离。
2.元素位置偏移后，仍会保留原位置。
3.层级提高，可以遮盖标准文档流元素和浮动元素。
b.使用场景：
相对定位可以不设偏移量，让后面的绝对定位以它为祖先元素作基准定位。
c.语法 position:relative,指定偏移量时：水平left(正值向右移)、right(正值向左),垂直top(正值向下)、bottom(正值向上)。如
div{
position: relative;
top:-20px;
left:20px;
}
(3)absolute绝对定位
a.特性：
1.以已定位的祖先元素作基准定位，如果没有定位的祖先元素，则以浏览器窗口为基准定位。
2.元素位置偏移后，不保留原位置(其他元素可以用它原来的空位)
3.层级提高，可以遮盖标准文档流元素和浮动元素。
4.设置绝对定位的元素脱离文档流，对其他盒子的定位无影响
b.使用场景：下拉菜单、焦点图轮播、弹出数字气泡、特别花边等。

(4)fixed固定定位
a.特性：直接以浏览器窗口为基准定位，偏移位置不受窗口滚动条滚动的影响。
b.使用场景：窗口边缘的固定广告、返回顶部图标、边缘固定导航栏等。

52.z-index属性：设置定位元素的堆叠顺序。默认值0，值大的层位于值小层的上方。
(1)网页中的元素都含有两个堆叠层级，一个是未设置绝对定位时所处的环境，此时z-index是0；另一个是设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定。

53.设置元素透明度的方法(通常两种方法搜设置以适应所有浏览器兼容)
(1)opacity:x x值为0~1，值越小越透明
(2)filter:alpha(opacity=x) x值为0~100，值越小越透明

——9 CSS3做网页动画——
54.transform变形：
指效果的集合，如平移、旋转、缩放、倾斜效果。
语法 transform:[transform-function]*;
其中transform-function是变形函数，如要设置多个，则中间以空格分开。在用2D变形时要加浏览器兼容性前缀。

常用2D变形函数如下：
(1)translate(tx,ty)：
平移函数，将元素从原位置(基于X,Y坐标)移动到指定位置上。
tx表示X轴(横坐标)上移动的向量长度，正值向右，负值向左。
ty表示Y轴(纵坐标)上移动的向量长度，正值向下，负值向上。

(2)scale(sx,sy)：
缩放函数，定义宽高度(元素尺寸)的缩放比例，默认值1。0~0.99缩小，大于1放大。
sx表示宽度即横坐标方向的缩放量。
sy表示高度即纵坐标方向的缩放量。

(3)rotate(a)；
旋转函数，只取一个值为度数值,单位deg表示角度°
正值顺时针转，负值逆时针转。
rotate函数只旋转，不改变元素形状。

(4)skew(ax,ay)：
倾斜函数，取值为度数值，单位deg
ax表示水平方向即X轴的倾斜角度。
ay表示垂直方向即Y轴的倾斜角度。
55.3D变形函数：translate3d()平移函数、scale3d()缩放函数、rotate3d()旋转函数

56.transition过渡：
指动画转换的过程，如渐现、渐弱、动画快慢等。
通过指定属性的初始状态、结束状态，在两个状态间通过平滑过渡的方式实现动画。
语法:[transition-property transition-duration
transition-timing-function transition-delay]*
(速记法)transition: 过渡属性 过渡用时 过渡的动画函数 过渡的延迟时间

主要包括四个属性值：
(1)transition-property：
过渡属性，设置过渡或动态模拟的CSS属性
(2)transition-duration：
过渡用时，从旧属性到新属性的用时，单位为s
(3)transition-timing-function：
指定过渡函数、过渡速度,有以下方式：
ease 速度由快到慢，逐渐变慢(默认)
liner 匀速
ease-in 越来越快(渐显)
ease-out 越来越慢(渐隐)
ease-in-out 先加速再减速(渐显渐隐)
(4)transition-delay：设置过渡是否延迟时间执行。
注意：transition-duration指完成过渡需要的时间；transition-delay指过渡在什么时间之后触发。

57.总结如何用transition实现过渡动画：
(1)在默认样式中声明元素的初始状态。
(2)声明过渡元素之中状态样式，如悬浮状态
(3)在默认样式中通过添加过渡函数，添加不同的样式。

58.过渡的触发机制：
(1)伪类触发: :hover、 :active、 :focus、 :checked等
(2)媒体查询：通过@media属性判断设备的尺寸、方向等。
(3)JavaScript触发：用JavaScript脚本触发。

59.animation动画
animation制作动画的步骤:
(1)通过类似Flash动画的关键帧(@keyframes)声明一个动画；
其中@keyframes称为关键帧，可以设置多段属性。语法
@keyframes 动画名称{
from{ //css样式代码 }
百分比1{ //css样式 }
百分比2{ //css样式 }
100%{ //css样式 }
}
(2)找到要设置动画的元素，调用关键帧已声明的动画。
如 animation: spread(动画名) 2s linear(匀速);

60.animation动画的语法和属性：
" animation: 动画名称 播放时间 播放方式 开始播放的时间 播放次数 播放方向 播放状态 动画时间之外的状态 "
其中属性分别为：
animation-name 动画名称、
animation-duration 播放时间、
animation-timing-function 播放方式、
animation-delay 开始播放的时间、
animation-iteration-count 播放次数(无限次用infinite)、
animation-diriection 播放方向、
animation-play-state 播放状态、
animation-fill-mode 动画时间之外的状态、

—— 其他HTML部分——
utf-8 和 utf8的使用
只有MySQL可以用"utf8"，但其他地方一律使用大写"UTF-8"。
网页推荐使用长后缀名.html

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

状态、
animation-fill-mode 动画时间之外的状态、

—— 其他HTML部分——
utf-8 和 utf8的使用
只有MySQL可以用"utf8"，但其他地方一律使用大写"UTF-8"。
网页推荐使用长后缀名.html

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

[外链图片转存中…(img-614om1YA-1715707629753)]
[外链图片转存中…(img-4fzTBOsI-1715707629754)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取