HTML 核心语法与常用标签 | 极客日志

HTML / CSS大前端

HTML 核心语法与常用标签

综述由AI生成系统讲解了 HTML 核心语法与常用标签。内容包括 HTML 文档结构、标签嵌套关系、文本排版（标题、段落、格式化）、图像与路径管理、超链接、列表（无序、有序、定义）、表格（结构、合并单元格）以及表单（输入类型、单选多选、下拉菜单、文本域、Label 关联）。文章提供了大量代码示例与实践案例，帮助读者掌握构建纯 HTML 页面的基础技能，适合前端初学者入门学习。

DataScient发布于 2026/4/6更新于 2026/5/2029 浏览

HTML 部分

一、HTML 简介

HTML 是什么？

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">
    <title>Document</title>
</head>
<body>
</body>
</html>

<!DOCTYPE html>:

声明 HTML5 文档
声明有助于浏览器中正确显示网页

<html lang="en">:

HTML 页面的根元素
lang="en" :表示网页语言是英语，如果想设置成中文可以写成 lang="zh-CN"

<head>:

存放网页配置信息，不会显示在页面上（简单来说是给浏览器看的内容），比如后面用 css 写的内容里面的
title 之间放网页标题
<meta charset="UTF-8">:作用使用 UTF-8（国际通用编码）防止中文乱码
<meta name="viewport" content="width=device-width, initial-scale=1.0">:
- 视口设置：移动端适配必备。
- width=device-width：宽度 = 设备屏幕宽度
- initial-scale=1.0：默认不缩放

<body>:元素包含了可见的页面内容（简单来说就是用户可以直接看到的），比如图片、文字 </html>:关闭根标签，网页结束

二、HTML 标签语法

相关免费在线工具

Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online
Markdown转HTML
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。在线工具，Markdown转HTML在线工具，online
HTML转Markdown
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。在线工具，HTML转Markdown在线工具，online
JSON 压缩
通过删除不必要的空白来缩小和压缩JSON。在线工具，JSON 压缩在线工具，online
JSON美化和格式化
将JSON字符串修饰为友好的可读格式。在线工具，JSON美化和格式化在线工具，online

<html>
    <body></body>
</html>

<head></head>
<body></body>

<!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>
    <h1>HawkPP 进阶之路</h1>
    <h2>html 入门 </h2>
    <h3>html 进阶</h3>
    <h4>css 入门</h4>
    <h5>css 进阶</h5>
    <h6>前端工程师 HawkPP</h6>
</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>
    <p>示例文本内容。</p>
</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>
    <p>第一行文本。</p>
    <p>第二行文本。</p>
    <hr>
    <br>
    <hr>
    <p>第三行文本。</p>
    <p><hr>第四行文本。</p>
    <hr>
</body>
</html>

标签	作用	示例
`<b>`	定义粗体文本（无语义）	`<b>粗体</b>`
`<strong>`	定义重要文本（语义强调）	`<strong>重要（加粗）</strong>`
`<i>`	定义斜体文本（无语义）	`<i>斜体</i>`
`<em>`	定义强调文本（语义强调）	`<em>强调（斜体）</em>`
`<mark>`	定义高亮/标记文本	`<mark>高亮</mark>`
`<small>`	定义小号字体文本	`<small>小号</small>`
`<del>`	定义删除文本（带删除线）	`<del>删除</del>`
`<ins>`	定义插入文本（带下划线）	`<ins>插入</ins>`
`<sub>`	定义下标文本	`H<sub>2</sub>O`
`<sup>`	定义上标文本	`X<sup>2</sup>`
`<u>`	定义下划线文本	`<u>下划线</u>`
`<s>`	定义不准确的文本（带删除线）	`<s>原价</s>`

<!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>
    <p><b>示例文本</b> is pretty much <strong>a noob</strong>,<i>but</i> he want to be a <em>full stack developer</em>!!</p>
    <p><mark>示例文本</mark> is <small>not</small> a professional yet, <del>but</del> he is <ins>working hard</ins> to become one!!!</p>
    <p>示例文本 want to drink H<sub>2</sub>O</p>
    <p>示例文本's growth rate is 10<sup>-n</sup></p>
    <p><u>示例文本</u></p>
    <p><s>示例文本 want to study!!</s></p>
</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>
    <div>示例文本</div>
    <div>示例文本 want to study!!</div>
    <span>示例文本 want to study!!</span>
    <span>示例文本</span>
</body>
</html>

类型	写法特点	优点	缺点	常用场景
绝对路径	从根 / 完整网址开始	定位准确	换目录就失效	外部资源、静态 CDN
相对路径	以当前文件为起点	灵活、可移植	依赖当前位置	项目内部图片、页面

<!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>
    <!-- 相对路径样例 -->
    <!-- 文件在其他文件夹 -->
    <img src="img/1.jpg">
    <!-- 文件在当前文件夹 -->
    <img src="./壁纸.jpeg">
    <!-- 文件在上一文件夹 -->
    <img src="../壁纸 3.jpg" width="500px">
    <!-- 绝对路径样例 -->
    <img src="./images/壁纸 2.jpg">
</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>
    <img src="img/1.jpg" alt="photo1" height="400" title="photo1">
    <img src="./壁纸.jpeg" alt="photo2">
    <img src="../壁纸 3.jpg" alt="photo3" width="500">
</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>
    <a href="https://example.com" target="_blank" rel = "noopener noreferrer">示例博客链接</a>
</body>
</html>

<ul>
    <li></li>
    <li></li>
</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>
    <ul>
        <li>示例项 1</li>
        <li>示例项 2</li>
    </ul>
</body>
</html>

<ol>
    <li></li>
    <li></li>
</ol>

<!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>
    </ol>
</body>
</html>

<dl>
    <dt>列表标题</dt>
    <dd>列表描述 / 详情</dd>
</dl>

<!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>
    <dl>
        <dt>示例标题</dt>
        <dd>示例描述内容</dd>
        <dt>示例标题 2</dt>
        <dd>示例描述内容 2</dd>
    </dl>
</body>
</html>

标签	名称	描述	示例代码
`<table>`	表格容器	定义整个表格	`<table>...</table>`
`<tr>`	表格行	定义表格中的一行	`<tr>...</tr>`
`<td>`	表格单元格	定义普通单元格	`<td>内容</td>`
`<th>`	表头单元格	定义标题单元格（加粗居中）	`<th>标题</th>`

标签	名称	作用	示例
`<thead>`	表头组	包裹表头行，语义化分组	`<thead><tr><th>姓名</th></tr></thead>`
`<tbody>`	表体组	包裹表格主体内容	`<tbody><tr><td>示例数据</td></tr></tbody>`
`<tfoot>`	表尾组	包裹表格汇总或底部内容	`<tfoot><tr><td>rating：-1000</td></tr></tfoot>`

<table>
    <thead>
        <tr>
            <th>列标题 1</th>
            <th>列标题 2</th>
            <th>列标题 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>行 1,列 1</td>
            <td>行 1,列 2</td>
            <td>行 1,列 3</td>
        </tr>
        <tr>
            <td>行 2,列 1</td>
            <td>行 2,列 2</td>
            <td>行 2,列 3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>最后一行，列 1</td>
            <td>最后一行，列 2</td>
            <td>最后一行，列 3</td>
        </tr>
    </tfoot>
</table>

<!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>
        <thead>
            <tr>
                <th>比赛次数</th>
                <th>参赛人员</th>
                <th>比赛成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>示例用户</td>
                <td>59</td>
            </tr>
            <tr>
                <td>2</td>
                <td>示例用户</td>
                <td>49</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>比赛总次数:2</td>
                <td>参赛人：示例用户</td>
                <td>平均得分:54</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

属性	名称	作用	示例
`colspan`	跨列合并	横向合并 n 列	`<td colspan="2">合并 2 列</td>`
`rowspan`	跨行合并	纵向合并 n 行	`<td rowspan="3">合并 3 行</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>
        <thead>
            <tr>
                <th>比赛次数</th>
                <th>参赛人员</th>
                <th>比赛成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <!-- 合并行 -->
                <td rowspan="2">示例用户</td>
                <td>59</td>
            </tr>
            <tr>
                <td>2</td>
                <!-- 删除重合的表格元素 -->
                <!-- <td>示例用户</td> -->
                <td>49</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>参赛人对自己的评价</td>
                <!-- 合并列 -->
                <td colspan="2">示例用户是一个新手！！！</td>
                <!-- 删除重合的表格元素 -->
                <!-- <td>平均得分:54</td> -->
            </tr>
        </tfoot>
    </table>
</body>
</html>

排序	type 值	说明
1	`text`	单行文本输入框
2	`password`	密码输入框，输入内容显示为圆点或星号
3	`submit`	提交按钮
4	`checkbox`	复选框（多选框）
5	`radio`	单选框
6	`button`	普通按钮
7	`file`	文件上传控件
8	`email`	邮箱输入框，提交时自动校验邮箱格式
9	`number`	数字输入框，可配合 min/max/step 使用
10	`tel`	电话号码输入框，移动端调出数字键盘
11	`hidden`	隐藏字段，不显示但会提交数据
12	`date`	日期选择器
13	`reset`	重置按钮，清空表单内容
14	`url`	网址输入框，需包含 http:// 或 https://
15	`search`	搜索框，带有清除按钮样式
16	`range`	滑块控件，用于范围选择
17	`color`	颜色选择器，返回十六进制色值
18	`image`	图像提交按钮
19	`time`	时间选择器
20	`datetime-local`	本地日期时间选择器
21	`month`	月份选择器
22	`week`	周选择器

属性名	作用	单选框（radio）补充说明	多选框（checkbox）补充说明
name	控件分组名称	同组 name 必须相同，实现互斥单选，只能选中一个	同组 name 必须相同，代表同一组选项，支持多选
value	控件提交取值	必须设置，同组内 value 不可重复，用于提交实际数据	必须设置，同组内 value 不可重复，用于提交实际数据
checked	默认选中状态	同组内最多只能有一个 checked，保证默认单选	同组内可以有多个 checked，支持默认多选

<!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>
    <form>
        <h1>Welcome to Example Website!!!</h1>
        <!-- 单选框 -->
        <!-- 按性别分类，即用 name 自定义分组，分为男、女、保密用 value 组内元素有哪些 -->
        <input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female">女
        <!-- checked 设置默认选中 -->
        <input type="radio" name="gender" value="secret" checked>保密
        <br><br>
        <strong>Please to guess hobby!!!!</strong><br>
        <!-- 多选框 -->
        <input type="checkbox" name="hobby" value="coding">编程
        <input type="checkbox" name="hobby" value="running">跑步
        <input type="checkbox" name="hobby" value="other">
    </form>
</body>
</html>

<select>
    <option></option>
    <option></option>
    <option selected> </option>
</select>

<!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>
    <form>
        <ins>Please to guess where user comes from!!!</ins>
        <br>
        <select name="county">
            <option value="China">China</option>
            <option value="USA">USA</option>
            <option value="UK">UK</option>
            <option value="Extraterrestria">Extraterrestria</option>
        </select>
    </form>
</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>
    <form>
        <h1>Welcome to Example Website!!!</h1>
        <strong>Please to register an account!!</strong>
        <br>
        <!-- 文本框 -->
        id:<input type="text" name="id"><br>
        password:<input type="password" name="password">
        <br>
        <u>What do you think of the website?</u>
        <br>
        <!-- 文本域 -->
        <textarea>Write your comment!!</textarea>
        <br>
    </form>
</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>
    <form>
        <!-- 隐式 -->
        <label><input type="checkbox">我已阅读并同意《用户协议》 </label>
        <br>
        <!-- 显式 -->
        <input type="checkbox">
        <label for="safe">我已阅读并同意《用户协议》</label>
        <br>
    </form>
</body>
</html>

type 值	作用	使用场景
`submit`	默认值，点击后提交表单	表单提交按钮
`reset`	重置表单内所有输入框为初始值	清空表单
`button`	普通按钮，无默认行为	配合 JavaScript 执行自定义操作

<!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>
    <form>
        <h1>Welcome to Example Website!!!</h1>
        <strong>Please to register an account!!</strong>
        <br>
        <!-- 文本框 -->
        id:<input type="text" name="id"><br>
        password:<input type="password" name="password">
        <br>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <br>
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example's website</title>
</head>
<body>
    <!-- ==================== 页面容器开始 ==================== -->
    <!-- 最外层容器，宽度 1500px，作为整个页面的父容器 -->
    <div>
        <!-- ==================== 头部区域开始 ==================== -->
        <!-- 页面头部，浅天蓝色背景 -->
        <div>
            <!-- 博客主标题，水平居中，移除默认下边距 -->
            <h1> Example's first blog website</h1>
        </div>
        <!-- ==================== 头部区域结束 ==================== -->
        <!-- ==================== 菜单区域开始 ==================== -->
        <!-- 左侧导航菜单，金黄色背景，宽度 200px，高度 1150px，向左浮动 -->
        <div>
            <!-- 菜单标题：加粗显示 -->
            <strong>目录</strong><br>
            <!-- 锚点链接：点击跳转到博主简介区域 -->
            <a href="#profile">示例简介</a><br>
            <!-- 锚点链接：点击跳转到 HTML 基础区域 -->
            <a href="#HTML_basic"> HTML 入门</a><br>
            <!-- 锚点链接：点击跳转到 HTML 进阶区域 -->
            <a href="#HTML_advanced">HTML 进阶</a><br>
            <!-- 锚点链接：点击跳转到 CSS 入门区域 -->
            <a href="#CSS_basic">CSS 入门</a><br>
            <!-- 锚点链接：点击跳转到 CSS 进阶区域 -->
            <a href="#CSS_advanced">CSS 进阶</a><br>
        </div>
        <!-- ==================== 菜单区域结束 ==================== -->
        <!-- ==================== 内容区域开始 ==================== -->
        <!-- 主体内容区域，浅灰色背景，宽度 1300px，向左浮动，高度自适应 -->
        <div>
            <!-- ==================== 博主简介区域开始 ==================== -->
            <!-- 博主简介标题，二级标题，作为锚点目标 -->
            <h2>示例简介</h2><br>
            <!-- 博主头像图片，宽度 200px，高度 200px，alt 属性为示例 -->
            <img src="./images/avatar.jpg" alt="示例" width="200" height="200px">
            <!-- 个人简介文字，使用段落标签，包含换行 -->
            个人简介:<p>Hi, I'm a CS student.I'm still learning the basics of C/C++ and Python, and I'm slowly getting into data structures and algorithms.<br>I enjoy building small projects like simple games and personal websites, though I know I have a lot to improve.<br>Thanks for stopping by my blog—I'm here to share my learning journey and grow together with others!</p>
            <!-- 水平分隔线，分隔博主简介和文章区域 -->
            <hr>
            <!-- ==================== 博主简介区域结束 ==================== -->
            <!-- ==================== 文章占位区域开始 ==================== -->
            <!-- HTML 基础标题，作为锚点目标 -->
            <h2>HTML 基础</h2><br><hr>
            <!-- HTML 进阶标题，作为锚点目标 -->
            <h2>HTML 进阶</h2><br><hr>
            <!-- CSS 基础标题，作为锚点目标 -->
            <h2>CSS 基础</h2><br><hr>
            <!-- CSS 进阶标题，作为锚点目标 -->
            <h2>CSS 进阶</h2><br><hr>
            <!-- ==================== 文章占位区域结束 ==================== -->
            <!-- ==================== 留言板表单开始 ==================== -->
            <form>
                <!-- 表单标题：留言板，水平居中，加粗 -->
                <h2><strong>留言板</strong></h2>
                <!-- 姓名输入框：使用 label 隐式关联，文本类型 -->
                <label>你的名字：<input type="text"><br></label>
                <!-- 邮箱输入框：使用 label 隐式关联，邮箱类型，带占位提示 -->
                <label>你的邮箱：<input type="email" placeholder="请输入邮箱"></label><br>
                <br>
                <!-- 留言内容：label 显式关联文本域，设置字体大小和垂直对齐 -->
                <label for="commence">留言内容：</label>
                <!-- 文本域：宽度 50 列，高度 5 行，带占位提示，垂直对齐和内边距 -->
                <textarea cols="50" rows="5" style="vertical-align:middle; padding: 5px;" placeholder="请输入留言内容"></textarea>
                <br>
                <!-- 评价单选框组：三个选项，name 相同实现单选 -->
                评价： <label><input type="radio" name="chance">中评</label>
                <label><input type="radio" name="chance">好评</label>
                <label><input type="radio" name="chance">好好评</label>
                <br>
                <!-- 留言类型下拉菜单：label 显式关联 select -->
                <label for="kinds">留言类型选择：</label>
                <select name="kinds">
                    <option>QQ</option>
                    <option>email</option>
                    <option>WeChat</option>
                </select>
                <br>
                <!-- 表单按钮：提交按钮和重置按钮 -->
                <button type="submit">提交留言</button>
                <button type="reset">重置留言</button>
            </form>
            <!-- ==================== 留言板表单结束 ==================== -->
        </div>
        <!-- ==================== 内容区域结束 ==================== -->
        <!-- ==================== 底部区域开始 ==================== -->
        <!-- 页面底部，橙色背景，清除浮动，文字居中 -->
        <div>
            <!-- 版权信息，包含作者超链接 -->
            版权归 <a href="https://example.com"><strong>示例作者</strong></a>所有
        </div>
        <!-- ==================== 底部区域结束 ==================== -->
    </div>
    <!-- ==================== 页面容器结束 ==================== -->
</body>
</html>

HTML 核心语法与常用标签

HTML 部分

一、HTML 简介

HTML 是什么？

HTML 骨架

二、HTML 标签语法

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

标签结构

标签嵌套关系（父子、兄弟）

HTML 注释和调试

三、HTML 文本排版标签

标题标签 h1~h6

段落标签 p

换行 br、水平线 h

文本格式化标签

块级元素 div & 行内元素 span

四、HTML 图像与路径

相对路径与绝对路径

图像标签 img

五、HTML 超链接

六、HTML 列表

无序列表 ul li

有序列表 ol li

定义列表 dl dt dd

七、HTML 表格

表格基本结构

表头、表体、表尾

合并单元格（colspan、rowspan）

八、HTML 表单

表单是什么？

input 标签的各种类型

单选框、多选框

单选框

多选框

下拉菜单 select

文本框和文本域 textarea

label 标签与按钮

label标签

按钮

综合 HTML 实践

题目描述

任务要求

文末说明

参考资料

版权声明

联系与反馈

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

无序列表 `ul li`

有序列表 `ol li`

定义列表 `dl dt dd`

合并单元格（`colspan`、`rowspan`）

`input` 标签的各种类型

下拉菜单 `select`

文本框和文本域 `textarea`

`label` 标签与按钮

`label`标签