HTML表单标签详解：如何用HTML标签打造互动网页？

这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

世界微尘里

吾宁爱与憎

- 2024.03.18 -

在互联网的世界中，表单是用户与网站进行互动的重要桥梁。无论是注册新账号、提交反馈、还是在线购物，表单都扮演着至关重要的角色。在网页中，我们需要跟用户进行交互，收集用户资料，此时就需要用到表单标签。

HTML提供了一系列的表单标签，使得开发者能够轻松地创建出功能丰富的表单。今天我们就来深入探讨这些标签，了解它们的作用以及如何使用它们来构建一个有效的用户界面。

一、表单的组成

在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息三个部分构成。

表单域

表单域是一个包含表单元素的区域
在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递
<form>会把它范围内的表单元素信息提交给服务器

表单控件

这些是用户与表单交云的各种元素，如<input>（用于创建不同类型的输入字段）、<textarea>（用于多行文本输入）、<button>（用于提交表单或执行其他操作）、<select>和<option>（用于创建下拉列表）等。

提示信息

这些信息通常通过<label>标签提供，它为表单控件提供了描述性文本，有助于提高可访问性。<label>标签通常与<input>标签一起使用，并且可以通过for属性与<input>标签的id属性关联起来。

这三个部分共同构成了一个完整的HTML表单，使得用户可以输入数据，并通过点击提交按钮将这些数据发送到Web服务器进行处理。

二、表单元素

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。下面就来介绍HTML中常用的表单元素。

1、<form>标签：基础容器

作用：定义一个表单区域，用户可以在其中输入数据进行提交。

<form action="submit.php" method="post">

其中action属性指定了数据提交到的服务器端脚本地址，method属性定义了数据提交的方式（通常为GET或POST）。

2、<input>标签：数据输入

<input>标签是一个单标签，用于收集用户信息。允许用户输入文本、数字、密码等。

<input type="text" name="username" placeholder="请输入用户名">

type属性决定了输入类型，name属性定义了数据的键名，placeholder属性提供了输入框内的提示文本。

<input>标签的属性

下面举个例子来说明：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<form>
用户名：<input type="text" value="请输入用户名"><br>
密码：<input type="password"><br>
性别：男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"><br>
爱好：吃饭<input type="checkbox"> 睡觉<input type="checkbox"> 打豆豆<input type="checkbox"><br>
<input type="submit" value="免费注册">
<input type="reset" value="重新填写">
<input type="button" value="获取短信验证码"><br>
上传头像：<input type="file">
</form>
</body>
</html>

3、<label>标签：关联说明

它与输入字段如文本框、单选按钮、复选框等关联起来，以改善网页的可用性和可访问性。<label>标签有两种常见的用法：

1）包裹方式：

在这种用法中，<label>标签直接包裹住关联的表单元素。例如：

<label>用户名：<input type="text" name="username"></label>

这样做的好处是用户点击标签文本时，关联的输入字段会自动获取焦点，从而提供更好的用户体验。

2）使用for属性关联：

在这种用法中，<label>标签通过for属性与目标表单元素建立关联，for属性的值应与目标元素的id属性相匹配。例如：

<label for="username">用户名：</label><input type="text" id="username" name="username">

这样做的优势是单击标签时，相关的表单元素会自动选中（获取焦点），从而提高可用性和可访问性。

4、<select>和<option>标签：下拉选择

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下拉列表。

注意点：

<select>中至少包含一对<option>
在<option>中定义selected=“selected”时，当前项即为默认选中项

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
籍贯：
<select>
<option>山东</option>
<option>北京</option>
<option>西安</option>
<option selected="selected">火星</option>
</select>
</form>
</body>
</html>

5、<textarea>标签：多行文本输入

当用户输入内容较多的情况下，我们可以用表单元素标签替代文本框标签。

允许用户输入多行文本。

<textarea name="message" rows="5" cols="30">默认文本</textarea>

rows和cols属性分别定义了文本区域的行数和列数。

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
今日反馈：
<textarea>请在此输入内容</textarea>
</form>
</body>
</html>

6、<button>标签：按钮控件

创建一个可点击的按钮，通常用于提交或重置表单。它允许用户放置文本或其他内联元素（如<i>、<b>、<strong>、<br>、<img>等），这使得它比普通的<input type="button">具有更丰富的内容和更强的功能。

<button type="submit">提交</button>

type属性为submit时表示这是一个提交按钮。

7、<fieldset>和<legend>标签：分组和标题

通常用于在HTML表单中对相关元素进行分组，并提供一个标题来描述这个组的内容。

<fieldset>标签：该标签用于在表单中创建一组相关的表单控件。它可以将表单元素逻辑分组，并且通常在视觉上通过围绕这些元素绘制一个边框来区分不同的组。这种分组有助于提高表单的可读性和易用性。

<legend>标签：它总是与<fieldset>标签一起使用。<legend>标签定义了<fieldset>元素的标题，这个标题通常会出现在浏览器渲染的字段集的边框上方。<legend>标签使得用户更容易理解每个分组的目的和内容。

代码示例：

<form>
<fieldset>
<legend>个人信息</legend>
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email"><br><br>
</fieldset>
<fieldset>
<legend>兴趣爱好</legend>
<input type="checkbox" id="hobby1" name="hobby1" value="music">
<label for="hobby1">音乐</label><br>
<input type="checkbox" id="hobby2" name="hobby2" value="sports">
<label for="hobby2">运动</label><br>
<input type="checkbox" id="hobby3" name="hobby3" value="reading">
<label for="hobby3">阅读</label><br>
</fieldset>
<input type="submit" value="提交">
</form>

在这个示例中，我们使用了两个<fieldset>元素来组织表单的不同部分。第一个<fieldset>包含姓名和邮箱字段，而第二个<fieldset>包含三个复选框，用于选择用户的兴趣爱好。每个<fieldset>都有一个<legend>元素，用于提供标题。这样，用户在填写表单时可以更清晰地了解每个部分的内容。

想要快速入门前端开发吗？推荐一个前端开发基础课程，这个老师讲的特别好，零基础学习无压力，知识点结合代码，边学边练，可以免费试看试学，还有各种辅助工具和资料，非常适合新手！点这里前往学习哦！云端源想

8、<datalist>标签：预定义选项列表

<datalist>标签是HTML5中引入的一个新元素，它允许开发者为输入字段提供预定义的选项列表。当用户在输入字段中输入时，浏览器会显示一个下拉菜单，其中包含与用户输入匹配的预定义选项。

使用<datalist>标签可以提供更好的用户体验，因为它可以帮助用户选择正确的选项，而不必手动输入整个选项。此外，<datalist>还可以与<input>元素的list属性结合使用，以将预定义的选项列表与特定的输入字段关联起来。

下面是一个使用<datalist>标签的代码示例：

<form>
<label for="color">选择你喜欢的颜色：</label>
<input type="text" id="color" name="color" list="colorOptions">
<datalist id="colorOptions">
<option value="红色">
<option value="蓝色">
<option value="绿色">
<option value="黄色">
<option value="紫色">
</datalist>
<input type="submit" value="提交">
</form>

9、<output>标签：计算结果输出

<output>标签是HTML5中引入的一个新元素，它用于显示计算结果或输出。该标签通常与JavaScript代码结合使用，通过将计算结果赋值给<output>元素的value属性来显示结果。

<output>标签可以用于各种类型的计算和输出，例如数学运算、字符串处理、数组操作等。它可以与<input>元素一起使用，以实时更新计算结果。

下面是一个使用<output>标签的示例：

<form>
<label for="num1">数字1：</label>
<input type="number" id="num1" name="num1" oninput="calculate()"><br><br>
<label for="num2">数字2：</label>
<input type="number" id="num2" name="num2" oninput="calculate()"><br><br>
<label for="result">结果：</label>
<output id="result"></output>
</form>

<script>
function calculate() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var result = num1 + num2;
document.getElementById("result").value = result;
}
</script>

10、<progress>标签：任务进度展示

<progress>标签是HTML5中用于表示任务完成进度的一个新元素。它通过value属性和max属性来表示进度，其中value表示当前完成的值，而max定义任务的总量或最大值。

示例：

<!DOCTYPE html>
<html>
<head>
<title>Progress Example</title>
</head>
<body>
<h1>File Download</h1>
<progress id="fileDownload" value="0" max="100"></progress>
<br>
<button onclick="startDownload()">Start Download</button>

<script>
function startDownload() {
var progress = document.getElementById("fileDownload");
for (var i = 0; i <= 100; i++) {
setTimeout(function() {
progress.value = i;
}, i * 10);
}
}
</script>
</body>
</html>

在上面的示例中，我们创建了一个名为"fileDownload"的<progress>元素，并设置了初始值为0，最大值为100。我们还添加了一个按钮，当用户点击该按钮时，会触发名为"startDownload"的JavaScript函数。这个函数模拟了一个文件下载过程，通过循环逐步增加<progress>元素的value属性值，从而显示下载进度。

11、<meter>标签：度量衡指示器

<meter>标签在HTML中用于表示度量衡指示器，它定义了一个已知范围内的标量测量值或分数值，通常用于显示磁盘使用情况、查询结果的相关性等。例如：

<p>CPU 使用率： <meter value="0.6" min="0" max="1"></meter> 60%</p>
<p>内存使用率： <meter value="0.4" min="0" max="1"></meter> 40%</p>

在这个示例中，我们使用了两个<meter>标签来分别显示CPU和内存的使用率。value属性表示当前的测量值，min和max属性分别定义了测量范围的最小值和最大值。通过这些属性，<meter>标签能够清晰地显示出资源的使用情况。

需要注意的是，<meter>标签不应该用来表示进度条，对于进度条的表示，应该使用<progress>标签。

12、<details>和<summary>标签：详细信息展示

<details>和<summary>标签是HTML5中新增的两个元素，用于创建可折叠的详细信息区域。

<details>标签定义了一个可以展开或折叠的容器，其中包含一些额外的信息。它通常与<summary>标签一起使用，<summary>标签定义了<details>元素的标题，当用户点击该标题时，<details>元素的内容会展开或折叠。

示例：

<details>
<summary>点击查看详细信息</summary>
<p>这里是一些额外的信息，用户可以点击标题来展开或折叠这些信息。</p>
</details>

在这个示例中，我们使用了<details>标签来创建一个可折叠的容器，并在其中添加了一个<summary>标签作为标题。当用户点击这个标题时，容器的内容会展开或折叠。

总结：

HTML表单标签是构建动态网页的基石，它们使得用户能够与网站进行有效的交互。

通过合理地使用这些标签，开发者可以创建出既美观又功能强大的表单，从而提升用户体验和网站的可用性。所以说，掌握这些标签的使用，对于前端开发者来说是至关重要的。

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

1、tml的固定结构

一个HTML文件是有自己固定的结构的。
<html>
<head>...</head>
<body>...</body>
</html>
代码讲解：
<html></html>称为根标签，所有的网页标签都在<html></html>中。
<head>
标签用于定义文档的头部，它是所有头部元素的容器。

头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。
在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

2、<head>标签的作用

文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>

3、<title>标签

在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用。网页制作学习交流群，四九四零六，四九三四。
于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独
一无二的title。

例如：
<head>
<title>hello world</title>
</head>
<title>标签的内容“hello world”会在浏览器中的标题栏上显示出来，

4、标签的用途

我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上
的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。

文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使
用 em 标签表示强调等等。
讲了这么多语义化，但是语义化可以给我们带来什么样的好处呢？

① 更容易被搜索引擎收录。
②.更容易让屏幕阅读器读出网页内容。

家好，我是Echa。

三天前小编也发布了一篇关于CSS优秀在线工具大全：48个高颜值的CSS在线工具大全，对不太会写CSS3对小伙伴们来说，那简直就是雪中送炭。部分粉丝们还特意私信小编表示感谢。

不过有一部分粉丝们私信小编说，2022年关于CSS官方又都更新了哪些新的知识点？其实小编也是在之前文章陆续有发布，只是新关注的粉丝们不知道，这个小编也不怪你们。咱们就一起回顾回顾。

2022 年 CSS 新增了很多特性，例如容器查询、父选择器、子网格、级联层、新视口单位等，多项期待已久的功能已集成到常青浏览器（自动升级到最新版本的浏览器，包括 Chrome、Edge、Firefox 和 Safari）中。下面就来看看 2022 年 CSS 新增的 10 个实用功能吧！

全文大纲

颜色相关
全新动态视口单位
@container：容器查询
@layer：级联层
:has：父选择器
:focus-visible 焦点选择器
color-scheme
accent-color
scale、rotate、translate
subgrid：子网格

1. 颜色相关

下面来看看和 CSS 颜色相关的一些更新。CSS 工作组有两个新规范将改变我们在 Web 上使用颜色的方式：CSS Color Module Level 4（候选推荐）和 CSS Color Module Level 5（工作草案）。两者仍处于实验阶段，截至 2022 年 12 月，只有 Safari 已实现。

（1）新颜色函数语法

CSS Color Module Level 4 引入了颜色函数的新语法，例如rgb()和hsl()。新语法省略了逗号，依靠空格来分隔颜色空间的每个通道。它还支持可选的 alpha 参数，从而不再需要额外的颜色函数，例如rgba()和hsla()。逗号分隔的形式现在被规范称为“遗留语法”。

/* 遗留语法 */
background-color: hsl(270, 50%, 40%);
color: hsla(0, 0%, 100%, 50%);

/* 新语法 */
background-color: hsl(270 50% 40%);
color: hsl(0 0% 100% / 50%);

（2）新色彩空间

新的颜色规范为网络添加了大量新的颜色空间：

HWB：色调、白度、黑度
LCH：亮度、色度、色调
CIE L * a * b*
Oklab
Oklch
Display P3

这只是新增的颜色空间的一部分，其中一些色彩空间，比如 Display P3，提供了比 sRGB 空间更宽的色域，这意味着我们将可以使用更多颜色，并且这些颜色将比一直使用的颜色更鲜艳。

（3）相对颜色语法

CSS Color Module Level 5 通过引入相对颜色语法进一步增强了颜色函数。。此语法可以基于另一种颜色定义新颜色。可以通过首先使用 from 关键字定义原色，然后像往常一样在颜色函数中指定新颜色的通道来使用它。

当提供原始颜色时，可以访问“通道关键字”，允许引用颜色空间中的每个通道。关键字根据使用的颜色函数而变化。对于 rgb()，有 r、g 和 b 通道关键字；对于 oklch()，将拥有 l、c 和 h 关键字。对于每个颜色函数，还有一个 alpha 通道关键字，它是原始颜色的 alpha 通道。

可以在 calc() 表达式中使用这些通道关键字来修改原始颜色：

/* 去色处理 */
rgb(from tomato calc(r - 20) calc(g - 20) calc(b - 20));

/* 半透明处理 */
rgb(from tomato r g b / 50%)

/* 在 oklch 中使颜色变暗 */
oklch(from tomato calc(l - 0.1) c h);

除此之外，还可以跨颜色空间定义相对颜色。当使用一个空间中最初定义的颜色并使用不同的颜色空间定义新颜色时，浏览器将首先将原始颜色转换为新的颜色空间。

下面使用 Oklch 通过将色调旋转 120°（⅓ 圈）来定义基于 sRGB 中定义的原色的二次色：

--primary: #005f73;
--secondary: oklch(from var(--primary) l c calc(h + 120));

（4）color-mix()

CSS Color Module Level 5 规范还引入了一个 color-mix() 函数，允许在不同的颜色空间中混合颜色。

color-mix(in lch, purple 50%, plum 50%)

上面代码中，会产生 50-50 的紫色和紫红色混合。

2. 全新动态视口单位

新增的 CSS 视口单元用于处理带有动态工具栏的移动视口。

要想调整与视口一样大的尺寸，可以使用现有的视口单位 vw 和 vh：

vw：视口大小宽度的 1%；
vh：视口大小高度的 1%；

下面元素的宽度为 100vw，高度为 100vh，它将完全覆盖整个视口：

除了 vh 和 vw，还有：

vmin：vw或vh中的较小者。
vmax：vw或vh中的较大者。

这些单位在浏览器中都得到了很好的支持。虽然这些单位在桌面浏览器上运行良好，但在移动浏览器上就会存在一些问题，视口大小受动态工具栏存在与否的影响。这些是用户界面，例如地址栏和标签栏等。尽管视口大小可以更改，但 vw 和 vh 大小不会。因此，尺寸为 100vh 高的元素会从视口中溢出。

当向下滚动时，这些动态工具栏将缩回。在这种状态下，尺寸为 100vh 高的元素将覆盖整个视口。

为了解决这个问题，CSS 工作组规定了视口的各种状态：

大视口：视口大小假设任何动态扩展和缩回的 UA 接口被缩回。
小视口：视口大小假设任何动态扩展和缩回的 UA 接口都可以扩展。

新视口也有指定的单位：

大视口的单位带有 lv 前缀，单位为 lvw、lvh、lvi、lvb、lvmin 和 lvmax。
小视口的单位带有 sv 前缀，单位是 svw、svh、svi、svb、svmin 和 svmax。

除非调整视口本身的大小，否则这些视口百分比单位的大小是固定的。

除了大视口和小视口之外，还有一个动态视口，动态考虑了浏览器 UI：

当动态工具栏展开时，动态视口等于小视口的大小。
当动态工具栏缩回时，动态视口等于大视口的大小。

它的单位带有 dv 前缀：dvw、dvh、dvi、dvb、dvmin 和 dvmax。它们的尺寸在对应的 lv* 和 sv* 之间。

浏览器对这些单位的支持情况如下：

参考：https://web.dev/viewport-units/

3.@container：容器查询

CSS 容器查询是一种超越与视口相关的媒体查询的方法，而可以根据元素所在的容器修改元素的行为，不仅是依赖视口大小来更改元素的样式。

想要使用容器查询，首先需要在容器上定义 container-type

main {
  container-type: inline-size;
}

还可以使用 container-name 来命名容器，如果有多层容器，这将很有用，这样就可以更明确地了解哪些查询会影响元素。type 和 name 都可以使用简写的 container 属性来定义，其中 name在前，并通过正斜杠与 type 分隔。

.main {
  container: main / inline-size;
}

然后就可以使用@container开始查询了。一旦满足该条件，CSS 将应用于该容器内的元素。

最后来看一个实际的应用：

<main class="container">
  <article>...</article>
  <article>...</article>
  <article>...</article>
</main>

现在就可以设置一个容器查询来更改文章样式及其任何后代的样式，这将基于 main 的宽度，因为它是容器元素。

article {
  padding: 1rem;
  font-size: 1rem;
}

@container (min-width: 60ch) {
  article {
    padding: 2rem;
    font-size: 1.25rem;
  }
}

这样，当文章的宽度小于 60ch 时，就会采用更小的 padding 和 font-size 值。

浏览器对容器查询的支持情况如下：

4.@layer：级联层

在 2022 年 2 月/3 月，所有现代浏览器都发布了 Cascade Layers（级联层），可以用来控制选择器如何交互，而不管它们的特殊性或代码顺序。下面来看一个例子：

@layer default, theme, state;

@layer default {
  button {
    background: rebeccapurple;
    color: white;
  }    
}

@layer state {
  :disabled {
    background: dimgray;
  }    
}

@layer theme {
  button.danger {
    background: maroon;
  }

  button.info {
    background: darkslateblue;
  }

  #call-to-action {
    background: mediumvioletred;
  }
}

@layer 声明了一个_级联层_，同一层内的规则将级联在一起，这给予了开发者对层叠机制的更多控制。

上面例子中定义了多个级联层，当一个声明中具有多个级联层时，后定义的级联层具有更高的优先级。因此上面例子中，state 层具有更高的优先级，即使 theme 样式中具有更高的特定性（权重）并且在代码中出现得更晚。

我们还可以嵌套图层：

@layer reset, framework, components, utilities;

@layer components {
  @layer default, theme, state;
  
  @layer state {
    /* components.state 层 */
    :disabled { background: dimgray; }    
  }
}

@layer components.state {
  /* components.state 层 */
  :focus-visible { outline: thin dashed hotpink; }
}

层按照每个层名称首次出现在代码库中的顺序堆叠，后面的层名称优先于前面的层。这意味着可以允许它们隐式堆叠：

@layer low { /* 最低层 */ }
@layer medium { /* 中间层 */ }
@layer high { /* 最高层 */ }

或者可以像上面例子一样，按顺序引入层名称来明确定义层顺序：

@layer low, medium, high;

浏览器对级联层的支持情况如下：

可以看到，目前主流浏览器都支持 CSS 级联层功能。

5.:has：父选择器

:has()选择器可以检查父元素中是否存在特定的元素。例如，如果一个卡片组件中有图片，就给它添加一个display:flex。这以前在 CSS 中是无法实现的，但是新的 :has() 选择器就可以帮助我们选择包含特定元素的父元素。

在CSS中，我们无法根据元素中是否存在特定的元素来设置父元素的样式，要想实现这一点，就必须创建CSS类，并根据需要进行类的切换。来看下面的例子：

这里我们有两种卡片：包含图片和不包含图片。在CSS中需要这样做：

/* 有图片的卡片 */
.card {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* 没有图片的卡片 */
.card-plain {
  display: block;
  border-top: 3px solid #7c93e9;
}

<!-- 有图片的卡片 -->
<div class="card">
  <div class="card-image">
    <img src="awameh.jpg" alt="">
  </div>
  <div class="card-content">
    卡片内容
  </div>
</div>

<!-- 没有图片的卡片 -->
<div class="card card-plain">
  <div class="card-content">
    卡片内容
  </div>
</div>

这里创建了一个类card-plain，专门用于没有图片的卡片，在没有图片时就不需要flex布局。如果使用 CSS 中的父选择器 :has 就不需要再写这个类，只需要使用它来检查卡片中是否包含.card-image即可：

.card:has(.card-image) {
  display: flex;
  align-items: center;
}

根据 CSS 规范，:has() 选择器可以检查父元素是否包含至少一个元素，或者一个条件，例如输入是否获取到焦点。

:has() 选择器不仅可以检查父元素是否包含特定的子元素，还可以检查一个元素后面是否跟有另一个元素：

.card h2:has(+ p) { }

这将检查 <h2> 元素是否直接跟在 <p> 元素之后。

我们也可以将它与表单元素一起使用来检查输入是否获取到了焦点：

form:has(input:focused) {
    background-color: lightgrey;
}

浏览器对 :has() 的支持情况如下：

可以看到，最新版的 Chrome、Edge、Safari 都已经支持了 :has() 选择器，而 Firfox 目前还不支持

6.:focus-visible

:focus-visible 是一个现代CSS 焦点选择器。今年 3 月，Safari 15.4 发布了 :focus-visible 伪类，不久之后，它成为常青浏览器中使用的默认元素焦点行为。

当元素匹配:focus伪类并且客户端的启发式引擎决定焦点应当可见 (在这种情况下很多浏览器默认显示“焦点框”。) 时，:focus-visible 伪类将生效。

注意：Firefox 需要通过较旧的前缀伪类 :-moz-focusring 来支持类似的功能。

下面来看一个例子，:focus-visible 选择器利用客户端的行为决定是否匹配。当使用鼠标点击控件和用键盘 tab 切换控件时会有所不同。

<input value="默认样式s"><br>
<button>默认样式</button><br>
<input class="focus-only" value=":focus"><br>
<button class="focus-only">:focus</button><br>
<input class="focus-visible-only" value=":focus-visible"><br>
<button class="focus-visible-only">:focus-visible</button>

.focus-only:focus {
  outline: 2px solid black;
}

.focus-visible-only:focus-visible {
  outline: 4px dashed darkorange;
}

效果如下：

这段代码的表现如下：

默认样式：使用键盘控制时，input和button的边框都是细蓝色的；使用鼠标控制时，input的边框是细蓝色的，button的边框是细黑色的；
:focus：无论使用鼠标控制还是键盘控制，input和button的边框都是粗黑色的；
:focus-visible：使用键盘控制时，input和button的边框都是粗橙色的；使用鼠标控制时，input的边框是粗橙色的，button的边框是细黑色的；

使用这个伪类，就可以有效地根据用户的输入方式 (鼠标 or 键盘) 来展示不同形式的焦点。

浏览器对 :focus-visible 的支持情况如下：

可以看到，目前主流浏览器都已经支持 :focus-visible。

7.color-scheme

color-scheme 是一个 CSS 属性，当用户选择系统配色方案时（系统配色方案的常见选择是“深色模式”和“浅色模式”），操作系统会对用户界面进行调整。这包括表单控件、滚动条和 CSS 系统颜色的使用值。

:root {
  color-scheme: light dark;
}

当把上面的代码复制到样式表中，页面就会根据操作系统的设置的暗/亮模式来显示不同的样式：

可以看到，当切换系统配色模式时，文字颜色，背景颜色，以及表单（滚动条、选择下拉框、单选框、复选框、输入框等）样式都发生了变化，这样就省去了我们很多两种模式下的样式定义工作。

通常，属性的值是以下几种：

color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;

其中：

normal：表示元素未指定任何配色方案，因此应使用浏览器的默认配色方案呈现。
light：表示可以使用操作系统亮色配色方案渲染元素。
dark：表示可以使用操作系统深色配色方案渲染元素。

需要注意，当light和right都有时，需要light在前，right在后。要想将整个页面配置为用户的配色方案首选项，就可以像上面一样，在 :root 元素上指定 color-scheme。

我们甚至可以仅在 HTML 中就可以获得深色模式：

<head>
  <meta name="color-scheme" content="light dark" />
</head>

浏览器对 color-scheme 的支持情况如下：

8.accent-color

accent-color 属性可以在不改变浏览器默认表单组件基本样式的前提下重置组件的颜色。该属性目前支持以下 HTML 控件元素：

复选框：<input type=”checkbox”>
单选框：<input type=”radio”>
范围选择框：<input type=”range”>
进度条：<progress>

下面来看一个例子：

<form>
  <label>
    <input type="radio" name="radios" checked>
    单选选中
  </label>
  <label>
    <input type="radio" name="radios">
    单选未选中
  </label>
  <label>
    <input type="checkbox" checked>
    多选选中
  </label>
  <label>
    <input type="checkbox">
    多选未选中
  </label>
  <label>
    <input type="range">
    范围
  </label>
  <label>
    <progress max="100" value="80">80%</progress>
    进度条
  </label>
</form>

:root {
  accent-color: firebrick;
}

[type="radio"],
[type="checkbox"] {
  font-size: inherit;
  width: 0.75em;
  height: 0.75em;
}

progress,
[type="range"] {
  font-size: inherit;
  width: 10ch;
}

效果如下：

可以看到，这些表单元素都变成我们定义的颜色。

需要注意，如果给表单元素设置了自定义样式，那 accent-color 就可能会失效。例如，将进度条的 border 设置为蓝色：

progress {
  border: blue;
}

样式会是下面这样，其并不符合预期（进度条边框为蓝色），出现了意料之外的效果。所以，如果使用了 accent-color 定义表单样式，就要尽量避免再给表单元素自定义其他样式：

浏览器对 accent-color 的支持情况如下：

9.scale、rotate、translate

2022 年 8 月，Chromium 完成了使用单个 rotate, scale, translate 属性来对 CSS 变换进行更细粒度的控制。

要想在 CSS 中使用变换，需要使用 transform 属性，该属性接受一个或多个 <transform-function>：

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

在上面的代码中，目标元素会在 X 轴上平移 50%，旋转 30 度，最后放大到 120%。虽然这样 transform 属性可以正常工作，但当想要单独更改这些值中的任何一个时，就会比较麻烦。

比如，想要在鼠标悬浮时更改 scale 的大小，就需要将 transform 属性中的所有函数都复制一遍，即使它们的值保持不变。

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2);
}

而在 Chrome 104 中，就可以使用rotate, scale, translate 属性来单独定义变换的这些部分。使用这些属性来重写前面的变换示例：

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

这样，如果想在某些情况下单独修改每个属性时，就不需要再复制其他没有变化的属性。

原始的 CSS 变换属性和新属性之间的一个主要区别是应用声明的变换顺序：

使用 transform 时，变换函数会按照它们编写的顺序，从左到右；
使用单独的变换属性时，顺序不是声明的顺序。而始终是：首先平移，然后旋转，最后缩放。

这意味着以下两端代码的执行结果是一样的：

.transform-individual {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.transform-individual-alt {
  rotate: 30deg;
  translate: 50% 0;
  scale: 1.2;
}

在这两种情况下，目标元素都会首先在 X 轴上平移 50%，然后旋转 30 度，最后缩放 1.2。

如果其中一个单独的变换属性与 transform 属性一起声明，则首先应用单独的变换（rotate, scale, translate），最后应用 transform。

浏览器对 rotate, scale, translate 的支持情况如下：

10.subgrid：子网格

subgrid 允许元素在行轴或列轴上继承其父元素的网格，主要解决当网格嵌套网格时，子网格的位置和轨道不能和父网格对齐的问题。使用子网格时，需要让 grid-template-columns 和 grid-template-rows 属性的值使用 subgrid 关键字。

grid-template-rows：基于网格行维度，定义网格线的名称和网格轨道的尺寸大小。
grid-template-columns：基于网格列维度，定义网格线的名称和网格轨道的尺寸大小。

下面来看一个例子，有一个嵌套网格，它正在为行和列创建自己的轨道。这些轨道是独立的，因此不会与父网格上的轨道对齐。

<div class="grid">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="subgrid">
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

.subgrid {
  grid-column: auto / span 3;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: minmax(100px, auto);
  max-width: 800px;
  margin: 2em auto;
  gap: 10px;
  padding: 10px;
  background-color: rgba(255,255,255,.8);
}

.grid > div {
  background-color: #2B3745;
  padding: 10px;
}

.subgrid > div {
  background-color: #D9D9E5;
}

上面代码的效果如下：

下面将 grid-template-columns 的轨道列表替换为 subgrid 关键字。嵌套网格的列轨道现在与父级上的列轨道对齐。

.subgrid {
  grid-template-columns: subgrid;
}

更改完之后的效果如下：

只要父级本身就是一个网格，就可以继续将子网格继承到子级中。以下示例显示了三个网格，每个网格都嵌套在另一个网格中，并继承了其父级的轨道。子项指示哪个网格是它们的父项。

<div class="one">
  <div class="child">Parent one</div>
  <div class="two">
    <div class="child">Parent two</div>
    <div class="three">
      <div class="child">Parent three</div>
    </div>
  </div>
</div>

.one {
  display: grid;
  grid-template-columns: repeat(8,1fr);
  max-width: 800px;
  margin: 2em auto;
  gap: 10px;
  padding: 10px;
  background-color: rgba(255,255,255,.8);
}

.two {
  grid-column: 2 / 8;
  grid-row: 2 ;
  display: grid;
  grid-template-columns: subgrid;
  border: 2px solid #96060A;
}

.three {
  display: grid;
  grid-column: 2 / 6;
  grid-row: 2;
  grid-template-columns: subgrid;
  border: 2px solid #1C2E01;
}

.child {
  background-color: #2B3745;
  padding: 10px;
  color: #fff;
}

使用 Firefox DevTools 突出显示每个网格，突出显示外部网格显示子网格和网格项如何与该网格对齐：

浏览器对子网格的支持情况如下：

在线咨询

上一篇：产品经理的技术脑：html是什么意思？
下一篇：32行代码生成网页版黑客帝国代码雨

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商