资讯配图

作者：李剑锋

前言

在上一节课中手把手带你入门 HTML：打造你的第一个网页！，我们初步了解了 HTML 的基础结构，学习了诸如网页标题 <title>、多级标题 <h1>、正文段落 <p>、有序列表 <ol> 和无序列表 <ul> 等常用标签的用法。通过这些内容，我们初步搭建了网页的基本骨架。

本节课将继续深入，带大家学习一些更具实用性的 HTML 标签，包括表格、链接、图片与表单等内容，帮助大家进一步提升网页内容的表达能力和交互设计水平。

HTML 代码实战

表格（table）

对于表格而言，在HTML中，我们是以<table></table>标签来对其进行命名的。我们可以在.html文件中输入table后按Tab即可生成这样的标签。

<table>
 ...
</table>

那我们假如想要创建一个3*3的表格的话，要怎么来做呢？在HTML中，表格是一行一行的进行排列的。假如我们要开始写第一行了，我们就需要在下面添加一个<tr> </tr>的标签，然后再在里面写入这一行里每一列的信息是什么。这里需要注意的是，HTML也区分了是列标题还是列元素，列标题的标签是<th>，而列元素的是<td>。

比如这段代码我们就能够得到第一列的内容了，为了能够更明显一些，我们这里可以给<table>里添加一个border的属性，使其能够带有线条：

<table border="1">
        <tr>
            <th>列标题1</th>
            <th>列标题1</th>
            <th>列标题1</th>
        </tr>
</table>
资讯配图

写完第一行后，我们也可以继续往下写下一行的信息，也是按照着同样的格式：

    <table border="1">
        <tr>
            <th>列标题1</th>
            <th>列标题1</th>
            <th>列标题1</th>
            
        </tr>
        <tr>
            <th>元素1</th>
            <td>元素2</td>
            <td>元素3</td>
        </tr>
        <tr>
            <th>元素1</th>
            <td>元素2</td>
            <td>元素3</td>
        </tr>
    </table>
资讯配图

这样我们就成功创建了一个表格了！是不是看着感觉还有点密，没关系，我们可以给HTML表格里进一步添加属性进来，使其能够看着更美观一些。比如可以添加以下几个基本属性：

  • cellpadding：设置单元格内容与边框的间距。
  • cellspacing：设置单元格之间的间距。
    <table border="1" cellpadding="5" cellspacing="0"">
        <tr>
            <th>列标题1</th>
            <th>列标题1</th>
            <th>列标题1</th>
            
        </tr>
        <tr>
            <th>元素1</th>
            <td>元素2</td>
            <td>元素3</td>
        </tr>
        <tr>
            <th>元素1</th>
            <td>元素2</td>
            <td>元素3</td>
        </tr>
    </table>
资讯配图

这样是不是看着表格更加美观一些了呢。当然这里还有一些更高级的用法， 比如说合并单元格的方法，我们能不能让后两个列标题1合并呢？我们可以尝试添加colspan的属性来实现行上的合并单元格！当然我们需要先删掉其中一个列标题。

    <table border="1" cellpadding="5" cellspacing="0"">
        <tr>
            <th>列标题1</th>
            <th colspan="2">列标题1</th>

            
        </tr>
        <tr>
            <th>元素1</th>
            <td>元素2</td>
            <td>元素3</td>
        </tr>
        <tr>
            <th>元素1</th>
            <td>元素2</td>
            <td>元素3</td>
        </tr>
    </table>
资讯配图

除了行上能合并单元格，当然列上也是可以进行合并的，那使用的方法就不是colspan，而是rowspan了！就比如把两个元素3给合并在一起显示。

    <table border="1" cellpadding="5" cellspacing="0"">
        <tr>
            <th>列标题1</th>
            <th colspan="2">列标题1</th>

            
        </tr>
        <tr>
            <th>元素1</th>
            <td>元素2</td>
            <td rowspan="2">元素3</td>
        </tr>
        <tr>
            <th>元素1</th>
            <td>元素2</td>
        </tr>
    </table>
资讯配图

这样我们就了解表格的基本操作方式啦，当然假如我们希望能够有进一步的操作，我们可以进一步的了解CSS和JavaScript的内容！完整代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 表格</title>
</head>
<body>
    <table border="1" cellpadding="5" cellspacing="0"">
        <tr>
            <th>列标题1</th>
            <th colspan="2">列标题1</th>
        </tr>
        <tr>
            <th>元素1</th>
            <td>元素2</td>
            <td rowspan="2">元素3</td>
        </tr>
        <tr>
            <th>元素1</th>
            <td>元素2</td>
        </tr>
    </table>
</body>
</html>

链接（a）

对于链接内容而言，我们需要用<a> </a>标签将其包裹在其中。但是在这个标签里，我们需要写入的是文字而非链接内容，比如下面这样，这个时候所谓的链接其实就相当于是一个段落的内容：

<a>这是一个超链接</a>
资讯配图

那假如我们希望其拥有链接的信息，我们需要做的就是增加一个属性href，并且把对应的网站信息填入。这个时候我们就会发现字体变蓝且可以点击跳转了：

<a href="https://www.bilibili.com">这是一个超链接</a>
资讯配图

正常情况下，我们会发现，当我们点击这个链接的时候，网页打开的方式是直接在当前的页面打开。但是当我们在浏览器上看B站视频的时候，我们会发现新视频的打开方式是在新页面上打开的，这个具体控制的方式就通过一个链接的属性target来进行控制。具体控制手段有以下两种。

  • _self（默认）：在当前窗口打开链接。
  • _blank：在新窗口或标签页打开链接。

假如我们希望链接从新页面打开的话，我们可以按照下面的方式来写代码：

<a href="https://www.bilibili.com" target="_blank">这是一个超链接</a>

这样的话，打开方式就会是在新的页面进行打开的了！

那假如我们希望能够鼠标移动到链接的位置时，显示一些相关的信息，我们也可以添加链接的一个基本属性——title，比如下面这段代码就会使得链接下有一个小弹窗展示内部具体的信息了！：

<a href="https://www.bilibili.com" target="_blank" title="查看详情">这是一个超链接</a>
资讯配图

以上就是链接方面的所有内容了，完整代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 链接</title>
</head>
<body>
    <a href="https://www.bilibili.com">这是一个超链接</a>
    <a href="https://www.bilibili.com" target="_blank" title="查看详情">这是一个超链接</a>
</body>
</html>

图片（img）

再然后我们要讲的就是图片了，在HTML里，图片用<img>来表示，我们输入img并点击Tab即可生成。生成后即可获得以下代码：

<img src="" alt="">

我们会发现，<img>的标签里并没有像之前一样有一个</img>，这是因为img属于自闭合标签（也称为 “空标签”），这类标签的设计初衷是不需要包含任何内容，因此无需单独的闭合标签。我们需要写入的必要内容其实就两个：

  • src="图片路径”——可以是网址，也可以是本地文件的绝对路径或相对路径
  • alt="替代文本”——当我们的图片打不开的时候会显示的内容

就比如我在bing上找到了一张图片想要显示在网页上展示出来，我就可以把链接放到src这个属性里，并用下面的代码进行展示：

<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.Mq9zt66lU2fko_h2OWHIlAHaE8?w=276&h=184&c=7&r=0&o=7&dpr=1.7&pid=1.7&rm=3" alt="">
资讯配图

假如我这里放一张本地没有的图片，比如以下的代码。但是这个时候我在alt里加入了一些文字，这个时候就会显示：

<img src="1_Fop_tGsNLQelOSz2aylg.png" alt="无法显示">
资讯配图

当然我们也可以去通过另外的两个属性来控制图片展示的大小——width和height。我们可以让刚刚在bing找的图片长宽均为200，那这个代码就是这样写：

<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.Mq9zt66lU2fko_h2OWHIlAHaE8?w=276&h=184&c=7&r=0&o=7&dpr=1.7&pid=1.7&rm=3" alt="" width="200" height="200">
资讯配图

最后我们还可以像链接一样添加一个鼠标触碰出现提示的属性——title，这样我们就可以在接触到图片后显示一些特定的信息啦，比如下面这样：

<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.Mq9zt66lU2fko_h2OWHIlAHaE8?w=276&h=184&c=7&r=0&o=7&dpr=1.7&pid=1.7&rm=3" alt="" width="200" height="200" title="点击查看大图">

那链接部分也大概讲完了啦，完整的代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 图片</title>
</head>
<body>
    <img src="" alt="">
    <img src="1_Fop_tGsNLQelOSz2aylg.png" alt="无法显示">
    <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.Mq9zt66lU2fko_h2OWHIlAHaE8?w=276&h=184&c=7&r=0&o=7&dpr=1.7&pid=1.7&rm=3" alt="" width="200" height="200" title="点击查看大图">
</body>
</html>

表单（form）

HTML 中的表单（Form）是网页与用户交互的重要工具，用于收集用户输入的数据（如注册信息、搜索内容、评论等）并提交到服务器处理。举个例子，我们在每个平台登录其实都用到了表单来收集信息，我们填入的手机号码和验证码都是由表单来构成的，只不过网页对这部分表单进行了美化而已。

资讯配图

当然这里我们还不需要真正的去处理表单数据，我们只需要知道其大致的结构即可。当我们在.html文件输入form并按下Tab后，表单的大致框架也会显示出来：

<form action="">
xxx
</form>

这里有一个很重要的属性action，action其实表示的是将表单的数据提交到某一个URL上，比如某个链接“https://example.com/submit”上，但是假如我们并不需要提交到某个URL只是演示的话，我们只需要输入#即可，这样的话就表示表单提交时的目标地址被设置为当前页面的锚点（默认锚点为空时，通常指向页面顶部）。

<form action="#">
xxx
</form>

然后我们就可以开始学习一下表单里面的具体写法了。

首先第一个我们了解的是form里的<input>标签，当我们输入input并按下Tab后我们可以看到网页里出现了一个文本输入框，我们可以在里面写入内容：

    <form action="#">
        <input type="text">
    </form>
资讯配图

为什么会出现一个文本输入框呢？这是因为input里的属性type默认选择的是“text”，这就代表文本框的意思。假如我们需要写入的内容不是纯文本，我们要写入的是密码（不能直接显示出来），那我们就需要把type更换成password了：

    <form action="#">
        <input type="text">
        <input type="password">
    </form>
资讯配图

一般使用这两个标签的时候就是需要输入账号和密码的情况，那我们自然也是需要在前面假如一段文字才比较合适。比如我们可以直接前面写入文字内容：

    <form action="#">
        账号：<input type="text">
        密码：<input type="password">
    </form>
资讯配图

为了能够让我们的页面更美观一些，我们其实可以使用HTML里一个很重要的标签<br>换行符。一般情况下，账号和密码的输入应该分两行的，现在就在同一行上，所以其实不太合适，因此我们可以添加一个<br>在中间，这样就可以使其更美观一些了。

    <form action="#">
        账号：<input type="text">
        <br>
        密码：<input type="password">
    </form>
资讯配图

但是在form里面，其实有一个专门的标签对绑定文字和input的内容，那就是<label>标签。我们可以创建两个label标签然后把账号密码放进去：

    <form action="#">
        <label for="">账号：</label>
        <input type="text">
        <br>
        <label for="">密码：</label>
        <input type="password">
    </form>

我们可以看到label标签里有一个for属性，那这个属性有什么作用呢？其实这个属性就是去绑定我们输入的内容。绑定的方法就是在input里面添加一个名叫id的属性，然后让id的文字和for里的文字一致，这样就可以绑定上了。可以参考我下面的写法来完成：

    <form action="#">
        <label for="username">账号：</label>
        <input type="text" id="username">
        <br>
        <label for="password">密码：</label>
        <input type="password" id="password">
    </form>

那这样就算是绑定上了，绑定了的好处在于当我们点击标签时可以聚焦到对应控件，就是我们点击文字账号的时候也是相当于点击对应的input内容。

但是有一个点需要注意的是，id是唯一的！这就意味着不能出现重名的情况，假如上面下面写了重复的id名称的话，那我点击下面的文字也会跳转到第一个id对应的input内容上去，并不会像python一样覆盖掉。

对于input里text这个类型，我们还有一些常用的属性可以添加上去：

  • placeholder：提供短暂的提示文本，输入内容时会自动消失
<input type="text" id="username" placeholder="请输入用户名">
资讯配图
  • value：设置输入框的初始值（输入值后，提示的信息就消失了，删除会显示）
<input type="text" id="username" placeholder="请输入用户名" value="李剑锋">
资讯配图
  • readonly：我们还可以设置为只读模式，即不可编辑
<input type="text" id="username" placeholder="请输入用户名" value="李剑锋" readonly>
  • maxlength&minlength：最长字符数量和最短字符数量，表示最多多少个字，最少多少个字
<input type="text" id="username" placeholder="请输入用户名" value="李剑锋" readonly minlength="0" maxlength="10">

以上就是input里text这个type里常用的一些属性了，因为篇幅原因，后面的type我就不会如此详细的讲解，大家想知道的话可以查阅具体的文档信息。

除了text和password以外，其他常见的还包括有：

  • radio——单选框（要实现单选，需要多个变量内部的属性name保持一致，不一致或者没有name属性的话，就可以多个选择，并且后期无法进行绑定。另外，由于id的唯一性，因此无法与label里的for属性形成绑定，对于所有有多个选择的都是如此。提交时，选中的复选框会以数组形式传递数据。）
    <label>性别</label>
        <input type="radio" name="gender"> 男
        <input type="radio" name="gender"> 女
        <input type="radio" name="gender"> 其他
资讯配图
  • checkbox—— 复选框（其实与radio类似，只不过这个默认就是可以多选的，并且也需要同一类型的内容绑定为一个name）
        <label>爱好</label>
        <input type="checkbox" name="hobby"> 唱歌
        <input type="checkbox" name="hobby"> 跳舞
        <input type="checkbox" name="hobby"> RAP
资讯配图
  • submit——上传按钮（可以把这些信息都传给action对应的链接，完整的代码如下所示）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 表单</title>
</head>
<body>
    <form action="#">
        <label for="username">账号：</label>
        <input type="text" id="username" placeholder="请输入用户名" value="李剑锋" readonly minlength="0" maxlength="10">
        <br>
        <label for="password">密码：</label>
        <input type="password" id="password">
        <br>
        <label>性别</label>
        <input type="radio" name="gender"> 男
        <input type="radio" name="gender"> 女
        <input type="radio" name="gender"> 其他
        <br>   
        <label>爱好</label>
        <input type="checkbox" name="hobby"> 唱歌
        <input type="checkbox" name="hobby"> 跳舞
        <input type="checkbox" name="hobby"> RAP
        <br>
        <input type="submit" value="上传">
    </form>
</body>
</html>
资讯配图

掌握表单后，配合 CSS 美化和 JavaScript 交互，可创建出功能丰富、用户友好的网页交互界面。

行元素与块元素

那在学完了如此多的HTML的基本标签以后，我们可以进一步来了解一个很重要的概念——行元素与块元素。在 HTML 中，元素根据其默认的布局行为分为行内元素（Inline Elements）和块级元素（Block Elements）。它们的主要区别在于如何占据页面空间和与其他元素的关系。

我们前面看到表单里的账号和密码在没有加<br>换行符之前其实是在同一行的，这也就反映出行元素的一个很重要的特点，就是无论有多少个行元素放到一起，只要页面够宽，其就会与其他行内元素并排显示，不会强制换行。相比之下，块元素最大的特点就是，无论内容多少，都会从新的一行开始显示，并占据整行宽度。那我们下面就具体来看看行元素和块元素的内容吧！

行元素

在我们之前的课程学习里，其实有大量的标签都是属于行元素的标签，包括：

  • <a> ：链接
  • <img>：图像
  • <input>：输入
  • <label>：标签
  • <br>：行内元素，但强制换行（用于文本中的换行）。

除了刚刚说的多个元素放在一起都会并排这个特性以外，还有一个很重要的特性就是其无法通过 CSS 设置固定宽度和高度（具体宽度由内容决定）。假如我们给这些元素一些特定的颜色，其影响的范围只包括内容所需的宽度而非整行的宽度。

除此之外，在HTML还有一个专门的标签来指代行内元素，那就是<span> </span>标签。<span>标签通常的用法是在文本内的局部样式或交互，比如我们要对一段话里的一小部分文字加上特殊的颜色或者属性的时候，我们就可以使用上。就比如下面这个例子：

<p>这是一段包含 <span style="color: red;">红色文本</span> 的段落。</p>
资讯配图

块元素

同样的，在我们之前学到的内容里，其实更多的内容属于块元素：

  • <p>：段落
  • <h1>~<h6>：多级标题
  • <ul><ol><li>：有序&无序列表
  • <table>：表格
  • <form>：表单

对比之下，除了说块元素使独占一行的以外，其也是可以通过 CSS 设置宽度（width）和高度（height）。并且块元素内部是可以包含其他块元素和行内元素的，而行内元素并不能包含块元素。

除此之外，在HTML里同样有一个专门的标签来指代块元素，那就是<div> </div>标签了。<div> 标签常用于块级的宏观布局（如页面分栏、模块划分）。在拆分不同板块内容的时候，我们就可以使用<div> 标签来进行划分。比如下面商品的例子：

<div>
  <h3>产品名称</h3>
  <p>价格：<span>¥99</span></p>
  <button>加入购物车</button>
</div>
资讯配图

我们也可以看到，无论是<h3>还是<p>和<button>，其实都不是和<div>在一个层级，这就代表这些元素都从属于<div>，一般这个时候我们就称<div>为父元素（Parent Element），而这些被父元素包裹的内层元素就成为子元素（Child Element）。这些更详细的内容我们就可以放到后面讲JavaScript的时候进一步展示。

总结

通过本节课的学习，我们系统地掌握了 HTML 中几个非常重要的标签及其基本用法，包括：

  • 表格 <table>：了解了如何通过 <tr>、<th>、<td> 构建结构化数据表格，掌握了合并单元格（colspan 和 rowspan）以及美化表格的常用属性（如 cellpadding 和 cellspacing）；
  • 链接 <a>：掌握了添加超链接的基本方式，熟悉了 href、target 与 title 等属性的用途，能根据需求设置链接的跳转方式及提示信息；
  • 图片 <img>：学会了插入网络或本地图片，理解了 src、alt、width、height 和 title 等属性的作用，同时了解了 <img> 是一个自闭合标签；
  • 表单 <form>：掌握了表单结构及常见控件 <input> 的使用，包括 text、password、radio、checkbox、submit 等类型，能实现基本的信息收集界面；
  • 元素类型概念：理解了 HTML 中元素的两大分类：行内元素（如 <a>、<img>、<span> 等）与块级元素（如 <p>、<div>、<table> 等），并掌握了它们在布局和样式设置上的基本区别。

通过这些内容的学习，我们不仅提升了构建网页结构的能力，也为之后更深入地学习 CSS 布局美化与 JavaScript 交互控制打下了坚实基础。建议课后大家可以尝试自己动手写几个小案例，比如制作一个登录注册界面、产品展示页或简单的数据展示表格，加深理解与实践能力。下节课开始，我们将继续学习下一个前端基础语言CSS，那我们下节课见啦，886。


-- 完 --


机智流推荐阅读：

1.万字长文！从零开始构建你的第一个 ReAct Agent

2.LangChain 本地化应用探索（二）：修复输出异常与模板适配策略

3.LangChain 本土私有化应用探索：魔搭社区ModelScope 模型对接实践

4.手把手带你入门 HTML：打造你的第一个网页！

关注机智流并加入 AI 技术交流群，不仅能和来自大厂名校的 AI 开发者、爱好者一起进行技术交流，同时还有HuggingFace每日精选论文与顶会论文解读、Talk分享、通俗易懂的Agent知识与项目、前沿AI科技资讯、大模型实战教学活动等。
在「机智流」公众号后台回复下方标红内容即可加入对应群聊：
  • cc | 大模型技术交流群
  • hf | HuggingFace 高赞论文分享群
  • 具身 | 具身智能交流群
  • 硬件 | AI 硬件交流群
  • 智能体 | Agent 技术交流群