2024年重学前端，万字入门 HTML+CSS+响应式网页设计_重学前端,万字入门，2024年最新大厂程序员35岁后的职业出路在哪

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

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

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

<label for="2">
    <input type="checkbox" name="personality" id="2"> 2
</label> 

<label for="3">
    <input type="checkbox" name="personality" id="3"> 3
</label>

> 
> 按钮被选中时，会在表单内提交 `indoor-outdoor=indoor` ， 即 `value` 的数据
> 
> 
> 

Indoor

## 🍒Basic CSS


### style color

CatPhotoApp

### class



> 
> 一个HTML元素可以有多个class
> 
> 
> 

CatPhotoApp

### font


[Browse Fonts - Google Fonts](https://bbs.csdn.net/topics/618668825)

### size border

<img class = “smaller-image thick-green-border”
src=“https://bit.ly/fcc-relaxing-cat”
alt=“A cute orange cat.”

### id



> 
> 一个HTML元素只能有一个id
> 
> 
> 

Submit

### padding margin border



> 
> 每个 HTML 元素所占有的矩形空间由这三个重要的属性来控制：内边距 `padding`、外边距 `margin` 、边框 `border`。
> 
> 
> `padding` 用来控制着元素内容与 `border` 之间的空隙大小。
> 
> 
> `margin` 用来控制元素的边框与其他元素之间的 `border` 距离。
> 
> 
> `margin` 设置为负值，元素会变得占用更多空间。
> 
> 
> 


![CSS box-model](https://img-blog.csdnimg.cn/img_convert/3125b9fe188577ed057d72c4d06d5e1c.gif)

.red-box {
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;

/\* 顺时针指定 \*/
padding: 20px 40px 20px 40px;

}

.blue-box {
margin-top: 40px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 40px;

margin: 20px 40px 20px 40px;

}

### attribute selectors

/* [attr=value] */

[type=‘radio’] {
margin-top: 10px;
margin-bottom: 15px;
}

### em rem



> 
> 相对单位长度，它们的实际值会依赖其他长度的值而决定。
> 
> 
> `em` 相对于当前对象内文本的字体尺寸。
> 
> 
> `rem` 相对的只是HTML根元素。
> 
> 
> [px、em、rem区别介绍 (runoob.com)](https://bbs.csdn.net/topics/618668825)
> 
> 
> 

.red-box {
background-color: red;
margin: 20px 40px 20px 40px;
padding: 1.5em;
}

### body class id important



> 
> 可以从 `body` 继承样式
> 
> 
> 

Hello World

> 
> class 会覆盖 `body` 的 CSS 样式。
> 
> 
> 在 `<style>` 标签里面声明的 `class` 顺序十分重要，之后的声明会覆盖之前的声明。 第二个声明的优先级始终高于第一个声明。
> 
> 
> id 选择器的优先级总是高于 class 选择器。
> 
> 
> 内联样式的优先级高于 id 选择器。
> 
> 
> 想保证你的 CSS 样式不受影响，你可以使用 `!important` 。
> 
> 
> 

优先级顺序：
!important > style=“” > #id > .afterClass > .class > body

Hello World!

### color hex



> 
> 十六进制编码使用 6 个十六进制字符来表示颜色，两个字符为一组，分别代表红（R）、绿（G）、蓝（B）。
> 
> 
> 可以缩写成为三个数字分别代表着红（R）、绿（G）、蓝（B）三原色。
> 
> 
> `#FF0000` 和 `#F00` 是完全相同的颜色。
> 
> 
> 

I am red!

I am green!

I am blue!

### var



> 
> 通过CSS变量一次更改多个值
> 
> 
> 

–penguin-skin: gray;

background: var(–penguin-skin);

> 
> 备用值不是用于增强浏览器的兼容性，它也不适用于 IE 浏览器。  
>  相反，它是用来让浏览器在找不到你的变量时可以显示一种颜色。
> 
> 
> 

background: var(–penguin-skin, black);

### browser fallbacks



> 
> 提供浏览器降级方案来避免浏览器兼容性问题。
> 
> 
> 比如 IE 浏览器由于不支持 CSS 变量而会忽略背景色。
> 
> 
> 在声明之前提供另一个更宽泛的值，老旧的浏览器会降级使用这个方案，新的浏览器会在后面的声明里覆盖降级方案。
> 
> 
> 

### :root



> 
> CSS 变量是可继承的，和普通的属性一样。
> 
> 
> 当创建一个变量时，变量会在创建变量的选择器里可用。 同时，在这个选择器的后代选择器里也是可用的。
> 
> 
> `:root` 是一个伪类选择器，在 `:root` 里创建变量在全局都可用，即在任何选择器里都生效。
> 
> 
> 如果在元素里创建相同的变量，会重写作用于整个页面的变量的值。
> 
> 
> 

:root {
–penguin-belly: pink;
}

.penguin {
–penguin-belly: white;
}

### @media



> 
> CSS 变量可以简化媒体查询的定义方式。
> 
> 
> 当屏幕小于或大于媒体查询所设置的值，只要我们更新变量的值，那么使用了此变量的元素样式就都会更改。
> 
> 
> 

:root {
–penguin-size: 300px;
–penguin-skin: gray;
–penguin-belly: white;
–penguin-beak: orange;
}

@media (max-width: 350px) {
:root {
–penguin-size: 200px;
–penguin-skin: black;
}
}

## 🍑Applied Visual Design


### text-align width height



> 
> CSS 里面的 `text-align` 属性可以控制文本的对齐方式：
> 
> 
> * `text-align: left;` 默认值，文本左对齐
> * `text-align: right;` 文本右对齐
> * `text-align: justify;` 可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘
> * `text-align: center;` 文本居中对齐
> 
> 
> 

h4 {
text-align: center;
height: 25px;
}

p {
text-align: justify;
}

.fullCard {
width: 245px;
}

### strong u em s



> 
> * `strong` 加粗文本，浏览器会自动给元素添加这段样式：`font-weight:bold;`
> * `u` 给文本添加下划线（可能会混淆文本和链接？避免使用），自动添加：`text-decoration: underline;`
> * `em` 强调文本（斜体），自动添加： `font-style: italic;`
> * `s` 给文本添加删除线，自动添加：`text-decoration: line-through;`
> * `hr` 创建水平线
> 
> 
> 

GoogleAlphabet

---

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University .

### rgba



> 
> RGB 值可以取在 0 到 255 之间。
> 
> 
> alpha 值即透明度，可取在 0 到 1 之间，其中 0 代表完全透明，1 代表完全不透明。
> 
> 
> 

h4 {
text-align: center;
background-color: rgba(45, 45, 45, 0.1);
padding: 10px;
font-size: 27px;
}

### box-shadow opactiy



> 
> CSS 里的`box-shadow` 属性用来给元素添加阴影，可以由逗号分隔添加多个阴影：
> 
> 
> * `offset-x` 阴影的水平偏移量
> * `offset-y` 阴影的垂直偏移量
> * `blur-radius` 模糊半径
> * `spread-radius` 阴影扩展半径
> * `color`
> * 其中两个半径可选填。
> 
> 
> 



> 
> `opacity` 属性用来设置元素的透明度，可取在 0 到 1 之间。
> 
> 
> 

#thumbnail {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
}

.links {
text-align: left;
color: black;
opacity: 0.7;
}

### text-transform




| 值 | 结果 |
| --- | --- |
| `lowercase` | “transform me” |
| `uppercase` | “TRANSFORM ME” |
| `capitalize` | “Transform Me” |
| `initial` | 使用默认值 |
| `inherit` | 使用父元素的 `text-transform` 值。 |
| `none` | \*\*Default:\*\*不改变文字。 |

h4 {
text-transform: uppercase;
}

### font



> 
> * `font-size`
> * `font-weight` 字体粗细
> * `line-height` 行高（行间距）
> 
> 
> 

p {
font-size: 16px;
font-weight: 200;
line-height: 25px;
}

### :hover



> 
> 伪类是可以添加到选择器上的关键字，用来选择特定状态的元素。
> 
> 
> 可以使用 `:hover` 伪类选择器来选取超链接的悬停状态。
> 
> 
> 

CatPhotoApp

### position


在 CSS 里一切 HTML 元素皆为盒子，也就是通常所说的盒模型。


块级元素自动从新的一行开始（比如 title、p 以及 div），行内(内联)元素排列在上一个元素后（比如 img 以及 span）。


元素默认按照这种方式布局称为文档的普通流，同时 CSS 提供了 position 属性来覆盖它。


各个方向偏移量的属性是 `left`、`right`、`top` 和 `bottom`，代表从原位置**远离**该方向。




| 值 | 描述 |
| --- | --- |
| [absolute](https://bbs.csdn.net/topics/618668825) | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
| [fixed](https://bbs.csdn.net/topics/618668825) | 生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 |
| [relative](https://bbs.csdn.net/topics/618668825) | 生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。 |
| [static](https://bbs.csdn.net/topics/618668825) | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| [sticky](https://bbs.csdn.net/topics/618668825) | 粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |


#### relative



> 
> 当元素的定位设置为 `relative` 时，允许你通过 CSS 指定该元素在当前文档流页面下的**相对**偏移量。
> 
> 
> 这样并不会改变该元素在布局中所占的位置，也不会对其它元素的位置产生影响。
> 
> 
> 

h2 {
position: relative;
bottom: 10px;
left: 15px;
}

#### absolute



> 
> 绝对定位会将元素从当前的文档流里面移除，周围的元素会忽略它。
> 
> 
> 元素的定位参照于最近的**祖先元素**。 如果它的父元素没有添加定位规则（默认是 `position: relative;`），浏览器会继续寻找直到默认的 `body` 标签。
> 
> 
> 

Search:

#### fixed



> 
> `fixed` 定位是一种特殊的 `absolute` 定位，将元素相对于**浏览器窗口**定位。
> 
> 
> 与 `absoulte` 相同的是：它与 CSS 偏移属性一起使用，并且也会将元素从当前的文档流里面移除。其它元素会忽略它的存在，这样也许需要调整其他位置的布局。
> 
> 
> 最大的不同：`fixed` 定位的元素不会随着屏幕滚动而移动。
> 
> 
> 

#navbar {
position: fixed;
top: 0px;
left: 0px;

width: 100%;
background-color: #767676;

}

### float



> 
> 设置元素的 `float` 属性，浮动元素不在文档流中，它向 `left` 或 `right` 浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
> 
> 
> 通常需要用 `width` 属性来指定浮动元素占据的水平空间。
> 
> 
> 

#left {
float: left;
width: 50%;
}
#right {
float: right;
width: 40%;
}

### z-index



> 
> 可以使用 `z-index` 属性指定元素的堆叠次序。
> 
> 
> `z-index` 的取值是整数，数值大的元素会叠放到数值小的元素上面。
> 
> 
> 

.first {
background-color: red;
position: absolute;
z-index: 2;
}
.second {
background-color: blue;
position: absolute;
left: 40px;
top: 50px;
z-index: 1;
}

### center horizontally



> 
> 可以通过 `display: block;` 把行内元素 img 变为块级元素，将图片水平居中。
> 
> 
> 

### Color


[Color model - Wikipedia](https://bbs.csdn.net/topics/618668825)


当两个颜色恰好在色环的两端时，这两个颜色就互为补色。 两个互为补色的颜色会在混合后变成灰色。


选定主色之后，在色环上选择与它的补色相邻的两种颜色与之搭配。 此种搭配既有对比，又不失和谐。


#### hsl


Hue, Saturation, Lightness


**色相值** 就是色环里面的颜色对应的从 0 到 360 度的角度值。


**饱和度** 是指色彩的纯度，也就是颜色里灰色的占比。 饱和度越高则灰色占比越少，色彩也就越纯；反之则完全是灰色。 饱和度的取值范围是表示灰色所占百分比的 0 至 100。


**亮度** 决定颜色的明暗程度，也就是颜色里白色或者黑色的占比。 其中，100% 的亮度表示纯白色，0% 的亮度则表示纯黑色，而 50% 的亮度就表示在色相中选取的颜色。



> 
> `hsl()` 使 CSS 更改颜色色调更加方便。 比如，用 `l` 给一个纯色添加白色可以调出更浅的色调；添加黑色可以创造更深的色调。 另外，还可以通过 `s` 给纯色添加灰色来同时改变颜色的深浅和明暗。
> 
> 
> 所有元素的默认 `background-color` 都是 `transparent`，可以通过修改饱和度和亮度来调整色调和阴影。
> 
> 
> 

Cooking with FCC!

• Home
• Classes
• Contact

#### linear-gradient



> 
> 第一个参数指定了颜色过渡的方向——它的值是角度。
> 
> 
> `90deg` 表示垂直渐变（从左到右），`45deg` 表示沿对角线渐变（从左下方到右上方）。
> 
> 
> 其他参数指定了渐变颜色的顺序。
> 
> 
> 

div {
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50px auto;
background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
}

> 
> `repeating-linear-gradient()` 会重复指定的渐变。
> 
> 
> 有很多参数，本测试只用到角度值和色标。
> 
> 
> 

div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50 auto;
background: repeating-linear-gradient(
90deg,
yellow 0px,
blue 40px,
green 40px,
red 80px
);
}

### background



> 
> `background` 属性支持使用 `url()` 函数作为属性值
> 
> 
> 我们可以通过链接的方式引入纹理或样式的图片。
> 
> 
> 

### transform


当使用伪类选取元素的指定状态（如 `:hover`）时，我们可以通过 `transform` 属性非常方便地给元素添加交互。


#### scale



> 
> 用来改变元素的显示比例。
> 
> 
> 

#### skewX skewY



> 
> `skewX()`：使选择的元素沿着 X 轴（横向）翻转指定的角度。
> 
> 
> `skewY()`：使元素沿 Y 轴（垂直方向）翻转指定角度。
> 
> 
> 

#top {
background-color: red;
transform: skewY(-10deg);
}

#bottom {
background-color: blue;
transform: skewX(24deg);
}

#### rotate



> 
> 旋转元素，正为顺时针，负则为逆时针。
> 
> 
> 

.heart {
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
}

### Create Graphics


#### Crescent Moon



> 
> 创建一个圆的、透明的图形，它具有模糊阴影并略微向两边递减。
> 
> 
> 如你所见，这个阴影就是新月形狀。
> 
> 
> 

#### Heart



> 
> 伪元素 `::before` 和 `::after` 可以在所选元素之前或之后添加一些内容。
> 
> 
> 必须配合 `content` 来使用，这个属性通常用来给元素添加内容诸如图片或者文字。
> 
> 
> `content` 属性仍然是必需的，用来实现形状时它的值可以是**空字符串**。
> 
> 
> 

### Animation



> 
> 给元素添加动画：animation 属性控制动画的外观，`@keyframes` 规则控制动画中各阶段的变化。
> 
> 
> `@keyframes` 通过给持续时间内的特定帧（从 0% 到 100%）加上 CSS 规则设置动画效果。
> 
> 
> 




| 8个属性值 | 说明 |
| --- | --- |
| *[animation-name](https://bbs.csdn.net/topics/618668825)* | 用来设置动画的名称，也就是在 `@keyframes` 里用到的名称。 |
| *[animation-duration](https://bbs.csdn.net/topics/618668825)* | 动画指定需要多少秒或毫秒完成 |
| *[animation-timing-function](https://bbs.csdn.net/topics/618668825)* | 设置动画将如何完成一个周期 |
| *[animation-delay](https://bbs.csdn.net/topics/618668825)* | 设置动画在启动前的延迟间隔 |
| *[animation-iteration-count](https://bbs.csdn.net/topics/618668825)* | 定义动画的播放次数 |
| *[animation-direction](https://bbs.csdn.net/topics/618668825)* | 指定是否应该轮流反向播放动画 |
| [animation-fill-mode](https://bbs.csdn.net/topics/618668825) | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式 |
| *[animation-play-state](https://bbs.csdn.net/topics/618668825)* | 指定动画是否正在运行或已暂停 |

#### fill-mode




| 值 | 描述 |
| --- | --- |
| none | 不改变默认行为。 |
| forwards | 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 |
| backwards | 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 |
| both | 向前和向后填充模式都被应用。 |

Register

#### iteration-count




| nimation-iteration-count | 描述 |
| --- | --- |
| *n* | 定义动画播放次数的数值。 |
| infinite | 规定动画应该无限次播放。 |

#### timing-function


[✿ cubic-bezier.com](https://bbs.csdn.net/topics/618668825)


使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。




| 值 | 描述 |
| --- | --- |
| linear | 动画从头到尾的速度是相同的。 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画以低速开始，以高速结束。 |
| ease-out | 动画以高速开始，以低速结束。 |
| ease-in-out | 动画以低速开始和结束。 |
| cubic-bezier(*n*,*n*,*n*,*n*) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |



> 
> `cubic-bezier` 函数包含了 1 \* 1 网格里的4个点：`p0`、`p1`、`p2`、`p3`。
> 
> 
> 其中 `p0` 和 `p3` 是固定值，代表曲线的起始点和结束点，坐标值依次为 (0, 0) 和 (1, 1)。
> 
> 
> 你只需设置另外两点的 x 值和 y 值，设置的这两点确定了曲线的形状从而确定了动画的速度曲线。
> 
> 
> 在 CSS 里面通过 `(x1, y1, x2, y2)` 来确定 `p1` 和 `p2`。
> 
> 
> 通俗的讲，将一条直线放在范围只有 1 的坐标轴中，并从中间拿 `p1` 和 `p2` 两个点来拉扯（X 轴的取值区间是 [0, 1]，Y 轴任意）
> 
> 
> 

## 🍏Applied Accessibility


### img alt



> 
> `alt` 属性可以帮助用户在图片加载失败或者不可见的情况下理解图片内容， 搜索引擎也通过它来理解图片内容，并将其加入到搜索结果中。
> 
> 
> 屏幕阅读器可以识别 `alt` 属性，朗读其中的内容，来告知视觉障碍用户图片包含的关键信息。
> 
> 
> 在图片已经有了文字说明，或者仅仅为了美化页面，`img` 仍然需要一个 `alt` 属性，但可以设置为空字符串。
> 
> 
> 对于有标题的图片，依然需要添加 `alt` 文本，这样有助于搜索引擎记录图片内容。
> 
> 
> 

### Elements


HTML5 引入了诸如 `main`、`header`、`footer`、`nav`、`article`、`section` 等大量新标签，给予开发者更多的选择，也包含辅助功能。


默认情况下，浏览器呈现这些元素的方式类似于普通的 `div`。 但是，在适当的地方使用它们会让标记文本具有更多的含义。


#### h1 ~ h6


每个页面应只有一个 `h1` 标签，用来概括说明页面的主题。


六个标题标签可以让搜索引擎获取页面的大纲。


#### main


`main` 标签用于呈现网页的主体内容，且每个页面应只有一个。


它有一个内嵌的特性，以便辅助技术快速定位到页面的主体。


如果在页面顶部看到过“跳转到主要内容”链接，那么使用 `main` 标签会自动让辅助设备具有这个跳转的功能。


#### article


`article` 是一个分段标签，用于呈现独立及完整的内容。 这个标签适用于博客、论坛帖子或者新闻文章。


删除了所有周围的上下文，这个内容仍然有意义，确定内容可以单独作为一部分。


`article` 用于独立且完整的内容，而 `section` 用于对与主题相关的内容进行分组，可以根据需要来嵌套使用。



> 
> 举个例子：如果一本书是一个 `article` 的话，那么每个章节就是 `section` 。
> 
> 
> 


当内容组之间没有联系时，我们可以使用 `div`。


#### header


`header` 可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。


`header` 应当在 HTML 文档的 `body` 标签内使用，与包含页面标题、元信息的 `head` 标签不同。


#### nav


`nav` 也是一个具有语义化特性的 HTML5 标签。


它可以使屏幕阅读器快速识别出页面中的导航信息。 它用于呈现页面中的主导航链接。


#### footer


`footer` 元素也具有语义化的特性，可以让辅助工具快速定位到它。


它位于页面底部，用于呈现版权信息或者相关文档链接。


#### audio


`audio` 标签用于呈现音频内容或音频流，它也具有语义化特性。 音频内容也需要备用文本，供聋哑人或听力困难的人使用。


`audio` 标签支持 `controls` 属性， 用于显示浏览器默认播放、停止和其他控制，以及支持键盘功能。


**注意：** 音频片段的播放速度可能会快到难以理解，但是对于屏幕阅读器用户来说这是正常速度。

### figure figcaption



> 
> `figure` 标签以及 `figcaption` 标签一起用于展示可视化信息（如：图片、图表）及其标题。
> 
> 
> 

Master Camper Cat demonstrates proper form of a roundhouse kick.

### label for



> 
> `label` 标签的文本内容通常会是表单组件的名称或标签。
> 
> 
> 这些文本表明了组件的意义，也提升了表单的可访问性。
> 
> 
> `label` 标签的 `for` 属性将标签与表单组件绑定，屏幕阅读器也会读取 `for` 属性的属性值。
> 
> 
> 为了让标签可以在点击的时候也选中输入框，可以将单选按钮 input 标签嵌套在了 `label` 标签里面。 或者使用 `for` 属性，使其与表单组件的 `id` 属性值相同。
> 
> 
> 

Email:

### fieldset legend



> 
> `fieldset` 标签包裹整组单选按钮，使用 `legend` 标签来提供分组的描述，以便屏幕阅读器用户会阅读 `fieldset` 元素中的每个选项。
> 
> 
> 而当选项的含义很明确时，如“性别选择”，使用包含 `for` 属性的 `label` 标签就足够了。
> 
> 
> 

Choose one of these three items: Choice One
Choice Two
Choice Three

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

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

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

on

figure 标签以及 figcaption 标签一起用于展示可视化信息（如：图片、图表）及其标题。

<figure>
    <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
    <br>
    <figcaption>
        Master Camper Cat demonstrates proper form of a roundhouse kick.
    </figcaption>
</figure>

label for

label 标签的文本内容通常会是表单组件的名称或标签。

这些文本表明了组件的意义，也提升了表单的可访问性。

label 标签的 for 属性将标签与表单组件绑定，屏幕阅读器也会读取 for 属性的属性值。

为了让标签可以在点击的时候也选中输入框，可以将单选按钮 input 标签嵌套在了 label 标签里面。 或者使用 for 属性，使其与表单组件的 id 属性值相同。

<label for="email">Email:</label>
<input type="text" id="email" name="email">

<input type="submit" name="submit" value="Submit">

fieldset legend

fieldset 标签包裹整组单选按钮，使用 legend 标签来提供分组的描述，以便屏幕阅读器用户会阅读 fieldset 元素中的每个选项。

而当选项的含义很明确时，如“性别选择”，使用包含 for 属性的 label 标签就足够了。

<form>
    <fieldset>
        <legend>Choose one of these three items:</legend>
        <input id="one" name="items" type="radio" value="one">
        <label for="one">Choice One</label>
        <br>
        <input id="two" name="items" type="radio" value="two">
        <label for="two">Choice Two</label>
        <br>
        <input id="three" name="items" type="radio" value="three">
        <label for="three">Choice Three</label>
    </fieldset>
</form>


[外链图片转存中...(img-8vI8MaPF-1715678121850)]
[外链图片转存中...(img-c8rEa8qH-1715678121851)]

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

**[需要这份系统化的资料的朋友，可以添加戳这里获取](https://bbs.csdn.net/topics/618668825)**


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