投稿
  1. Blog of HowellHome
  2. python 进阶

HTML+CSS

LJH • • python 进阶 • 291 views

HTML（HyperText Markup Language，超文本标记语言）是一种标记语言，用于创建和设计网页内容。它是网页的基本构建块，用于描述网页的结构和内容。HTML使用各种标签（tags）来定义文档中的文本、图像、链接、表单等元素。

内容 隐藏
1 HTML 基本结构
2 常用HTML标签：
3 Demo 演示（直接浏览器打开此html）
4 HTML 表单详解
4.1 最重要的两个属性：name 和 value
4.2 详细讲解常见表单组件及属性
4.3 表单数据提交原理（键值对）
5 CSS
5.1 引入 CSS 样式的 3 种方式
5.2 基础选择器（告诉浏览器改哪里）
5.3 常用样式属性及其参数
5.4 盒模型（CSS 的核心概念）
5.5 布局入门（让页面更整齐）
5.6 制作一个小网页

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>&copy; 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 请求中提交表单数据），适用于数据量较大的请求或敏感数据。
  • 表单还可以通过 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 请求：

HTML+CSS

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>
HTML+CSS

基础选择器（告诉浏览器改哪里）

类型语法示例说明
标签选择器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>
HTML+CSS

常用样式属性及其参数

样式示例作用
颜色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; /* 不重复图像 */
  • 字体
    • 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; /* 优先使用微软雅黑字体 */
  • 边框
    • 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;  /* 右边框 */
  • 间距
    • 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;         /* 只设置左边内边距 */
  • 宽度与高度
    • width
      • 作用：设置元素的宽度。
      • 参数：可以使用像素（如 200px）、百分比（如 50%）、auto 等。
      • 示例：
        width: 300px;               /* 300 像素宽 */
        width: 50%;                 /* 宽度为父元素宽度的 50% */
    • height
      • 作用：设置元素的高度。
      • 参数：同 width。
      • 示例：
        height: 150px;              /* 150 像素高 */
        height: auto;               /* 高度根据内容自动调整 */
  • 对齐与布局
    • text-align
      • 作用：设置文本对齐方式。
      • 参数：left, right, center, justify。
      • 示例： 
        text-align: center;          /* 文本居中对齐 */
        text-align: left;            /* 文本左对齐 */
        text-align: right;           /* 文本右对齐 */
  • 其他有用的样式属性
    • 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;            /* 溢出内容可以滚动 */

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>
HTML+CSS

盒模型（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>
HTML+CSS

总结对比

属性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-directionrow（默认）、column排列方向，水平或垂直
justify-contentcenter、space-between主轴对齐方式（比如横向居中）
align-itemscenter、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>
HTML+CSS
布局方式是否脱离文档流容器设置子元素设置自动换行推荐程度
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>
HTML+CSS

这里会发现，结构会排列在一整行，所以我们用 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>
HTML+CSS

通过 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>
HTML+CSS

在 style 中添加 border 查看影响范围：我们可以看到我们的 style 中有多个布局，从外到内分别为：

body-> form-container -> form-group -> label/input[type="xxx"]/textarea/select/button

HTML+CSS

在对应区域调试对应样式，最后注释掉 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>

最终展示结果

HTML+CSS

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

Like (0)
LJH的头像LJH
0 0
Previous 2025年5月28日 上午12:55
Next 2025年6月19日 下午5:22

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注