【前端入门】后端开发的HTML生存指南(一)：你应该了解的核心HTML标签

本文链接：https://blog.csdn.net/tang_is_learning/article/details/147377728

作者：唐叔在学习
专栏：唐叔学前端
日期：2025-04-20
标签：前端开发, HTML入门, 基础教程

文章目录

一、开篇：为什么后端要学HTML？
二、HTML到底是啥？
三、最基础的HTML文档结构
四、常用基础标签大全
附录：HTML核心标签速查

一、开篇：为什么后端要学HTML？

各位后端大佬们好，我是唐叔。我知道你们可能觉得：“我Java/Python/C#写得飞起，前端关我啥事？” 但现实是：

联调必备：接口返回的数据最终要渲染到HTML里
问题定位：至少要知道前端怎么用你返回的数据
全栈趋势：简单的管理后台自己就能搞定
沟通效率：和前端吵架时能说到点子上（划重点）

二、HTML到底是啥？

HTML（HyperText Markup Language）超文本标记语言，它不是编程语言，而是用来描述网页结构的标记语言。简单说就是用一堆标签告诉浏览器：“这儿该放标题，那儿该放图片”。

使用场景：

搭建网页基础骨架
定义网页内容结构
配合CSS/JavaScript实现完整网页

三、最基础的HTML文档结构

<!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>
    <h1>欢迎来到唐叔的前端小课堂</h1>
    <p>这里是我们学习HTML的第一课</p>
</body>
</html>

代码解析：

HTML标签一般是成对存在的，即使用 <标签></标签> 组成
<!DOCTYPE html>：声明文档类型
<html>：根标签，lang属性指定语言
<head>：存放元信息，不会显示在页面上
<body>：所有可见内容都放在这里

四、常用基础标签大全

1. 文本类标签

常见的文本标签有标题标签、段落标签、行内标签等。

<h1>一级标题</h1>  <!-- 最重要标题，一个页面建议只有一个 -->
<h2>二级标题</h2>
<p>段落文本</p>
<span>行内文本容器</span>
<strong>加粗强调</strong>
<em>斜体强调</em>

2. 媒体链接

常见的媒体有链接、图片、音频和视频等，他们在HTML中都有对应的标签。

<!-- 图片 -->
<img src="logo.png" alt="网站logo" width="200">

<!-- 链接 -->
<a href="https://www.csdn.net" target="_blank">CSDN官网</a>

<!-- 音频 -->
<audio controls>
    <source src="music.mp3" type="audio/mpeg">
</audio>

<!-- 视频 -->
<video controls width="600">
    <source src="movie.mp4" type="video/mp4">
    您的浏览器不支持视频标签
</video>

3. 列表

<!-- 无序列表 -->
<ul>
    <li>苹果</li>
    <li>香蕉</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>第一步</li>
    <li>第二步</li>
</ol>

4. 表格

表格是展示结构化数据的利器，后台管理系统、数据报表都离不开它。唐叔教你用最规范的姿势写表格：

<table border="1">  <!-- border仅用于演示，实际用CSS控制 -->
    <caption>2023年销售数据</caption>  <!-- 表格标题 -->
    <thead>  <!-- 表头 -->
        <tr>
            <th>月份</th>  <!-- th表示表头单元格 -->
            <th>销售额</th>
            <th>同比增长</th>
        </tr>
    </thead>
    <tbody>  <!-- 表格主体 -->
        <tr>  <!-- tr表示行 -->
            <td>1月</td>  <!-- td表示普通单元格 -->
            <td>¥120,000</td>
            <td>+15%</td>
        </tr>
        <tr>
            <td>2月</td>
            <td>¥150,000</td>
            <td rowspan="2">+20%</td>  <!-- 跨行合并 -->
        </tr>
        <tr>
            <td>3月</td>
            <td>¥180,000</td>
        </tr>
    </tbody>
    <tfoot>  <!-- 表尾 -->
        <tr>
            <td>总计</td>
            <td colspan="2">¥450,000</td>  <!-- 跨列合并 -->
        </tr>
    </tfoot>
</table>

表格核心属性说明：

属性/标签	作用	使用场景示例
`<table>`	定义表格容器	所有表格的根元素
`<caption>`	表格标题	对表格内容的简要描述
`<thead>`	表头区域	存放列标题行
`<tbody>`	表格主体内容	必须包含至少一个`<tr>`
`<tfoot>`	表尾汇总区域	合计行等汇总信息
`<tr>`	表格行（table row）	每一行数据包裹标签
`<th>`	表头单元格（table header）	列标题，默认加粗居中
`<td>`	标准单元格（table data）	普通数据单元格
`colspan`	水平合并单元格	`<td colspan="2">占两列</td>`
`rowspan`	垂直合并单元格	`<td rowspan="3">占三行</td>`

5、表单全攻略

表单是网页与用户交互的重要方式，登录、注册、搜索都离不开它。

<form action="/submit" 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" minlength="6">

    <button type="submit">登录</button>
</form>

附录：HTML核心标签速查

下面唐叔用表格给大家整理一份更全面的HTML标签清单，按功能分类展示：

分类	标签	说明	使用频率
文档结构	`<!DOCTYPE>`	文档类型声明	★★★★★
	`<html>`	根元素	★★★★★
	`<head>`	文档头部分	★★★★★
	`<body>`	文档主体部分	★★★★★
文本	`<h1>`-`<h6>`	标题标签	★★★★★
	`<p>`	段落	★★★★★
	`<span>`	行内文本容器	★★★★★
	`<br>`	换行	★★★☆☆
	`<hr>`	水平分割线	★★☆☆☆
	`<pre>`	预格式化文本	★★★☆☆
	`<code>`	代码片段	★★★★☆
链接媒体	`<a>`	超链接	★★★★★
	`<img>`	图片	★★★★★
	`<video>`	视频	★★★★☆
	`<audio>`	音频	★★★☆☆
	`<iframe>`	内联框架	★★★☆☆
列表	`<ul>`	无序列表	★★★★★
	`<ol>`	有序列表	★★★★☆
	`<li>`	列表项	★★★★★
	`<dl>`/`<dt>`/`<dd>`	定义列表	★★☆☆☆
表格	`<table>`	表格	★★★★☆
	`<tr>`	表格行	★★★★☆
	`<td>`	表格单元格	★★★★☆
	`<th>`	表头单元格	★★★☆☆
	`<thead>`/`<tbody>`	表格分组	★★★☆☆
表单	`<form>`	表单容器	★★★★★
	`<input>`	输入控件	★★★★★
	`<textarea>`	多行文本输入	★★★★☆
	`<select>`/`<option>`	下拉选择	★★★★☆
	`<button>`	按钮	★★★★★
	`<label>`	表单标签	★★★★★
	`<fieldset>`	表单分组	★★☆☆☆
	`<legend>`	分组标题	★★☆☆☆