昨天 23:08 湖南人文科技学院全栈开发发布于湖南

关注

学习HTML笔记（三）

今天学习的内容：

一.标签之文本

##首先标签之文本是什么？

像京东网站上有些字是加粗的效果，有些字还有不同的颜色，这个就是文本，标注信息内容。

如图，body里展示的是常用的文本标签，span这个标签由于没有特殊意义，在很多商店网站上普遍看到。

如图，淘宝中的“折后¥6799”都是用的span标签，说明这个十分常见，写网站经常用到。

##在HTML中,常用的文本标签有哪些？

在HTML中,常用的文本标签包括：

1.<p>：段落标签，用于定义段落。

2.<h1>到<h6>：标题标签，用于定义不同级别的标题，<h1>是最高级别，<h6>是最低级别。

3.<span>：行内标签，用于对文档中的小部分文本进行样式化。

4.<a>：超链接标签，用于定义超链接。

5.<strong>：加粗标签，用于强调文本，通常显示为粗体。

6.<em>：斜体标签，用于强调文本，通常显示为斜体。

7.<br>：换行标签，用于在文本中插入换行符。

8.<ul>和<ol>：无序列表和有序列表标签，用于定义列表。

9.<li>：列表项标签，用于定义列表中的项目。

10.<blockquote>：块引用标签，用于定义长引用。

11.<code>：代码标签，用于定义计算机代码片段。

12.<pre>：预格式化文本标签，用于定义预格式化的文本，保留空格和换行符。

这些标签是HTML中最常用的文本标签，用于结构化和格式化网页内容。

注：常用文本标签和段落<p>是不同的，段落代表一段文本，而文本标签一般表示文本词汇。

二.列表标签之有序列表

##首先列表标签是什么？

如图，红色方框就是列表效果，大家看着这个图都浅显易懂吧。

##其次，有序列表是什么？

在HTML中，有序列表 是一种用于展示按特定顺序排列的项目列表的结构。它使用 <ol> 标签定义，列表中的每一项用 <li>（list item）标签表示。

特点：

默认情况下，有序列表的项目会以数字（1, 2, 3...）编号。
可通过 type 属性更改编号样式，例如： 1：阿拉伯数字（默认）

a：小写字母

A：大写字母

i：小写罗马数字

I：大写罗马数字

更改编号样式示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <ol>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>

    <ol type="1">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>

    <ol type="a">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>

    <ol type="A">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>

    <ol type="i">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>

    <ol type="I">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>
</body>
</html>

支持嵌套，即在一个 <li> 中再包含另一个 <ol> 或 <ul>。

嵌套示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <ol>
        <li>阿里</li>
        <li>腾讯</li>
        <li>
            百战程序员
            <ol type="A">
                <li>前端课程</li>
                <li>Java课程</li>
                <li>Python课程</li>
            </ol>
        </li>
        <li>字节</li>
    </ol>

</body>
</html>

三.列表标签之无序列表

##首先无序列表怎么实现？

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圈）进行标记。无序列表始于<ul>标签，每个列表项始于<li>标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <ul>
        <li>新闻1</li>
        <li>新闻2</li>
        <li>新闻3</li>
    </ul>

    <ul type="disc">
        <li>新闻1</li>
        <li>新闻2</li>
        <li>新闻3</li>
    </ul>

    <ul type="circle">
        <li>新闻1</li>
        <li>新闻2</li>
        <li>新闻3</li>
    </ul>

    <ul type="square">
        <li>新闻1</li>
        <li>新闻2</li>
        <li>新闻3</li>
    </ul>

    <ul type="none">
        <li>新闻1</li>
        <li>新闻2</li>
        <li>新闻3</li>
    </ul>

    <ul>
        <li>阿里</li>
        <li>腾讯</li>
        <li>字节</li>
        <li>
            百战程序员
            <ul>
                <li>前端</li>
                <li>Java</li>
                <li>Python</li>
            </ul>
        </li>
    </ul>

</body>
</html>

上面的示例中，<ul>后面也可以加type属性，让文本前面的图案变成实心圆disc（默认）、空心圆circle、方块square、无none。也可以嵌套，和有序列表同理。

##无序列表的应用场景是什么？

无序列表在HTML中的应用场景非常广泛，以下是一些常见的应立用场景：

1.导航菜单用于创建网站的导航菜单。

2.项目列表用于列出项目、任务或待办事项。

3.内容摘要用于列出文章或报告的主要内容或要点。

4.特性列表用于展示产品或服务的特性和优点。

5.评论列表用于显示用户评论或反馈。

这些场景中，无序列表可以帮助组织和展示信息，使内容更加清晰和易于阅读。

四.列表标签之自定义列表

##首先自定义列表怎么实现？

自定义列表不仅仅是一列项目，而是项目及其注释的组合，自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始，每个自定义列表项的定义以<dd>开始。

##自定义列表的应用场景

在HTML中，自定义列表使用 <dl> 标签实现，包含 <dt>（定义术语）和 <dd>（定义描述）标签。主要应用场景包括：

词汇表/术语解释 - 专业术语及其定义
FAQ问答 - 常见问题及答案
产品规格 - 产品参数和对应值
元数据展示 - 文档信息如作者、创建时间等
联系人信息 - 姓名、职位、部门等结构化信息

演示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义列表应用场景</title>
</head>
<body>
    <h2>HTML术语解释</h2>
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言，用于创建网页的标准标记语言</dd>
        
        <dt>CSS</dt>
        <dd>层叠样式表，用于描述HTML文档的呈现方式</dd>
        
        <dt>JavaScript</dt>
        <dd>一种脚本语言，用于为网页添加交互功能</dd>
    </dl>

    <h2>产品规格</h2>
    <dl>
        <dt>处理器</dt>
        <dd>Intel Core i7-11800H</dd>
        
        <dt>内存</dt>
        <dd>16GB DDR4</dd>
        
        <dt>存储</dt>
        <dd>512GB NVMe SSD</dd>
        
        <dt>显示屏</dt>
        <dd>15.6英寸 FHD (1920x1080)</dd>
    </dl>

    <h2>文档信息</h2>
    <dl>
        <dt>作者</dt>
        <dd>张三</dd>
        
        <dt>创建日期</dt>
        <dd>2026-03-07</dd>
        
        <dt>版本</dt>
        <dd>v1.0</dd>
        
        <dt>状态</dt>
        <dd>已完成</dd>
    </dl>
</body>
</html>

五.博客列表案例

如图，你在某个博客上可以看到这些内容，这是一个列表，上面有一个大标题，然后中间的文本，下面还有作者。我们来实战来实现这三个功能，以下是示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <ul type="none">
        <li>
            <h3>30岁，我开启了人生副业</h3>
            <p>大家好，我是iwen，一名非常普通的前端程序员</p>
            <span>iwenwiki</span>
        </li>
        <li>
            <h3>30岁，我开启了人生副业</h3>
            <p>大家好，我是iwen，一名非常普通的前端程序员</p>
            <span>iwenwiki</span>
        </li>
        <li>
            <h3>30岁，我开启了人生副业</h3>
            <p>大家好，我是iwen，一名非常普通的前端程序员</p>
            <span>iwenwiki</span>
        </li>
    </ul>

</body>
</html>

当然我是复制粘贴了这些内容，可以自己接着写。

注：众所周知，现在2026已经进入了AI时代，现在到处都用AI解决问题，AI如此强大，我们当然也可以适当利用AI完成我们的项目，前提是我们知道AI写的是什么，AI写的这些我们得学过，不然AI写的东西出错了，我们不知道怎么改。AI写的东西加上我们自己的修改，变成自己的东西才行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            padding: 20px;
            margin: 0;
        }

        ul.blog-list {
            list-style: none;
            padding: 0;
            max-width: 800px;
            margin: 0 auto;
        }

        .blog-item {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            padding: 20px;
            margin-bottom: 20px;
            transition: transform 0.2s;
        }

        .blog-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        }

        .blog-item h2 {
            margin-top: 0;
            font-size: 1.5em;
        }

        .blog-item h2 a {
            text-decoration: none;
            color: #007bff;
        }

        .blog-item h2 a:hover {
            text-decoration: underline;
        }

        .blog-item p {
            margin: 8px 0;
            color: #555;
        }
    </style>
</head>
<body>

    <ul class="blog-list">
        <li class="blog-item">
            <h2><a href="blog1.html">博客文章1</a></h2>
            <p>这是博客文章1的简短描述。</p>
            <p>作者：张三</p>
        </li>
        <li class="blog-item">
            <h2><a href="blog2.html">博客文章2</a></h2>
            <p>这是博客文章2的简短描述。</p>
            <p>作者：李四</p>
        </li>
        <li class="blog-item">
            <h2><a href="blog3.html">博客文章3</a></h2>
            <p>这是博客文章3的简短描述。</p>
            <p>作者：王五</p>
        </li>
    </ul>

</body>
</html>

AI所用的东西可能有些你没学过，用了CSS才使得页面美观精致，后面会学到。

六.标签之表格

##表格展示效果

表格在数据展示方面非常简单，并且表现优秀

##表格组成特点

行、列、单元格

单元格特点：同行等高、同列等宽。

##表格标签

表格：<table>

行：<tr>

单元格(列)：<td>

如图，一个tr代表有一行，两个td代表这一行有两列。

还有表格的其他标签（如下图），了解即可：

使用表格布局（即通过 <table>、<tr>、<td> 等标签进行页面整体布局）在现代 Web 开发中通常不被推荐，主要原因包括：

语义错误HTML 表格的语义是用于展示结构化数据（如成绩单、商品清单等），而非页面布局。用表格做布局违背了 HTML 的语义化原则，不利于可访问性和 SEO。
维护性差表格布局嵌套层级深（如 table > tr > td > table...），代码冗长复杂，难以阅读和修改。相比之下，使用 CSS 布局（如 Flexbox、Grid）结构更清晰。
响应式支持弱表格布局难以适配不同屏幕尺寸。而现代 CSS 布局（如 flex、grid、媒体查询）天然支持响应式设计，能轻松实现移动端适配。
性能问题浏览器需要完整加载整个表格后才能渲染，可能导致页面“白屏”时间变长；而 CSS 布局可以逐步渲染，提升用户体验。
样式控制受限表格的默认行为（如单元格对齐、间距、宽度分配）不易覆盖，常需大量 hack 才能达到设计效果。CSS 布局则提供更灵活、精确的控制能力。
不符合现代标准W3C 和主流前端社区早已推荐使用 CSS 进行布局。表格布局被视为过时的做法。

七.表格单元格合并

##单元格合并属性

水平合并：colspan

垂直合并：rowspan

##合并示例

先用table、tr、td写一个四行五列的单元格。（写出table>tr*4>td*5{单元格}然后按下Tab即可生成，然后标数字从1-20）如下示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <table>
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
        <tr>
            <td>单元格6</td>
            <td>单元格7</td>
            <td>单元格8</td>
            <td>单元格9</td>
            <td>单元格10</td>
        </tr>
        <tr>
            <td>单元格11</td>
            <td>单元格12</td>
            <td>单元格13</td>
            <td>单元格14</td>
            <td>单元格15</td>
        </tr>
        <tr>
            <td>单元格16</td>
            <td>单元格17</td>
            <td>单元格18</td>
            <td>单元格19</td>
            <td>单元格20</td>
        </tr>
    </table>
</body>
</html>

2. 给table设置居中属性，还有边界，宽和高，最后还能用cellspacing="0"来把单元格变成单线条好看的多。

3. 然后合并就是关键（以左为基准，以上为基准，合并几个就删几个），如下图是你目前的网页实现效果

举个例子，如果你要合并单元格1、单元格2、单元格3，你就要用到水平合并colspan，colspan=多少就是你合并的总数。把单元格2、单元格3那两行代码删去，把单元格1的属性加上colspan，即<td colspan="3">单元格1-2-3</td>，这样你就实现的水平合并的效果。

同理，上下合并也是一样，如果你要合并单元格11和单元格16，你就要删去单元格16那一行代码，即删去<td>单元格16</td>，然后给单元格11改成这样的代码<td rowspan="2">单元格11-16</td>即可。

以下为示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <table align="center" border="1" width="500px" height="200px" cellspacing="0">
        <tr>
            <td colspan="3">单元格1-2-3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
        <tr>
            <td>单元格6</td>
            <td>单元格7</td>
            <td rowspan="3">单元格8-13-18</td>
            <td colspan="2" rowspan="2">单元格9-10-14-15</td>
        </tr>
        <tr>
            <td rowspan="2">单元格11-16</td>
            <td>单元格12</td>
        </tr>
        <tr>
            <td>单元格17</td>
            <td>单元格19</td>
            <td>单元格20</td>
        </tr>
    </table>
    
</body>
</html>