HTML+CSS

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 属性指定输入类型(如 textpasswordemail等)。
  • <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(参数在请求体中,更安全)

最重要的两个属性:namevalue

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-sizebackground-positionbackground-repeat
      • 示例:
        background-image: url('path/to/image.jpg'); /* 设置背景图像 */
        background-size: cover; /* 图像覆盖整个元素 */
        background-position: center; /* 图像居中 */
        background-repeat: no-repeat; /* 不重复图像 */
  • 字体
    • font-size
      • 作用:设置文本的大小。
      • 参数:绝对大小(如 16px2em)、相对大小(如 small, medium, large)。
      • 示例:
        font-size: 16px; /* 16 像素 */
        font-size: 1.5em; /* 1.5 倍于父元素的字体大小 */
        font-size: large; /* 设置为大字号 */
    • font-weight
      • 作用:设置文本的粗细。
      • 参数:值可以是 normal (400),bold (700),bolderlighter,或者数字(100 到 900)。
      • 示例:
        font-weight: bold; /* 粗体 */
        font-weight: 700; /* 700 加粗 */
        font-weight: 300; /* 细体 */
    • font-family
      • 作用:设置文本使用的字体。
      • 参数:字体名称(如 ArialVerdana'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内容区:实际内容(文字、图像)比如:widthheight 就是设置它
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;
}

这样你设置的 widthheight 就包括了 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-contentcenterspace-between主轴对齐方式(比如横向居中)
align-itemscenterflex-start交叉轴对齐方式(比如垂直居中)

demo:区分display: inline-blockfloatflex

页面分为三组盒子:每组用一种布局方式排列三个盒子(红、绿、蓝)

每个盒子大小相同,内有文字,布局方法不同

<!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-blockdisplay:inline-block会有空隙⭐⭐⭐
float✅ 是overflow:hidden 等清除浮动float:left❌ 不换行⭐⭐
flex ✅(推荐)display:flex子元素无特殊要求✅ 可灵活控制⭐⭐⭐⭐⭐

制作一个小网页

涉及到的知识点:

内容在哪体现
内部样式表<style>...</style> 写在 <head>
选择器用法标签选择器(label)、类(.form-group)、ID(#title
常用样式属性colorfont-sizemarginpaddingborderwidthheight
盒模型box-sizing: border-box
布局表单宽度、按钮 margin: 0 auto 水平居中
表单字段input[type="text"]passwordradiocheckboxtextarea

编写过程

首先满足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
Previous 2025年5月28日 上午12:55
Next 2025年6月19日 下午5:22

相关推荐

发表回复

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