三、HTML文本标签

1、创建一个名为html-study的文件夹并使用VSCode打开，再创建一个名为2.HTML文本标签.html

<!DOCTYPE html>
<html>
    <!--  h标签:定义网页中的标题,h1-h6 -->
    <!--  定义一个1级标题 -->
    <h1>一、讲解HTML语法</h1>
    <!-- 标签怎么使用 -->
    <h2>1.1 标签的使用</h2>
    <h3>1.1.1 文本标签的使用</h3>
    <p>p标签用于表示网页中的段落,一般会把一段文字放在p标签内</p>
    <p>无畏是青春的态度，热AI是时代的脉搏。
        <span style="color: red;">各位新同学正以无畏的姿态奔赴通用人工智能的星辰大海！</span>
作为引领AI时代浪潮的主力军，广阔舞台，待你大展身手。
乘风破浪，勇往直前，未来百度将与你一起，创造无限可能！
        <!--
            <br />表示换行

        -->
        <br />
        <strong>百度2025校园招聘简历投递：</strong><em>https://talent.baidu.com/jobs/list</em></strong>
    </p>
    <span>
        span标签一般用于表示网页中的行业元素,或者是对一部分内容生效,通常和css一起使用
    </span>
    <h3>1.1.2 表格标签的使用</h3>
    <h2>1.2 设置网页的样式</h2>
</html>

针对上面代码进行说明：

标题标签

  • <h1> 到 <h6>
  • 作用：定义标题层级，<h1> 最高级（通常页面唯一），<h6> 最低级。

文本内容标签

  • \

    标签

  • 作用：定义段落，自动添加上下边距。
  • \
    标签
  • 作用：强制换行（单标签，无需闭合）。
  • \ 标签
  • 作用：加粗文本，表示语义化强调（推荐替代 <b>）
  • \ 标签
  • 作用：斜体文本，表示语义化强调（推荐替代 \<i>）

内联样式与容器

  • \ 标签
  • 作用：行内容器，用于包裹局部内容（需配合 CSS 生效样式）。

代码注释

  • <!-- 注释内容 -->
  • 作用：添加解释性文字，浏览器不渲染

2、双击2.HTML文本标签.html

image-20250518200203205

四、HTML列表标签

4.1 有序列表 （Ordered List）

4.1.1 什么是有序列表？

有序列表表示内容有明确顺序，每项前会自动编号。

常见场景：

  • 操作步骤
  • 排名列表
  • 学习计划

4.1.2 基本语法

<ol>
  <li>打开浏览器</li>
  <li>输入网址</li>
  <li>进入网页</li>
</ol>

显示效果：

  1. 打开浏览器
  2. 输入网址
  3. 进入网页

4.1.3 设置编号类型

<ol type="A">
  <li>第一章</li>
  <li>第二章</li>
</ol>

type 属性支持：

值 编号类型
1 数字（默认）
A 大写字母
a 小写字母
I 罗马数字大写
i 罗马数字小写

4.1.4 设置起始编号

效果编号从 5 开始。

<ol start="5">
  <li>第五步</li>
  <li>第六步</li>
</ol>

4.1.5 示例说明

1、创建一个名为html-study的文件夹并使用VSCode打开，再创建一个名为3-1.HTML列表标签-有序列表.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>有序列表示例</title>
</head>
<body>
    <h2>烹饪步骤（有序列表）</h2>
    <ol type="1" start="1">
        <li>准备食材：鸡蛋、西红柿</li>
        <li>热锅倒油</li>
        <li>翻炒西红柿</li>
        <li>加入鸡蛋炒熟</li>
    </ol>
</body>
</html>

2、双击【3-1.HTML列表标签-有序列表.html】

image-20250518201121447

4.2 无序列表 （Unordered List）

4.2.1 什么是无序列表？

无序列表表示没有顺序要求的内容，每一项前面默认是一个小圆点。

常见场景：

  • 菜单栏
  • 功能列表
  • 分类展示

4.2.2 基本语法

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橘子</li>
</ul>

显示效果：

  • 苹果
  • 香蕉
  • 橘子

4.2.3 ul + li 结构说明

标签 含义
<ul> unordered list（无序列表容器）
<li> list item（列表项）

4.2.4 示例说明

1、创建一个名为html-study的文件夹并使用VSCode打开，再创建一个名为3-2.HTML列表标签-无序列表.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>无序列表示例</title>
    <style>
        ul.square { list-style-type: square; }
        ul.check { list-style-type: "✔ "; }
    </style>
</head>
<body>
    <h2>购物清单（无序列表）</h2>
    <ul>
        <li>牛奶</li>
        <li>面包</li>
        <li>水果</li>
    </ul>

    <h2>任务列表（自定义符号）</h2>
    <ul class="check">
        <li>完成HTML作业</li>
        <li>提交项目报告</li>
    </ul>
</body>
</html>

2、双击【3-2.HTML列表标签-无序列表 .html】

image-20250518201319702

4.3 描述列表

4.3.1 什么是描述列表？

描述列表用于解释说明某个术语或概念。

常见场景：

  • 词汇解释
  • FAQ 问答
  • 产品参数说明

4.3.2 基本语法

<dl>
  <dt>HTML</dt>
  <dd>一种用于创建网页结构的标记语言。</dd>

  <dt>CSS</dt>
  <dd>用于美化网页样式的语言。</dd>
</dl>

4.3.3 标签说明

标签 含义
<dl> description list（描述列表容器）
<dt> description term（术语）
<dd> description description（描述内容）

4.3.4 示例说明

1、创建一个名为html-study的文件夹并使用VSCode打开，再创建一个名为3-3.HTML列表标签-描述列表.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>描述列表示例</title>
    <style>
        dt { font-weight: bold; color: #2c3e50; }
        dd { margin-left: 20px; color: #7f8c8d; }
    </style>
</head>
<body>
    <h2>技术术语解释（描述列表）</h2>
    <dl>
        <dt>HTML</dt>
        <dd>网页结构定义语言</dd>

        <dt>CSS</dt>
        <dd>控制网页样式的语言</dd>

        <dt>JavaScript</dt>
        <dd>实现网页交互的脚本语言</dd>
    </dl>

    <h2>浏览器支持（多描述项）</h2>
    <dl>
        <dt>主流浏览器</dt>
        <dd>Google Chrome</dd>
        <dd>Mozilla Firefox</dd>
        <dd>Apple Safari</dd>
    </dl>
</body>
</html>

2、双击【3-3.HTML列表标签-描述列表.html】

image-20250518201531789

4.4 三种列表对比总结

类型 标签 特点 场景
无序列表 ul + li 无顺序，圆点符号 菜单、分类
有序列表 ol + li 有顺序，自动编号 步骤、排名
描述列表 dl + dt + dd 术语解释结构 概念说明、FAQ

1、创建一个名为html-study的文件夹并使用VSCode打开，再创建一个名为3-4.HTML列表标签-对比总结.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>列表类型对比</title>
    <style>
        .list-box { margin: 20px; padding: 15px; border: 1px solid #ddd; }
        h3 { color: #3498db; }
    </style>
</head>
<body>
    <div class="list-box">
        <h3>有序列表 &lt;ol&gt;</h3>
        <ol>
            <li>步骤1</li>
            <li>步骤2</li>
        </ol>
        <p><strong>用途</strong>：流程步骤、排名</p>
    </div>

    <div class="list-box">
        <h3>无序列表 &lt;ul&gt;</h3>
        <ul>
            <li>项目A</li>
            <li>项目B</li>
        </ul>
        <p><strong>用途</strong>：并列清单、菜单</p>
    </div>

    <div class="list-box">
        <h3>描述列表 &lt;dl&gt;</h3>
        <dl>
            <dt>术语</dt>
            <dd>解释说明</dd>
        </dl>
        <p><strong>用途</strong>：术语解释、键值对</p>
    </div>
</body>
</html>

2、双击【3-4.HTML列表标签-对比总结.html】

image-20250518201736057