HTML(HyperText Markup Language,超文本标记语言)是一种标记语言,用于创建和设计网页内容。它是网页的基本构建块,用于描述网页的结构和内容。HTML使用各种标签(tags)来定义文档中的文本、图像、链接、表单等元素。
HTML 基本结构
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文档标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<a href="https://www.example.com">这是一个链接</a>
</body>
</html>
常用HTML标签:
以下是一些常用的 HTML 标签,以及它们的功能和用法:
1. 文档结构相关标签
<!DOCTYPE html>
- 声明文档类型,告诉浏览器使用 HTML5 解析文档。
<html>
- 文档根元素,包含所有其他 HTML 元素。
<head>
- 包含文档的元数据(如标题、字符集、样式等)。
<title>
- 定义文档的标题,显示在浏览器的标题栏或标签页上。
<body>
- 文档的主体,包含页面的可见内容。
2. 文本内容相关标签
<h1>
-<h6>
- 标题标签,从
<h1>
(最重要)到<h6>
(最不重要)。
- 标题标签,从
<p>
- 段落标签,用于包裹文本段落。
<br>
- 换行标签,在文本中插入换行(没有结束标签)。
<hr>
- 水平线标签,用于在内容中插入水平分隔线(没有结束标签)。
<strong>
- 表示强调的内容,通常以粗体显示。
<em>
- 表示强调的内容,通常用斜体显示。
<mark>
- 高亮显示文本。
<small>
- 表示小型文本。
3. 链接和图像相关标签
<a>
- 超链接标签,用于链接到另一个页面或资源。示例:
<a href="https://www.example.com">链接文本</a>
。
- 超链接标签,用于链接到另一个页面或资源。示例:
<img>
- 图像标签,用于插入图像。需要
src
和alt
属性。例如:<img src="image.jpg" alt="描述(当图片加载不成功时)">
。
- 图像标签,用于插入图像。需要
<figure>
和<figcaption>
<figure>
用于封装图像及其说明,<figcaption>
用于描述图像。
4. 列表相关标签
<ul>
- 无序列表,表示一个项目列表。
<ol>
- 有序列表,表示按顺序排列的项目。
<li>
- 列表项,定义在
<ul>
或<ol>
中的每一个列表项。
- 列表项,定义在
5. 表单相关标签
<form>
- 表单标签,用于提交用户输入的数据。
<input>
- 输入框标签,用于接受用户输入,可通过
type
属性指定输入类型(如text
、password
、email
等)。
- 输入框标签,用于接受用户输入,可通过
<label>
- 标签,用于为表单元素提供描述。
<textarea>
- 多行文本输入框。
<button>
- 按钮标签,通常用于提交表单或执行某个操作。
<select>
和<option>
<select>
表示下拉菜单,<option>
表示选项。
6. 布局和语义相关标签
<div>
- 区块标签,将内容分组用于布局,不具备特殊语义。
<span>
- 行内标签,用于将文本或其他内容分组,通常用于样式。
<header>
- 页面或区块的头部分,通常包含标题或导航。
<nav>
- 定义导航链接的部分。
<main>
- 页面主要内容的部分(每个页面只能有一个)。
<section>
- 定义文档中的节,具有相似主题的内容。
<article>
- 独立的、完整的内容,适合于独立发布的信息。
<footer>
- 页脚内容,通常包含版权信息或联系信息。
7. 多媒体相关标签
<audio>
- 音频标签,用于嵌入音频内容。
<video>
- 视频标签,用于嵌入视频内容。
<source>
- 用于
<audio>
和<video>
内,指定媒体文件的链接。
- 用于
8. 脚本和链接
<script>
- 用于嵌入或链接外部 JavaScript 脚本。
<link>
- 用于链接外部资源,如 CSS 样式表。
<style>
- 内联 CSS 样式的定义。
9.表格标签
标签名 | 含义 | 说明 |
---|---|---|
<table> | 表格 | 所有表格的外框 |
<tr> | 表格行(Table Row) | 每一行 |
<th> | 表头单元格(Table Header) | 粗体、居中,表示表头 |
<td> | 表格单元格(Table Data) | 表格数据格 |
<caption> | 表格标题 | (可选)出现在表格上方 |
<thead> | 表头区域 | 一组表头行(可选) |
<tbody> | 表体区域 | 一组主体数据行(可选) |
<tfoot> | 表尾区域 | 一组总结/统计行(可选) |
Demo 演示(直接浏览器打开此html)
<!-- 1. 文档结构相关标签
<!DOCTYPE html>
声明文档类型,告诉浏览器使用 HTML5 解析文档。
<html>
文档根元素,包含所有其他 HTML 元素。
<head>
包含文档的元数据(如标题、字符集、样式等)。
<title>
定义文档的标题,显示在浏览器的标题栏或标签页上。
<body>
文档的主体,包含页面的可见内容。 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文档标题</title>
</head>
<body>
<!-- 2. 文本内容相关标签 -->
<h1>文本内容相关标签</h1>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
<p>段落标签,用于包裹文本段落。</p>
<br>换行标签,在文本中插入换行(没有结束标签)。
<hr>水平线标签,用于在内容中插入水平分隔线(没有结束标签)。
<strong>表示强调的内容,通常以粗体显示。</strong>
<em>表示强调的内容,通常用斜体显示。</em>
<mark>高亮显示文本。</mark>
<small>表示小型文本。</small>
<!-- 3. 链接和图像相关标签 -->
<h1>链接和图像相关标签</h1>
<!-- 超链接标签,用于链接到另一个页面或资源。 -->
<a href="https://www.example.com">链接文本</a>
<!-- 图像标签,用于插入图像。需要 src 和 alt 属性。 -->
<img src="image.png" alt="描述">。
<!-- <figure> 用于封装图像及其说明,<figcaption> 用于描述图像。常见用法如下: -->
<figure>
<img src="image.jpg" alt="描述性文字" />
<figcaption>这是一张有趣的图像。</figcaption>
</figure>
<!-- 4. 列表相关标签 -->
<h1>列表相关标签</h1>
<h2>ul/ol列表项展示</h2>
<!-- 无序列表,表示一个项目列表。 -->
<ul>
<li>列表项,定义在 “ul” 中的每一个列表项。</li>
<li>列表项,定义在 “ul” 中的每一个列表项。</li>
<li>列表项,定义在 “ul 中的每一个列表项。</li>
</ul>
<!-- 有序列表,表示按顺序排列的项目。 -->
<ol>
<li>列表项,定义在 “ol” 中的每一个列表项。</li>
<li>列表项,定义在 “ol” 中的每一个列表项。</li>
<li>列表项,定义在 “ol” 中的每一个列表项。</li>
</ol>
<!-- 嵌套使用 -->
<h2>购物清单 demo</h2>
<ul>
<li>水果
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
</li>
<li>面包</li>
<li>饮料
<ol>
<li>水</li>
<li>果汁</li>
</ol>
</li>
</ul>
<!-- 5. 表单相关标签 -->
<h1>表单相关标签</h1>
<!-- <form>
表单标签,用于提交用户输入的数据。
<input>
输入框标签,用于接受用户输入,可通过 type 属性指定输入类型(如 text、password、email等)。
<label>
标签,用于为表单元素提供描述。
<textarea>
多行文本输入框。
<button>
按钮标签,通常用于提交表单或执行某个操作。
<select> 和 <option>
<select> 表示下拉菜单,<option> 表示选项。 -->
<!-- 展示一个表单 demo -->
<h2>用户注册 表单 demo</h2>
<form action="/submit" method="POST">
<!-- 姓名输入 -->
<label for="fullname">姓名:</label>
<input type="text" id="fullname" name="fullname" required>
<br><br>
<!-- 密码输入 -->
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<br><br>
<!-- 电子邮件输入 -->
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email" required>
<br><br>
<!-- 性别单选 -->
<label>性别:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<br><br>
<!-- 兴趣复选框 -->
<label>兴趣:</label>
<input type="checkbox" id="sports" name="interests" value="sports">
<label for="sports">体育</label>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">音乐</label>
<input type="checkbox" id="travel" name="interests" value="travel">
<label for="travel">旅行</label>
<br><br>
<!-- 多行文本输入 -->
<label for="bio">个人简介:</label>
<textarea id="bio" name="bio" rows="4" cols="50" placeholder="简要介绍一下自己"></textarea>
<br><br>
<!-- 下拉选择框 -->
<label for="country">国家:</label>
<select id="country" name="country">
<option value="">-- 请选择国家 --</option>
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="uk">英国</option>
<option value="japan">日本</option>
<option value="germany">德国</option>
</select>
<br><br>
<!-- 提交按钮 -->
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>
<!-- 下面是一个简单的示例,展示了不同输入类型的使用: -->
<h2>表单 input type 不同输入类型示例表单 demo</h2>
<form action="#" method="post">
<label for="text">文本输入:</label>
<input type="text" id="text" name="text" placeholder="输入任意文本">
<br><br>
<label for="password">密码输入:</label>
<input type="password" id="password" name="password" placeholder="输入密码">
<br><br>
<label for="email">电子邮件输入:</label>
<input type="email" id="email" name="email" placeholder="输入邮箱地址">
<br><br>
<label for="url">网址输入:</label>
<input type="url" id="url" name="url" placeholder="输入网址">
<br><br>
<label for="tel">电话输入:</label>
<input type="tel" id="tel" name="tel" placeholder="输入电话号码">
<br><br>
<label for="number">数字输入:</label>
<input type="number" id="number" name="number" min="1" max="10" step="1">
<br><br>
<label for="range">范围输入:</label>
<input type="range" id="range" name="range" min="1" max="100">
<br><br>
<label for="date">日期选择:</label>
<input type="date" id="date" name="date">
<br><br>
<label for="file">文件上传:</label>
<input type="file" id="file" name="file">
<br><br>
<label>兴趣:</label><br>
<input type="checkbox" id="sports" name="interest" value="sports">
<label for="sports">体育</label><br>
<input type="checkbox" id="music" name="interest" value="music">
<label for="music">音乐</label><br><br>
<label>性别:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label><br><br>
<label for="color">选择颜色:</label>
<input type="color" id="color" name="color">
<br><br>
<button type="submit">提交</button>
<!-- 6. 布局和语义相关标签 -->
<!-- <div>
区块标签,将内容分组用于布局,不具备特殊语义。
<span>
行内标签,用于将文本或其他内容分组,通常用于样式。
<header>
页面或区块的头部分,通常包含标题或导航。
<nav>
定义导航链接的部分。
<main>
页面主要内容的部分(每个页面只能有一个)。
<section>
定义文档中的节,具有相似主题的内容。
<article>
独立的、完整的内容,适合于独立发布的信息。
<footer>
页脚内容,通常包含版权信息或联系信息。 -->
<header>
<h1>布局和语义demo:我的博客</h1>
<nav>
<a href="#about">关于我</a>
<a href="#blog">博客文章</a>
<a href="#contact">联系我</a>
</nav>
</header>
<main>
<section id="about">
<h2>关于我</h2>
<p>你好!我是一位热爱写作和分享知识的博客作者。<span style="color: blue;">欢迎访问我的博客!</span></p>
</section>
<section id="blog">
<h2>博客文章</h2>
<article>
<h3>第一篇文章</h3>
<p>这是我的第一篇博客文章,我将分享一些有趣的话题。</p>
<footer>
<p>发布时间:2023年10月1日</p>
<p>作者:我</p>
</footer>
</article>
<article>
<h3>第二篇文章</h3>
<p>在这篇文章中,我会讨论如何学习编程。在这个过程中,保持对知识的渴望非常重要。</p>
<footer>
<p>发布时间:2023年10月5日</p>
<p>作者:我</p>
</footer>
</article>
</section>
</main>
<footer>
<p>© 2023 我的博客. 保留所有权利.</p>
</footer>
<!-- 7. 多媒体相关标签 -->
<!--
<audio>
音频标签,用于嵌入音频内容。
<video>
视频标签,用于嵌入视频内容。
<source>
用于 <audio> 和 <video> 内,指定媒体文件的链接。
-->
<h1>音频与视频示例</h1>
<!-- 音频标签 -->
<h2>音频播放</h2>
<audio controls>
<source src="audio-file.mp3" type="audio/mpeg">
<source src="audio-file.ogg" type="audio/ogg">
您的浏览器不支持音频播放。
</audio>
<!-- 视频标签 -->
<h2>视频播放</h2>
<video controls width="640" height="360">
<source src="video-file.mp4" type="video/mp4">
<source src="video-file.webm" type="video/webm">
您的浏览器不支持视频播放。
</video>
<!-- 8. 脚本和链接 -->
<!--
<script>
用于嵌入或链接外部 JavaScript 脚本。
<link>
用于链接外部资源,如 CSS 样式表。
<style>
内联 CSS 样式的定义。
-->
<!-- 9.表格标签 -->
<table>
<caption>学生成绩统计表</caption>
<thead>
<tr>
<th>姓名</th>
<th>数学</th>
<th>英语</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>90</td>
<td>85</td>
<td>175</td>
</tr>
<tr>
<td>小红</td>
<td>88</td>
<td>92</td>
<td>180</td>
</tr>
<tr>
<td>小刚</td>
<td>76</td>
<td>80</td>
<td>156</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均分</td>
<td>84.7</td>
<td>85.7</td>
<td>170.3</td>
</tr>
</tfoot>
</table>
</body>
</html>
HTML 表单详解
<form action="/submit" method="post">
<!-- 各种输入组件放这里 -->
</form>
属性名 | 说明 |
---|---|
action | 表单提交时请求的地址,比如 /submit |
method | 提交方式:get (默认,参数在URL上)或 post (参数在请求体中,更安全) |
最重要的两个属性:name
和 value
1. name
:字段名称(表单数据的“键”)
- 作用:用于标识这个字段的名字
- 表单提交后,它是“键值对”中的键
- 服务端通过这个名字来接收数据
举例:
<input type="text" name="username" value="Tom">
- 提交后会发送:
username=Tom
如果没有设置 name
,该字段将 不会提交到服务器
2. value
:字段的值(用户输入或默认值)
- 对于
<input>
来说是默认值 - 对于
<input type="radio">
和<input type="checkbox">
来说,是被选中项提交的值 - 对于按钮(submit、reset),是按钮上的文字
举例:
文本框
<input type="text" name="email" value="abc@example.com">
提交结果:email=abc@example.com
复选框
<input type="checkbox" name="hobby" value="music" checked>
<input type="checkbox" name="hobby" value="movie">
用户勾选了“music”,提交结果:hobby=music
单选框
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
用户选了“female”,提交结果:gender=female
详细讲解常见表单组件及属性
1. <input type="text">
单行文本输入
<input type="text" name="username" value="张三" placeholder="请输入用户名" required>
属性 | 说明 |
---|---|
type="text" | 文本输入 |
name | 字段名称(提交时的 key) |
value | 默认值 |
placeholder | 占位提示,输入前显示 |
required | 表示必填,不填不能提交 |
maxlength | 限制最大字符数 |
2. <input type="password">
密码输入框
<input type="password" name="pwd" required>
| 特点 | 输入内容不可见,显示为小圆点或星号(●●●) |
3. <input type="radio">
单选框
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
属性 | 说明 |
---|---|
name | 同组要相同,才能互斥 |
value | 被选中时提交的值 |
4. <input type="checkbox">
复选框
<input type="checkbox" name="hobby" value="music"> 音乐
<input type="checkbox" name="hobby" value="game"> 游戏
可以多选,会提交多个值
推荐写成数组形式:
<input type="checkbox" name="hobby[]" value="music">
<input type="checkbox" name="hobby[]" value="game">
提交后为:hobby[]=music&hobby[]=game
5. <select>
下拉框
<select name="city">
<option value="">请选择</option>
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option>
</select>
属性 | 说明 |
---|---|
name | 字段名称 |
value (在 <option> 上) | 选项的值 |
selected | 默认选中该项 |
multiple | 多选(按 Ctrl / Command 选多个) |
6. <textarea>
多行文本框
<textarea name="intro" rows="5" cols="30" placeholder="请输入简介">我是学生</textarea>
属性 | 说明 |
---|---|
name | 字段名称 |
value | 默认值(放在起始与结束标签之间) |
rows | 高度(行数) |
cols | 宽度(列数) |
placeholder | 占位文本 |
7. <input type="file">
文件上传框
<input type="file" name="avatar" accept="image/*">
接收上传的文件,要与 <form enctype="multipart/form-data">
一起使用
accept
限制上传类型,如 image/*
表示仅可选图片
8. <button>
按钮
<button type="submit">提交</button>
type 的值 | 含义 |
---|---|
submit | 提交表单(默认) |
reset | 重置表单内容 |
button | 不做任何动作,配合 JS 使用 |
表单数据提交原理(键值对)
数据收集:
当你点击提交按钮时,浏览器会将表单中所有有 name
的字段,以如下格式打包提交给服务器:
- 当用户在表单中输入信息并点击提交按钮时,浏览器会收集输入字段的数据。
- 表单字段会根据其
name
属性生成键值对,name
是键,输入内容是值。例如:
<input type="text" name="username" value="Alice">
<input type="password" name="password" value="123456">
这样,提交表单的数据将是:
username=Alice&password=123456
数据提交:
- 表单通过
method
属性指定数据提交方式,最常见的有两种:- GET:在 URL 中传递数据(如
example.com/register?username=Alice&password=123456
)。适用于数据量小的请求。 - POST:通过请求体发送数据,更加安全(如在 HTTP 请求中提交表单数据),适用于数据量较大的请求或敏感数据。
- GET:在 URL 中传递数据(如
- 表单还可以通过
action
属性指定提交的服务器端脚本的路径。例如:<form action="/submit" method="post">
服务器处理数据
- 当表单数据通过 HTTP 请求发送到服务器时,服务器会处理这些数据(通常在后端使用一些语言,如 PHP、Node.js、Python 等)。
- 服务器会接收到包含键值对的请求数据,并根据这些数据进行相应的逻辑处理,比如将用户信息存储到数据库中,或者验证用户身份。
响应返回给客户端
- 一旦服务器处理完请求,它会生成一个响应(例如,成功信息、错误信息等),并将其发送回客户端。客户端则负责显示这些信息给用户。
完整演示示例
<form action="/submit" method="post" enctype="multipart/form-data">
用户名:<input type="text" name="username" value="张三"><br>
密码:<input type="password" name="pwd"><br>
性别:
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女<br>
爱好:
<input type="checkbox" name="hobby[]" value="music"> 音乐
<input type="checkbox" name="hobby[]" value="game"> 游戏<br>
城市:
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
</select><br>
个人介绍:<br>
<textarea name="intro">我是学生</textarea><br>
上传头像:<input type="file" name="avatar"><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
提交后,浏览器会将数据发送到 /submit
的服务器,包含如下的键值对:
username=张三&pwd=123456&gender=male&hobby[]=music&intro=我是学生
查看提交的 post 请求:

CSS
CSS,全称 层叠样式表(Cascading Style Sheets),是一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言。简单来说,CSS 负责网页的外观和布局,而HTML 负责网页的内容和结构。
引入 CSS 样式的 3 种方式
方式 | 示例 | 说明 |
---|---|---|
行内样式 | <p style="color:red;"> | 写在标签里的样式 |
内部样式 | <style>...</style> | 写在 HTML 的 <head> 中 |
外部样式表 | <link rel="stylesheet"> | 推荐!样式独立写在 .css 文件里 |
总结对比
行内样式
<p style="color: red;">这是红色文字</p>
内部样式
<head>
<style>
p {
color: blue;
}
</style>
</head>
外部样式表
<!-- HTML 文件中引入 -->
<link rel="stylesheet" href="style.css">
方式 | 优点 | 缺点 | 适合场景 |
---|---|---|---|
行内样式 | 快速生效,写在哪作用在哪 | 难维护、不能复用、优先级高容易冲突 | 调试或小范围测试 |
内部样式表 | 样式集中、比行内好维护 | 无法复用样式、页面一多就重复繁琐 | 小型单页项目 |
外部样式表 | 模块化管理、可复用、易维护 | 初学者不易查看、路径错误会失效 | 推荐!大型网站或多个页面项目 |
demo(区分三中样式)
整体结构如下:
project/
├── index.html # 主页面
└── style.css # 外部样式表
1. 外部样式表文件(style.css)
/* style.css */
.external-style {
background-color: lightyellow;
color: green;
padding: 10px;
border: 1px solid green;
}
2. HTML 页面(index.html)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 三种样式方式 Demo</title>
<!-- 外部样式表 -->
<link rel="stylesheet" href="style.css">
<!-- 内部样式表 -->
<style>
.internal-style {
background-color: lightblue;
color: navy;
padding: 10px;
border: 1px solid navy;
}
</style>
</head>
<body>
<h2>1️⃣ 行内样式</h2>
<p style="color: red; background-color: #ffe0e0; padding: 10px; border: 1px solid red;">
这是使用行内样式的段落(Inline CSS)
</p>
<h2>2️⃣ 内部样式表</h2>
<p class="internal-style">
这是使用内部样式表的段落(Internal CSS)
</p>
<h2>3️⃣ 外部样式表</h2>
<p class="external-style">
这是使用外部样式表的段落(External CSS)
</p>
</body>
</html>

基础选择器(告诉浏览器改哪里)
类型 | 语法示例 | 说明 |
---|---|---|
标签选择器 | p {} / div {} | 选中所有 <p> / div {} 标签 |
类选择器 | .box {} | 选中 class="box" 的元素 |
ID选择器 | #title {} | 选中 id="title" 的元素 |
组合选择器 | ul li {} | 选中 ul 下的所有 li |
四种 CSS 选择器区别对比表:
选择器类型 | 写法 | 作用对象 | 适用范围 | 是否可以重复使用 | 优先级(从低到高) |
---|---|---|---|---|---|
标签选择器 | div {} | 所有该 HTML 标签(如所有 <div> ) | 页面中所有该标签元素。缺点:太宽泛,可能影响太多 | ✅ 可以重复 | ⭐ 最低 |
类选择器 | .box {} | 所有 class="box" 的元素 | 用于多个元素复用样式,最常用、最推荐,可多人共用一套样式 | ✅ 可以重复 | ⭐⭐ 中等 |
ID 选择器 | #title {} | id="title" 的唯一元素 | 通常用于唯一元素,像“身份证号码”:一个页面只能有一个这个 id。不推荐当成样式工具,主要用于定位、脚本操作 | ❌ 不建议重复 | ⭐⭐⭐ 高 |
组合选择器 | ul li {} | 只选中 ul 中的 li | 精确控制某些结构。强大且实用,适合复杂结构控制 | ✅ 可重复 | 取决于组合结构 |
demo:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 选择器对比演示</title>
<style>
/* ID 选择器:选中 id="title" 的元素 */
#title {
background-color: lightgreen;
color: darkgreen;
font-weight: bold;
}
/* 标签选择器:选中所有 <div> */
div {
border: 2px dashed gray;
padding: 10px;
margin-bottom: 15px;
}
/* 类选择器:选中 class="box" 的元素 */
.box {
background-color: lightblue;
color: navy;
}
/* 组合选择器:选中 ul 下所有 li */
ul li {
color: red;
font-style: italic;
}
</style>
</head>
<body>
<h2 id="title">我是 ID 选择器控制的标题(#title)</h2>
<div>
我是标签选择器控制的 div(div 选择器)
</div>
<div class="box">
我是类选择器控制的 div(.box 选择器)
</div>
<ul>
<li>组合选择器控制的列表项</li>
<li>组合选择器控制的列表项</li>
</ul>
</body>
</html>

常用样式属性及其参数
样式 | 示例 | 作用 |
---|---|---|
颜色 | color , background-color | 改文字颜色、背景色 |
字体 | font-size , font-weight | 控制大小、粗细 |
边框 | border | 给元素加边框 |
间距 | margin , padding | 外间距、内间距 |
宽高 | width , height | 控制大小 |
对齐 | text-align | 文字居中、靠左靠右 |
常用样式属性及其参数
- 颜色与背景
- color
- 作用:设置文本颜色。
- 参数:颜色名称(如
red
)、十六进制颜色(如#ff0000
)、RGB颜色(如rgb(255,0,0)
)。 - 示例:
color: blue; /* 蓝色 */
color: #ff0000; /* 红色 */
color: rgb(0, 255, 0); /* 绿色 */
- background-color
- 作用:设置元素的背景颜色。
- 参数:同
color
。 - 示例:
background-color: #f2f2f2; /* 灰色背景 */
background-color: rgba(255, 255, 255, 0.5); /* 半透明白色背景 */
- background-image
- 作用:设置背景图像。
- 参数:图像的 URL,其他背景属性如
background-size
、background-position
和background-repeat
。 - 示例:
background-image: url('path/to/image.jpg'); /* 设置背景图像 */
background-size: cover; /* 图像覆盖整个元素 */
background-position: center; /* 图像居中 */
background-repeat: no-repeat; /* 不重复图像 */
- color
- 字体
- font-size
- 作用:设置文本的大小。
- 参数:绝对大小(如
16px
、2em
)、相对大小(如small
,medium
,large
)。 - 示例:
font-size: 16px; /* 16 像素 */
font-size: 1.5em; /* 1.5 倍于父元素的字体大小 */
font-size: large; /* 设置为大字号 */
- font-weight
- 作用:设置文本的粗细。
- 参数:值可以是
normal
(400),bold
(700),bolder
,lighter
,或者数字(100 到 900)。 - 示例:
font-weight: bold; /* 粗体 */
font-weight: 700; /* 700 加粗 */
font-weight: 300; /* 细体 */
- font-family
- 作用:设置文本使用的字体。
- 参数:字体名称(如
Arial
,Verdana
,'Microsoft YaHei'
)。 - 示例:
font-family: 'Microsoft YaHei', Arial, sans-serif; /* 优先使用微软雅黑字体 */
- font-size
- 边框
- border
- 作用:为元素添加边框。
- 参数:边框宽度、样式和颜色。例如
border: 1px solid black;
。 - 示例:
border: 2px solid #ccc; /* 2 像素,实线,灰色边框 */
- 单独设置边框
- 示例:
border-top: 2px solid red; /* 上边框 */
border-bottom: 3px dashed blue; /* 下边框 */
border-left: 4px double green; /* 左边框 */
border-right: 5px solid black; /* 右边框 */
- 示例:
- border
- 间距
- margin
- 作用:设置元素的外边距(即相邻元素之间的空间)。
- 参数:可以单独设置四个方向(如
margin-top
,margin-right
,margin-bottom
,margin-left
),也可以使用简写(如margin: 10px 5px;
表示上下 10px,左右 5px)。 - 示例:
margin: 10px; /* 上下左右都为 10 像素 */
margin: 5px 10px; /* 垂直 5 像素,水平 10 像素 */
margin-top: 20px; /* 只设置上边距 */
- padding
- 作用:设置元素的内边距(即内容与边框之间的空间)。
- 参数:同
margin
的设置方式。 - 示例:
padding: 15px; /* 上下左右都为 15 像素 */
padding: 10px 20px; /* 垂直 10 像素,水平 20 像素 */
padding-left: 10px; /* 只设置左边内边距 */
- margin
- 宽度与高度
- width
- 作用:设置元素的宽度。
- 参数:可以使用像素(如
200px
)、百分比(如50%
)、auto
等。 - 示例:
width: 300px; /* 300 像素宽 */
width: 50%; /* 宽度为父元素宽度的 50% */
- height
- 作用:设置元素的高度。
- 参数:同
width
。 - 示例:
height: 150px; /* 150 像素高 */
height: auto; /* 高度根据内容自动调整 */
- width
- 对齐与布局
- text-align
- 作用:设置文本对齐方式。
- 参数:
left
,right
,center
,justify
。 - 示例:
text-align: center; /* 文本居中对齐 */
text-align: left; /* 文本左对齐 */
text-align: right; /* 文本右对齐 */
- text-align
- 其他有用的样式属性
- display
- 作用:定义元素的显示方式。
- 参数:
block
,inline
,inline-block
,flex
,grid
,none
等。 - 示例:
display: block; /* 块级元素 */
display: inline; /* 行内元素 */
display: flex; /* 采用Flexbox布局 */
- position
- 作用:定义元素的定位方式。
- 参数:
static
,relative
,absolute
,fixed
,sticky
。 - 示例:
position: relative; /* 相对定位 */
position: absolute; /* 绝对定位 */
position: fixed; /* 固定定位,固定在视口 */
- overflow
- 作用:处理内容溢出元素边界的情况。
- 参数:
visible
,hidden
,scroll
,auto
。 - 示例:
overflow: hidden; /* 溢出内容隐藏 */
overflow: scroll; /* 溢出内容可以滚动 */
- display
demo
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>常用样式属性示例</title>
<style>
body {
font-family: sans-serif;
background-color: #f2f2f2;
padding: 20px;
}
.box {
color: white; /* 文字颜色 */
background-color: #4CAF50; /* 背景颜色 */
font-size: 20px; /* 字体大小 */
font-weight: bold; /* 字体粗细 */
border: 3px solid #333; /* 边框 */
margin-bottom: 20px; /* 元素之间的外间距 */
padding: 15px; /* 内间距 */
width: 300px; /* 宽度 */
height: 150px; /* 高度 */
text-align: center; /* 文字居中 */
line-height: 150px; /* 让文字垂直居中 */
}
.left-align {
text-align: left;
}
.right-align {
text-align: right;
}
.center-align {
text-align: center;
}
</style>
</head>
<body>
<h2>常用样式属性展示</h2>
<div class="box">样式演示盒子</div>
<div class="box left-align">左对齐文字</div>
<div class="box right-align">右对齐文字</div>
<div class="box center-align">居中对齐文字</div>
</body>
</html>

盒模型(CSS 的核心概念)
网页上的每一个元素(比如 <div>
、<p>
、<button>
)在浏览器里,都会被看作是一个“盒子”。
这个盒子包含:内容区 + 内边距 + 边框 + 外边距
,就构成了“盒模型”。
每个元素就像一个盒子,有 4 层:盒模型的结构图:
+---------------------------+
| margin | 外边距(margin)外层间距,元素之间的空隙
| +---------------------+ |
| | border | | 边框(border)包裹内容和内边距的“框线”
| | +--------------+ | |
| | | padding | | | 内边距(padding)内容与边框之间的“空隙”
| | | +--------+ | | |
| | | | content | | | | 内容区(content)真正展示文本、图片的位置
| | | +--------+ | | |
| | +--------------+ | |
| +---------------------+ |
+---------------------------+
部分 | 含义 | 常见用途 |
---|---|---|
content | 内容区:实际内容(文字、图像) | 比如:width 、height 就是设置它 |
padding | 内边距:内容和边框之间的距离 | 不改变背景,常用来“撑开内容” |
border | 边框:环绕内容和内边距的线条 | 可设置宽度、颜色、样式(实线、虚线等) |
margin | 外边距:盒子与外部其他元素的距离 | 用于“元素之间的空隙” |
计算盒子的总宽度和高度
默认是标准盒模型(box-sizing: content-box
)
元素总宽度 = content 宽度 + padding + border + margin
元素总高度 = content 高度 + padding + border + margin
举例:
div {
width: 200px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}
总宽度 = 200 + 10*2 + 2*2 + 20*2 = 264px
box-sizing:控制盒模型计算方式
box-sizing: content-box; /* 默认,宽高只算内容区 */
box-sizing: border-box; /* 推荐,宽高包含 padding 和 border */
推荐你在项目里统一设置:
* {
box-sizing: border-box;
}
这样你设置的 width
和 height
就包括了 padding 和 border,不用自己手动减掉,布局更容易控制。
demo:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>box-sizing 对比 Demo</title>
<style>
.container {
display: flex;
gap: 20px;
}
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
background-color: lightblue;
font-size: 14px;
}
.content-box {
box-sizing: content-box; /* 默认值 */
}
.border-box {
box-sizing: border-box; /* 推荐使用 */
}
.label {
font-weight: bold;
margin-bottom: 5px;
}
</style>
</head>
<body>
<h2>box-sizing: content-box vs border-box</h2>
<div class="container">
<div class="box content-box">
<div class="label">content-box</div>
总尺寸 = 内容200×100 + padding + border(会变大)
</div>
<div class="box border-box">
<div class="label">border-box</div>
总尺寸固定200×100,padding + border 内含其中
</div>
</div>
</body>
</html>

总结对比
属性 | content-box (默认) | border-box (推荐) |
---|---|---|
宽高定义 | 只包含 content | 包含 content + padding + border |
实际变大? | ✅ 是的,需手算总宽高 | ❌ 否,浏览器自动帮你包起来 |
控制更方便? | ❌ 不方便 | ✅ 更容易控制布局 |
是否推荐 | ❌ 不推荐 | ✅ 推荐在项目中统一设置 |
布局入门(让页面更整齐)
布局方式 | 简单说明 |
---|---|
display | 设置为 block、inline、inline-block |
float | 左右浮动布局 |
flex | 弹性布局,建议入门时了解方向、居中 |
1. display
—— 控制元素的“表现形式”
值类型 | 描述 |
---|---|
block | 块级元素:独占一行,支持设置宽高、内外边距。常见于 div , p , h1 等 |
inline | 行内元素:不换行,不支持设置宽高,如 span , a , strong 等 |
inline-block | 行内块级元素:不换行但支持设置宽高,结合两者优点 |
none | 不显示该元素(类似隐藏) |
2. float
—— 传统的“左右浮动布局”
float
原本是用来实现图文混排的,但也常用于早期的两栏/三栏布局。
属性值 | 说明 |
---|---|
left | 元素向左浮动 |
right | 元素向右浮动 |
none | 不浮动(默认值) |
浮动元素会脱离文档流,可能导致“高度塌陷”问题,需要 clearfix
清除。
3. flex
—— 现代网页推荐使用的“弹性布局”
flex
是当前主流的布局方式,适用于一维布局(横排或竖排),语法灵活。
常用属性(放在容器上):
属性 | 示例值 | 含义 |
---|---|---|
flex-direction | row (默认)、column | 排列方向,水平或垂直 |
justify-content | center 、space-between | 主轴对齐方式(比如横向居中) |
align-items | center 、flex-start | 交叉轴对齐方式(比如垂直居中) |
demo:区分display: inline-block
、float
、flex
页面分为三组盒子:每组用一种布局方式排列三个盒子(红、绿、蓝)
每个盒子大小相同,内有文字,布局方法不同
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>display vs float vs flex</title>
<style>
body {
font-family: sans-serif;
padding: 20px;
}
h2 {
margin-top: 40px;
}
/* 所有盒子的通用样式 */
.box {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
font-weight: bold;
margin-right: 10px;
}
.red { background: #e74c3c; }
.green { background: #27ae60; }
.blue { background: #3498db; }
/* inline-block 容器样式 */
.inline-block-container .box {
display: inline-block;
}
/* float 容器样式 */
.float-container {
overflow: hidden; /* 清除浮动 */
}
.float-container .box {
float: left;
}
/* flex 容器样式 */
.flex-container {
display: flex;
}
</style>
</head>
<body>
<h1>display vs float vs flex 对比示例</h1>
<h2>方式 1:display: inline-block</h2>
<div class="inline-block-container">
<div class="box red">A</div>
<div class="box green">B</div>
<div class="box blue">C</div>
</div>
<h2>方式 2:float</h2>
<div class="float-container">
<div class="box red">A</div>
<div class="box green">B</div>
<div class="box blue">C</div>
</div>
<h2>方式 3:flex</h2>
<div class="flex-container">
<div class="box red">A</div>
<div class="box green">B</div>
<div class="box blue">C</div>
</div>
</body>
</html>

布局方式 | 是否脱离文档流 | 容器设置 | 子元素设置 | 自动换行 | 推荐程度 |
---|---|---|---|---|---|
inline-block | 否 | 无 | display:inline-block | 会有空隙 | ⭐⭐⭐ |
float | ✅ 是 | overflow:hidden 等清除浮动 | float:left | ❌ 不换行 | ⭐⭐ |
flex ✅(推荐) | 否 | display:flex | 子元素无特殊要求 | ✅ 可灵活控制 | ⭐⭐⭐⭐⭐ |
制作一个小网页
涉及到的知识点:
内容 | 在哪体现 |
---|---|
内部样式表 | <style>...</style> 写在 <head> 中 |
选择器用法 | 标签选择器(label)、类(.form-group )、ID(#title ) |
常用样式属性 | color 、font-size 、margin 、padding 、border 、width 、height |
盒模型 | box-sizing: border-box |
布局 | 表单宽度、按钮 margin: 0 auto 水平居中 |
表单字段 | input[type="text"] 、password 、radio 、checkbox 、textarea |
编写过程
首先满足html 部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>基础表单页面</title>
</head>
<body>
<h2>用户注册</h2>
<form action="#" method="post">
<label for="username">用户名</label>
<input type="text" id="username" name="username" required>
<label for="password">密码</label>
<input type="password" id="password" name="password" required>
<label>性别</label>
<label><input type="radio" name="gender" value="male"> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>
<label>爱好</label>
<label><input type="checkbox" name="hobby" value="music"> 音乐</label>
<label><input type="checkbox" name="hobby" value="sports"> 运动</label>
<label><input type="checkbox" name="hobby" value="reading"> 阅读</label>
<label for="bio">个人简介</label>
<textarea id="bio" name="bio" rows="4"></textarea>
<label for="avatar">上传头像</label>
<input type="file" id="avatar" name="avatar">
<button type="submit">提交</button>
</form>
</body>
</html>

这里会发现,结构会排列在一整行,所以我们用 div 进行简单分块,并用 class 提前规划好布局,起好对应布局的 class 名称
<body>
<div class="form-container">
<h2>用户注册</h2>
<form action="#" method="post">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<label>性别</label>
<div class="form-group-inline">
<label><input type="radio" name="gender" value="male"> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>
</div>
</div>
<div class="form-group">
<label>爱好</label>
<div class="form-group-inline">
<label><input type="checkbox" name="hobby" value="music"> 音乐</label>
<label><input type="checkbox" name="hobby" value="sports"> 运动</label>
<label><input type="checkbox" name="hobby" value="reading"> 阅读</label>
</div>
</div>
<div class="form-group">
<label for="bio">个人简介</label>
<textarea id="bio" name="bio" rows="4"></textarea>
</div>
<div class="form-group">
<label for="avatar">上传头像</label>
<input type="file" id="avatar" name="avatar">
</div>
<div class="form-group">
<button type="submit">提交</button>
</div>
</form>
</div>
</body>

通过 CSS 添加 border来划分影响区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
border: 3px solid purple;
}
.form-container {
border: 3px solid blue;
}
.form-group {
border: 3px solid green;
}
label {
border: 3px solid orange;
}
input[type = "text"],
input[type = "password"],
input[type = "radio"],
input[type = "checkbox"],
input[type = "file"],
textarea,
select {
appearance: none;
border: 3px solid red;
}
</style>
<title>用户注册表</title>
</head>
<body>
<div class="form-container">
<h2>用户注册</h2>
<form action="#" method="post">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id ='username' name="username">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id ='password' name="password">
</div>
<div class="form-group">
<label >性别</label>
<label><input type="radio" name="gender" value="male">男</label>
<label><input type="radio" name="gender" value="female">女</label>
</div>
<div class="form-group">
<label >爱好</label>
<label for=""><input type="checkbox" name="hobby" value="music">音乐</label>
<label for=""><input type="checkbox" name="hobby" value="sports">运动</label>
<label for=""><input type="checkbox" name="hobby" value="read">阅读</label>
</div>
<div class="form-group">
<label for="bio">个人简介</label>
<textarea name="bio" id="bio" rows="4"></textarea>
</div>
<div class="form-group">
<label for="avatar">上传头像</label>
<input type="file" id="avatar" name="avatar">
</div>
<div class="form-group">
<button type="submit"> 提交按钮</button>
</div>
</form>
</div>
</body>
</html>

在 style 中添加 border 查看影响范围:我们可以看到我们的 style 中有多个布局,从外到内分别为:
body-> form-container -> form-group -> label/input[type="xxx"]/textarea/select/button

在对应区域调试对应样式,最后注释掉 border 即可
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>基础表单页面</title>
<style>
/* 设置页面整体字体、背景色和内边距 */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
padding: 40px;
}
/* 表单容器,白色背景,内边距,圆角,最大宽度和居中 */
.form-container {
background: white;
padding: 30px;
border-radius: 8px;
max-width: 400px;
margin: auto;
/* 轻微阴影效果 */
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
h2 {
text-align: center; /* 将文本对齐方式设置为居中 */
}
/* 每个表单组之间的下间距 */
.form-group {
margin-bottom: 15px;
}
/* 标签统一设置为块级元素,加粗,底部有间距 */
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
/* 给文本框、密码框、文件上传、文本域和下拉选择框设置统一样式 */
input[type="text"],
input[type="password"],
input[type="file"],
textarea,
select {
width: 100%; /* 宽度撑满容器 */
padding: 8px; /* 内边距 */
border: 1px solid #ccc; /* 灰色边框 */
border-radius: 4px; /* 圆角 */
box-sizing: border-box; /* 包含内边距和边框在宽度内 */
}
/* 性别和爱好那块,横向排列,间距10px */
.form-group-inline {
display: flex;
gap: 10px;
}
/* 内联标签字体不加粗 */
.form-group-inline label {
font-weight: normal;
}
/* 提交按钮样式 */
button {
background-color: #4CAF50; /* 绿色背景 */
color: white; /* 字体白色 */
padding: 10px 15px; /* 内边距 */
border: none; /* 去掉默认边框 */
border-radius: 4px; /* 圆角 */
cursor: pointer; /* 鼠标悬浮显示手指 */
}
/* 伪类选择器,按钮悬停时变深绿 */
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="form-container">
<h2>用户注册</h2>
<!-- 表单开始,提交时用POST方法发送 -->
<form action="#" method="post">
<!-- 用户名输入框组 -->
<div class="form-group">
<label for="username">用户名</label>
<!-- required 表示必填 -->
<input type="text" id="username" name="username" required>
</div>
<!-- 密码输入框组 -->
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" required>
</div>
<!-- 性别单选框组 -->
<div class="form-group">
<label>性别</label>
<div class="form-group-inline">
<label><input type="radio" name="gender" value="male"> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>
</div>
</div>
<!-- 爱好多选框组 -->
<div class="form-group">
<label>爱好</label>
<div class="form-group-inline">
<label><input type="checkbox" name="hobby" value="music"> 音乐</label>
<label><input type="checkbox" name="hobby" value="sports"> 运动</label>
<label><input type="checkbox" name="hobby" value="reading"> 阅读</label>
</div>
</div>
<!-- 个人简介多行文本输入框 -->
<div class="form-group">
<label for="bio">个人简介</label>
<textarea id="bio" name="bio" rows="4"></textarea>
</div>
<!-- 文件上传组 -->
<div class="form-group">
<label for="avatar">上传头像</label>
<input type="file" id="avatar" name="avatar">
</div>
<!-- 提交按钮组 -->
<div class="form-group">
<button type="submit">提交</button>
</div>
</form>
</div>
</body>
</html>
最终展示结果

发布者:LJH,转发请注明出处:https://www.ljh.cool/42508.html