学习HTML基础 | 豆包MarsCode AI刷题前言 HTML 基础-青训营笔记超文本标记语言（英语：Hyper

前言

HTML 基础-青训营笔记

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。学习网页的基本构建块，从简单的文本、链接、列表到更复杂的表单和表格，去进一步增强了对网页结构和布局的理解。

文本格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HTML基础学习 - 标签与结构</title>
</head>
<body>
    <!-- 页面标题 -->
    <h1>HTML 基础学习：标签与结构</h1>
    <hr>

    <!-- 段落示例 -->
    <p>HTML 是用来创建网页的一种标记语言，它通过标签来定义页面内容。</p>

    <!-- 强调文字 -->
    <p><b>HTML</b> 使用了不同的标签，如 <i>斜体</i> 和 <b>加粗</b> 标签来展示不同的文本效果。</p>

    <!-- 列表示例 -->
    <h2>HTML 常见标签：</h2>
    <ul>
        <li>&lt;html&gt; - 页面根标签</li>
        <li>&lt;head&gt; - 页面头部，包含元数据</li>
        <li>&lt;body&gt; - 页面主体内容</li>
        <li>&lt;h1&gt; - 标题标签</li>
        <li>&lt;p&gt; - 段落标签</li>
    </ul>

    <!-- 链接示例 -->
    <h2>跳转链接</h2>
    <p>你可以使用<a href="https://www.w3schools.com" target="_blank">W3Schools</a> 来学习更多的 HTML 知识。</p>

    <!-- 图片示例 -->
    <h2>网页中的图片</h2>
    <img src="https://www.w3schools.com/w3images/fjords.jpg" alt="美丽的峡湾" width="500">

    <!-- 表格示例 -->
    <h2>HTML 表格</h2>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>30</td>
            <td>上海</td>
        </tr>
    </table>

    <!-- 代码块示例 -->
    <h2>HTML 代码块</h2>
    <pre>
        <code>
            &lt;p&gt;这是一个段落&lt;/p&gt;
        </code>
    </pre>
</body>
</html>

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表示例</title>
</head>
<body>
    <!-- 无序列表 (unordered list) -->
    <h2>无序列表：用于表示没有特定顺序的项目</h2>
    <ul>
        <!-- 每个列表项用 <li> 标签表示 -->
        <li>榴莲</li>
        <li>苹果</li>
        <li>香蕉</li>
        <li>草莓</li>
        <li>哈密瓜</li>
    </ul>

    <!-- 有序列表 (ordered list) -->
    <h2>有序列表：用于表示有顺序的项目</h2>
    <ol>
        <!-- 每个列表项用 <li> 标签表示，列表项会自动按顺序编号 -->
        <li>你：100分</li>
        <li>我：90分</li>
        <li>他：60分</li>
    </ol>

    <!-- 自定义列表 (definition list) -->
    <h2>自定义列表：用于表示术语及其解释</h2>
    <dl>
        <!-- 自定义列表项中的术语，用 <dt> 标签表示 -->
        <dt>帮助中心</dt>
        <!-- 自定义列表项中的描述，用 <dd> 标签表示 -->
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>

        <dt>服务支持</dt>
        <dd>售后政策</dd>
        <dd>自助服务</dd>
        <dd>相关下载</dd>
    </dl>

</body>
</html>

分析列表代码

1. 无序列表 (）

用途：表示没有特定顺序的项目。
标签：使用 <ul> 来定义无序列表，使用 <li> 来定义每一项。
特点：默认情况下，列表项前会显示一个圆点（或者其他的标记，取决于浏览器的默认样式）。
- 榴莲
- 苹果
- 香蕉
- 草莓
- 哈密瓜

场景：适用于列举不需要排序或不按特定顺序展示的项，如购物清单、食物清单等。

2.有序列表（)

用途：表示有特定顺序的项目。
标签：使用 <ol> 来定义有序列表，使用 <li> 来定义每一项。
特点：列表项会根据顺序自动编号，常用于步骤、排名、日期等需要明确顺序的内容。
1. 你：100分
2. 我：90分
3. 他：60分

场景：适用于有明确顺序的情况，如排序成绩单、步骤清单等。

3. 自定义列表 (, , )

用途：表示一组术语及其对应的定义或说明。
标签：使用 <dl> 来定义自定义列表，<dt> 标签用于定义术语，<dd> 标签用于定义或描述术语的内容。
特点：这种列表不自动编号，它的目的是清晰地展示“术语-定义”的关系。
帮助中心

账户管理

购物指南

订单操作
```
<dt>服务支持</dt>
<dd>售后政策</dd>
<dd>自助服务</dd>
<dd>相关下载</dd>
```

场景：适用于展示词汇及其定义，常见于帮助文档、FAQ（常见问题解答）等。

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格示例</title>
    <style>
        /* 设置表格样式，调整表格的宽度 */
        table {
            width: 50%;
            margin: 20px auto;
            border-collapse: collapse; /* 合并边框 */
        }
        th, td {
            padding: 10px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2; /* 设置表头背景色 */
        }
        caption {
            font-size: 1.5em;
            font-weight: bold;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9; /* 设置偶数行背景色 */
        }
    </style>
</head>
<body>
    <!-- 表格开始 -->
    <table border="1">
        <!-- 表格标题 -->
        <caption><strong>学生成绩表</strong></caption>
        
        <!-- 表头部分 -->
        <thead>
            <tr>
                <!-- 表头单元格 th -->
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>

        <!-- 表格主体部分 -->
        <tbody>
            <tr>
                <td>你</td>
                <!-- 跨行合并：rowspan="2" -->
                <td rowspan="2">100分</td>
                <td>牛的</td>
            </tr>
            <tr>
                <td>我</td>
                <!-- 这一行省略了成绩（因为使用了 rowspan 合并了上面的成绩） -->
                <td>还行</td>
            </tr>
            <tr>
                <td>他</td>
                <td>60分</td>
                <td>不错呦</td>
            </tr>
        </tbody>

        <!-- 表格底部部分 -->
        <tfoot>
            <tr>
                <td>总结</td>
                <!-- 跨列合并：colspan="2" -->
                <td colspan="2">还不错呦</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

代码解析

1. 表格结构

<table> 标签用于定义表格。
<thead> 标签包裹表头部分，通常包含列标题（<th> 标签）。
<tbody> 标签包裹表格主体部分，通常包含数据行（<td> 标签）。
<tfoot> 标签用于表格的底部部分，通常用于总结或汇总数据。

2. 表格合并单元格

rowspan="2"：表示该单元格会跨越两行，适用于纵向合并。例如，"你"的成绩跨越了两行。
colspan="2"：表示该单元格会跨越两列，适用于横向合并。在总结行中，“还不错呦”跨越了两列。

3. 表格样式

border="1"：为表格添加边框，边框宽度为1像素。
border-collapse: collapse;：使表格的边框合并为一个，避免每个单元格有独立的边框。
padding: 10px;：为单元格内容添加内边距，增强表格的可读性。
text-align: center;：使表格中的文本居中对齐。
background-color: #f2f2f2;：设置表头的背景色，使其更易于区分。

4. 表格的标题

<caption>：提供表格的标题，用粗体显示“学生成绩表”。

5. 偶数行背景色

tr:nth-child(even)：使用 CSS 选择器设置偶数行的背景色，以便表格看起来更清晰易读。

表单

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>表单</title></head><body>    <form action="#">    <!-- text 文本框 -->    <!-- placeholder 提示 -->    邮箱：<input type="text" placeholder="邮箱/手机号">    <br><br>     <!-- password 密码框 -->    密码：<input type="password" placeholder="请输入六位密码">    <br><br>     <!-- radio 单选框 -->    <!-- checked 默认选中 -->    性别：<input type="radio" name="sex" checked>中性     <!-- label 表单标签(点击文字选中) -->         <input type="radio" name="sex" id="nan"><label for="nan">男</label>         <label><input type="radio" name="sex">女</label>     <br><br>        <!-- checkbox 多选框 -->    爱好：<input type="checkbox">    <br><br>     <!-- file 文件 -->    <!-- multiple 多文件选择 -->    文件：<input type="file" multiple>    <br><br>     协议：<input type="checkbox" checked>默认勾选    <br><br>     <!-- button 按钮 -->    <input type="submit">    <input type="reset">    <input type="button" value="普通按钮">    <br><br>     <button>按钮</button>    <button type="submit">提交</button>    <button type="reset">重置</button>    <button type="button">button按钮，js添加功能</button>    <br><br>     <!-- select 下拉菜单 -->    <select>        <option>北京</option>        <option  selected>上海</option>        <option>深圳</option>        <option>杭州</option>    </select>    <br><br>     <!-- textarea 文本域 -->    <!-- CSS 禁用掉右下角拖拽 -->    <textarea name="#" id="#" cols="30" rows="10"></textarea> </form> </body></html>

继续代码解析

表单结构：

使用 <form> 标签定义了表单，表单中的各个输入元素通过简单的 HTML 标签实现，易于理解和维护。

多种输入元素的展示：

示例包含了各种常见的表单元素：

文本框 (<input type="text">)；

密码框 (<input type="password">)；

单选框 (<input type="radio">)；

多选框 (<input type="checkbox">)；

文件上传框 (<input type="file">)；

提交按钮、重置按钮和普通按钮；

下拉菜单 (<select>)；

文本域 (<textarea>)。

标签的使用：

使用 <label> 标签来为单选框提供描述，并通过 for 属性与输入元素关联，增强了可访问性（例如，点击文本就可以选中对应的单选框）。

基本交互功能：

通过 <button> 和 <input> 元素提供了基本的交互功能，包括提交、重置和普通按钮。此外，还使用了 multiple 属性让文件上传框支持选择多个文件。

学习总结

HTML 是网页开发的基础，掌握 HTML 的基础标签和结构可以帮助我们构建简单的网页。随着对 HTML 的深入学习，结合 CSS 和 JavaScript，可以实现更复杂的网页效果。HTML5 的新特性如语义化标签和多媒体支持，让网页更加符合现代开发需求，提升用户体验。总的来说，学习 HTML 是每个前端开发者的第一步，也是成为像我们这些开发者爱好者的基础之一。

通过在青训营的 HTML 表单实践和学习，能够去理解和掌握多种常见的表单元素及其使用方式。表单是 Web 开发中非常重要的组成部分，用于收集用户输入并将数据发送到服务器进行处理。在 HTML 中，表单元素的设计和实现直接影响着用户体验和交互效果。时间很快，我们得去抓住生活，学习，未来发展，抽时间学习HTML语义化，摸了一点🐟，但我会马上补上，这是青训营前端的入门学习的笔记一，接下来是html结构，css，js的重点总结了，加油。

学习HTML基础 | 豆包MarsCode AI刷题

前言