本寒假系统接触并学习了HTML5以及CSS3的基本用法，其知识点繁杂与新颖的AI工具让我印象深刻。现作此文章分享一些学习感悟。

HTML5基础

关于HTML5的基础，实则是各类标签语法。其中包含：标题<h>，段落<p>，以及一些属性，比如插入照片<img src= alt= tittle=> 注意，其照片应放在与文档同一根目录下，或提供完整的根目录路径。且图片属性列举 如height width

插入视频 音频<video src=" "> </video> 其中文件与照片要求一致， 属性包含 controls自带播放控件；width与height；autoplay自动播放；loop循环播放；muted静音；poster设置预览图像

插入链接 <a href=" "> </a> 锚点链接需要在此加入新的属性，具体如下

此外，还包括网页的无语意标签，这类通常和CSS3配套使用。例如 div与span标签。

关于列表标签，分ul li dl三类；ul定义容器名称；li定义元素个名称。

关于表格，此类可以借助TRAE AI开发工具。

关于网页的布局，具体如下

关于表单控件，此处用于验证码场景，包含了input，button，textarea，select四个模块。

以上是关于HTML5的一些知识点，在学习过程中我还发现AI工具的强大。以上略粗浅，在后面 CSS3的内容中会详细的提及。

CSS3基础与拓展

CSS作为修饰网页布局的核心，承担着美化网页布局的重要作用。其可以分为三大模块：CSS选择器与优先级，内容文本样式，盒子模型。

1.CSS3选择器与优先级

在CSS选择器与优先级的学习中，需要注意的是以下三点：

1. CSS选择器具有层叠性：CSS 规则可以同时作用于一个元素，浏览器通过特定规则决定最终生效的样式。层叠性解决了样式冲突问题。

2. 关于伪类选择器：用户以某种方式和文档交互的时候应用，这些用户行为伪类，有时叫做动态伪类。使用场景：鼠标经过元素的时候，修改样式；表单获得焦点的时候。关于结构伪类，如：

ul li:first-child{XXXXX}first可改成last

ul li:nth-child{XXXXX} n 的取值可以是：

• 数字。 从1开始

• 关键字。 odd 奇数 even 偶数

• 公式。

• :nth-child(3n) 3的倍数，第3.6.9...个元素

• :nth-child(n+2) 第2个以及以后的元素

• :nth-child(-n+3) 前面3个元素

• 注意公式的n取值从0开始计算

3.分组选择器，可以将同属性类型选择器叠加一起，提高代码效率。

2.内容文本样式

CSS 文本样式用于控制网页中文字的外观，包括字体、颜色、对齐、间距等，主要分为两大类：字体样式和文本布局

注意： 文字是无法直接通过CSS来更改样式的，必须要用适合的标签来包裹它们，本质是修改标签样式，里面文字跟随样式变化

字体颜色：color:#fff;（白色）

字体大小：font-size:15px;

字体风格：font-style:italic;（斜体）

字体粗细：font-weight:160px;

字体修饰：text-decoration:none/underline/overline/linethrough;

水平居中：text-align: center;

垂直居中：line-height: 50px; 

字间距 ：letter-spacing: 40px;

首行缩进：text-indent: 2em;

两端对齐：text-align: justify;

行高：line-height: 2;

1.5倍间距：letter-spacing: 5px;

需要注意的是：当div有但是p没有的时候，p会继承div的文字对齐方式，当p有但是div没有的时候，p不会继承div的文字对齐方式（CSS继承性）。

3.盒子模型

盒模型是CSS中最常用的模型，也是网页板块制作的基础。上图清楚显示了盒布局的各个关系，现在需要关注两件事：区块盒子与行内盒子。

一句话解释这两个东西，就是是否换行。可以理解为去区块盒子实在这一块区域内有一个盒子，或者多个盒子，可以随意的换行。而行内盒子只能在行内编辑无法换行。并且block区块盒子可以设置width与height，当不设定这俩属性值的时候默认与父盒子保持一致。

同样的，盒模型由内容，内外边距，边框构成。内容及作者想要输入的文字或者图片，视频等；内外边距可以调整整个网页布局的合理性，并且加上边框的修饰，可以让盒子更加好看。总言而止，内边距就是如图，内容和盒子边界的距离。而外边距则就是盒子和盒子之间的距离，通常修饰网页的美化。

关于边框，这里又引申出圆角。用border-radius表示。同下列示例，border的一些修饰属性可以分为上下左右，内外边距同理。

区块元素上下边距会出现合并的情况。当两个同级元素并列排放时，其边距大于等于最大的单个边距。同样的，区块元素在嵌套时（父子关系）会出现外边距崩塌。解决方案：overflow:hidden;搞定。

现在来说盒子内容。

可以插入图片，设置background，具体如下：

在此介绍一种技术，精灵图技术。

在很多网页中，也会出现 背景渐变 的效果，用到了linear-gradient(线性渐变)radial-gradient(径向渐变)

关于阴影与过度，本质上就是修饰代码。使用box-shadow代码，选择器内的量分别为：X Y 模糊半径 扩散半径 颜色。默认外阴影，内阴影要写inset。而过度同理，hover鼠标停留加入transition代码，输入渐变时间，实现过度效果。

4.CSS布局的高级布局

关于CSS的布局，更高级的用法在此总结。

首先要说的就是display的用法，在诸多网站中用的相当频繁。用于控制网页盒子的布局排列方式，提高了CSS布局流效率。

• display:block 转化为区块元素

• display:inline转化为行内元素

• display:inline-block 转化为行内块元素

• diaplay:flex 弹性盒子，用于成排显示

这里再说一说主轴和交叉轴。可以认为，横排主轴，纵列交叉，给父盒子控制主轴交叉轴的属性可以使得子盒子按照目标样式排列。

即大部分情况如下：给父盒子设定display: flex; 给子盒子指定宽度高度，自动排列目标样式：height+width: xx px;

怎么理解呢，在传统排列方式中，会导致盒子直接纵向排列，不符合我们的要求。因此我们对父盒子进行特殊化，让他具备横向排列的属性，然后再对子盒子细化定义。进而可以让子盒子符合我们的要求。

同时，关于盒子与盒子之间的布局，对齐方式，做出以下分类：

建立好盒子后，就是对盒子属性的添加。首先是父盒子：

再就是子盒子

这里再引入gap的用法，可以用来设置行列间距。直接写gap: xxpx即可。还有 一种布局方式grid网格二维布局，在定位后面总结。

这里提一嘴，在我们对图片定义的时候，有时候会出现小白条的样子，这时候需要对图片转化为块级元素，并设置对齐方式不是基线对齐即可。[代码 : img {vertical-align:top} ;]

以上就是display：flex这一重要用法，下面是定位布局，也是比较重要的。

核心要点：子绝父相！！！

使用场景：下拉框与弹出菜单/悬浮效果

核心：子元素悬浮其他元素上方，不可以占有位置，绝对定位；父元素占原位置，相对定位。并且子元素不可随意移动，配合父元素移动位置。

语法：position: absolute;（加在子盒子上面）relative（加在父盒子上面）。

这是一种比较重要定位的用法，在网页中极其常见。添加定位可以让图片排列更加有序，层叠性明显，不再是单一的简单排列。

如何理解子绝父相？通俗来讲，可以看作子盒子悬浮在父盒子上方，不能占有定位，所以绝对定位。同时，这个盒子不能乱跑（常规情况下），要配合父盒子移动而移动。因此给父盒子添加相对定位，让父盒子占有原位，不乱跑，不乱动，不影响其他盒子。

再有2种定位，分别为粘性定位和固定定位。

固定定位

场景：固定导航栏，页面广告

语法：position: fixed；设定元素为固定定位

• 元素脱离正常流,不占据空间,其他元素按原布局排列

• 始终相对于浏览器窗口(视口)定位,滚动页面时位置不变

• 可以通过top、bottom、left、right属性进行偏移。

• 优先级:若同时设置top和bottom,仅top生效;同理left覆盖right。

粘性定位

场景：吸顶；表格抬头可见

语法:position: sticky;设定元素为粘性定位

• 元素在滚动到指定位置(如top:10px)前为相对定位,之后转为固定定位

• 父容器的overflow 需为visible,否则粘性定位失效

• 可以通过top、bottom、left、right属性进行偏移

• 须指定top,right,bottom或left四个其中之一,才可使粘性定位生效

此外，关于层叠性，也是定位布局里比较重要的一点。主要用z-index实现，主要用于悬浮效果。直接加在定位元素上，即可实现。

下来要说的是grid。现代网页样式复杂种类繁多，grid布局可以很好的将盒子排列，达到目标效果。首先是创建布局，display:grid;即可完成网格布局创建。再下来就是细节。

• grid-tenplate-columns 定义网格中的列

• grid-template-rows 定义网格中的行

然后要说的就是对齐方式，与flex布局相似，justify-content列轨道，align-content行轨道。

对于轨道属性，同理，grid-template-columns / grid-template-rows属性值。

现在可以说一说gap的用法。用于让元素之间保持间隙。可以直接写gap：xxpx；

同样的，如何实现跨格的样式呢，这里给出案例

做一下总结。

创建网格轨道

创建列轨道：grid-template-columns:100px 100px 100px;

创建行轨道：grid-template-rows:100px 100px 100px;

列轨道两端对齐：justify-content:space-between;

行轨道两端对齐：align-content:space-between

项目对齐方式

水平对齐方式：

1.justify-items:start;

2.justify-items:end;

3.justify-items:center;

4.justify-items:strech;

gap间隔

gap:20px;

gap-auto-flow:row;(默认)

gap-auto-flow:column;(竖向)

响应式布局：

核心代码：grid-template-columns:repeat(auto-fill,minmax(210px,1fr));

好。我们来好好说一说响应式。除了上面核心代码以外，还有单位的要求。

在我们以往学习中，用的都是px。现在给大家介绍几种全新单位，

• %：相对于父元素尺寸，用于容器宽度、内外边距；
• rem：相对于根元素（html）字体大小，全局适配首选；
• vw/vh：分别为视口宽度 / 高度的 1%，适配全屏布局；
• em：相对于当前元素字体大小（无设置则继承父元素）；
• vmin/vmax：适配横竖屏切换（取 vw/vh 的最小 / 最大值）。
   

响应式核心是 “自适应”：通过相对单位、媒体查询适配不同屏幕。因此，以上单位可以用于手机移动端和电脑pc端自适应的场景中，同时响应式布局不会变化。

在这里再给大家列出几种修饰按钮，可以调整光标样式。

pointer 手型（指尖朝下的小手），常用于可点击元素（如链接 <a>、按钮 <button>）。

text I 型竖线（类似文本输入光标），用于可编辑文本区域（如 <textarea>、contenteditable元素）。

wait 等待（旋转圆圈或沙漏），表示操作进行中（如加载、提交时）。

help 帮助（带问号的箭头），提示用户需要帮助（如提示信息区域）。

not-allowed 禁止（圆圈带斜线），表示操作不可用（如禁用的按钮）。

grab 抓取（手型带抓取动作），表示可拖动（如可拖拽的元素）。

grabbing 抓取中（手型收紧），表示正在拖动（配合 grab使用）。

zoom-in 放大（+号），表示放大操作（如图片预览时）。

zoom-out 缩小（-号），表示缩小操作（如图片预览时）。

5.现代网页动画效果

2D效果

平移与旋转

注意：

行内元素的布局特性（无法设置宽高、盒模型限制、transform 基准异常）会破坏旋转效果的稳定性和精确性，所以文字类要转换行内块或者块级元素。 比如字体图标需要转换。

缩放与倾斜

过渡

3D效果

旋转与透视

位移

现在要说的是动画。animation

毛玻璃与高级渐变效果

transition: 2s cubic-bezier(0.075, 0.82, 0.165, 1);

background: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);

现在在介绍几种工具。

SVG的用法。

SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形标准，由 W3C 制定，支持无损缩放、交互性和动态效果。其核心特点包括：

矢量特性：无论放大或缩小均保持清晰。文件体积小，适合网络传输，尤其适用于高分辨率设备.

可编辑性：直接通过文本编辑器修改SVG 代码，支持颜色、形状、动画参数的实时调整.

交互性：支持 JavaScript 和 CSS 控制，可实现点击、悬停等动态响应.

兼容性：主流浏览器（Chrome、Firefox、Safari）均原生支持。

使用过程中，需注意

• 简化路径：复杂 SVG（如高清插画）需简化路径，减少节点，降低文件体积；
• 样式统一：优先用 CSS 控制样式，而非内联属性，便于维护；
• 避免过度嵌套：过多分组（g）、引用（use）会增加渲染开销；
• 文本优化：嵌入文本时指定字体，避免因设备无对应字体导致显示异常。

关于CSS滤镜

关于动画时间线