1. 引言

  • HTML 作为 Web 前端开发的基石，其网页布局技术是实现页面结构与交互的核心
  • 本文档学习价值：系统梳理 HTML 网页布局相关核心知识，覆盖从基础标签到实战应用全流程
  • 博客核心目标：帮助初学者掌握标准化 HTML 布局方法，实现结构清晰、兼容性强的网页开发

2. Web 标准的构成

1.1 Web 标准的核心意义与构成

为什么需要 Web 标准：解决不同浏览器渲染差异问题，保障跨浏览器展示一致性

Web 标准的构成：

构成

语言

说明

结构

HTML

页面元素和内容

表现

CSS

网页元素的外观和位置等页面样式（如：颜色、大小等）

行为

JavaScript

网页模型的定义与页面交互

Web标准要求⻚⾯实现：结构、表现、⾏为三层分离

三层架构的协同关系：结构决定页面内容，表现定义样式外观，行为实现交互逻辑

1.2 VS Code 开发环境配置

官方下载渠道与安装流程（https://code.visualstudio.com/）

2. HTML 基础核心：结构标签与语法规则

2.1 HTML 基本结构标签

2.1.1 核心标签功能

  • <html>：网页的根标签（整体容器），所有 HTML 内容都嵌套在该标签内，是文档树的顶层节点。
  • <head>：头部配置区域，包含网页的元信息（如编码、标题、外部资源引用等），内容不会直接显示在页面可视区域。
  • <title>：嵌套在 <head> 内，定义网页的标题（显示在浏览器标签栏），是 SEO 核心要素之一，一个页面仅能有一个 <title>。
  • <body>：网页的主体内容区域，所有可视化内容（文本、图片、链接、表单等）均嵌套在此标签内。

2.1.2 标签嵌套规则与文档树结构

  • 嵌套规则：标签需按 “父子层级” 嵌套，不可交叉嵌套（如 <div><p></div></p> 是错误写法）；根标签 <html> 仅能包含 <head> 和 <body> 两个直接子标签。
  • 文档树结构：以 <html> 为根节点，<head> 和 <body> 为一级子节点，其内部标签（如 <title>、<p> 等）为下级节点，形成 “树形层级”，浏览器按该结构解析渲染。

2.1.3 标准 HTML 文档模板编写规范

<!DOCTYPE html>  <!-- 声明文档类型为HTML5，必须放在首行 -->
<html lang="zh-CN">  <!-- lang属性定义网页语言，提升语义化 -->
<head>
    <meta charset="UTF-8">  <!-- 定义字符编码，避免乱码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 适配移动端 -->
    <title>页面标题</title>  <!-- 网页标题 -->
</head>
<body>
    <!-- 主体内容写在这里 -->
    <h1>Hello HTML</h1>
</body>
</html>

2.2 HTML 标签基础语法

2.2.1 标签分类：双标签 vs 单标签

  • 双标签（闭合标签）：有开始标签和结束标签，内容嵌套在中间，格式为 <标签名>内容</标签名>。示例： 
    <p>段落文本</p>
<a href="https://www.example.com">链接</a>
    使用场景：需要承载内容（文本、子标签）的标签，如段落、容器、链接、列表等。
  • 单标签（自闭合标签）：仅有开始标签，无结束标签，无需承载内容，格式为 <标签名 />（HTML5 中可省略 /，写为 <标签名>）。示例： 
    <img src="image.jpg" alt="图片" />（图片）
<input type="text" />（输入框）
<br />（换行）
    使用场景：用于引入资源、执行操作（换行、分割）、定义元信息等无需内容的标签。

2.3 标签属性语法规则

2.3.1 基本格式

  属性需书写在标签的开始标签内

 标准格式为：<标签名 属性名1="属性值1" 属性名2="属性值2">

2.3.2 核心规范

  • 属性名：采用小写形式（HTML5 不强制，为规范推荐写法）；使用语义化名称（如 src、href、class 等），避免自定义无意义的乱码名称。
  • 属性值：必须用引号包裹（单引号、双引号均可，优先推荐双引号）；即使值为数字、布尔类型，也建议添加引号（示例：<input type="text" maxlength="10">）。
  • 多属性共存：多个属性之间通过空格分隔；属性书写顺序无强制要求，推荐 “核心属性在前，次要属性在后” 的书写习惯。

2.3.3 核心注意事项

  • 属性位置：仅能写在开始标签（或单标签）内，不可写在结束标签中（如 <p class="text"></p class="text"> 是错误的）；
  • 空格分隔：属性之间、属性名与等号之间、等号与属性值之间，仅需一个空格分隔（多个空格浏览器可解析，但不符合规范）；
  • 引号使用：属性值必须加引号，禁止裸写（如 <a href=https://www.example.com> 错误，正确为 <a href="https://www.example.com">）；特殊场景（值包含引号）可嵌套引号（如 <div title="提示：点击'确认'按钮"></div>）。

3. 常用 HTML 标签详解：内容与布局基础

3.1 文本相关标签

3.1.1 标题标签：<h1>-<h6>

维度

说明

层级特性

从<h1>到<h6>字体大小逐级递减，权重逐级降低；<h1>为最高级（页面主标题），<h6>为最低级。

语义区别

核心是“层级语义”，而非单纯样式：<h1>代表页面核心主题（一个页面仅1个），<h2>为一级子标题，依此类推，用于构建内容层级结构。

使用场景

<h1>：网页/文章主标题（如网站logo旁的核心标题、文章标题）；<h2>-<h3>：板块/章节标题（如栏目名、文章小节标题）；<h4>-<h6>：次级细分标题（如小节内的子项标题）。

核心注意

禁止为了调整字体大小滥用标题标签（如用<h3> 替代普通文本加粗）；需按层级顺序使用（不可跳过<h2>直接用<h3>）。

3.1.2  段落与换行标签：

<p> 段落标签

  • 功能：定义一个独立段落，浏览器会自动在 <p> 标签前后添加默认间距，实现段落分隔，是语义化的段落容器。
  • 语法：双标签，<p>段落文本内容</p>，不可嵌套 <p> 标签（交叉 / 嵌套均为不规范写法）。

<br> 强制换行标签

  • 功能：用于段落内的强制换行（如地址、诗歌的换行），而非分隔段落；
  • 语法：单标签，HTML5 中可写为 <br> 或 <br />，推荐统一写法。

示例：

<p>北京市朝阳区建国路<br>联系电话：17774567890</p> <!-- 段落内换行 -->
<p>下一个独立段落</p> <!-- 段落分隔用<p> -->

3.1.3 文本格式化标签

 用于对文本内容进行视觉样式修饰或语义强调，推荐使用语义化更强的第二组标签

<!-- 第一组：基础样式标签（无语义，仅做样式修改） -->
<b>加粗</b>        
<u>下划线</u>      
<i>倾斜</i>        
<s>删除线</s>      

<!-- 第二组：语义化样式标签（推荐使用，利于SEO和无障碍访问） -->
<strong>加粗</strong>   
<ins>下划线</ins>       
<em>倾斜</em>           
<del>删除线</del>

3.1.4 水平线标签<hr>

  • 功能：单标签，在页面中插入一条水平线，用于分隔不同主题的内容块（语义化分隔）。

示例：

​<h2>第一章 基础概念</h2>
<p>本章介绍HTML基础语法...</p>
<hr> <!-- 分隔线 -->
<h2>第二章 标签使用</h2>
<p>本章讲解文本标签的用法...</p>

3.2 媒体与链接标签

3.2.1 图片标签 <img>

  • 功能：<img> 是单标签，用于在页面中嵌入图片，核心依赖属性实现功能
  • 语法：<img src="图片路径" alt="替代文本" title="提示文本" />

属性：

属性类型

属性/说明

核心作用与规则

示例代码

核心属性

src

必选，指定图片路径（绝对 / 相对路径），路径错误则图片加载失败。

<img src="./images/cat.jpg" alt="一只橘猫">

核心属性

alt

必选，图片加载失败 / 屏幕阅读器读取的替代文本，需简洁描述内容（装饰图可设空值）。

<img src="cat.jpg" alt="一只趴在沙发上的橘猫">

核心属性

title

可选，鼠标悬浮时显示的提示文本，补充图片说明（不可替代 alt）。

<img src="cat.jpg" alt="橘猫" title="家养宠物猫">

扩展属性

width/height、loading

1. width/height：设置图片宽高（推荐 CSS 控制，避免写死导致变形）；2. loading="lazy"：开启懒加载，提升页面加载性能（非首屏图片推荐用）。

<img src="cat.jpg" alt="橘猫" width="500" loading="lazy">

3.2.2 多媒体标签：<audio>（音频）、<video>（视频）

两类标签均为双标签，用于嵌入音频 / 视频资源，核心属性聚焦播放控制，语法逻辑一致

属性：

属性

取值/规则

说明

src

音频/视频文件路径（绝对/相对路径）

必选，指定多媒体资源地址（支持mp3/mp4/webm等主流格式）。

controls

无需赋值（写属性名即可）

显示播放控件（播放/暂停、进度条、音量等），省略则无控件，无法手动操作。

autoplay

无需赋值

页面加载完成后自动播放；多数浏览器限制：需配合muted（静音）才能生效。

loop

无需赋值

播放结束后自动循环播放。

muted

无需赋值

默认静音播放，常配合autoplay使用。

示例：

<!-- 音频标签 -->
<audio src="./music/song.mp3" controls loop muted>
  您的浏览器不支持音频播放，请升级浏览器！<!-- 降级提示 -->
</audio>

<!-- 视频标签 -->
<video src="./video/movie.mp4" controls autoplay muted poster="./images/cover.jpg" width="800">
  您的浏览器不支持视频播放，请升级浏览器！<!-- 降级提示 -->
</video>
  • 降级处理：标签内的文本会在浏览器不支持该标签时显示，提升兼容性；
  • 格式兼容：可通过 <source> 子标签提供多格式资源（如 <video><source src="movie.mp4"><source src="movie.webm"></video>），浏览器自动选择支持的格式。

3.2.3 超链接标签 <a>

  • 功能：<a> 是双标签，用于创建跳转链接，核心属性控制跳转目标和打开方式
  • 语法：<a href="目标路径" target="打开方式">链接文本/图片</a>

属性

取值/规则

说明

href

① 外部链接：带协议头的完整 URL；② 内部链接：站内相对路径；③ 锚点：#id 名；④ 空链接：#。

必选，指定跳转目标，省略则无链接功能。

target

① _self：当前窗口（默认）；② _blank：新标签页；③ _parent/_top：框架内打开。

可选，控制打开方式，外部链接推荐用_blank。

外部链接 vs 内部链接

类型

定义

示例

注意事项

外部链接

跳转到本站以外的页面

<a href="https://www.taobao.com" target="_blank">淘宝</a>

必须加协议头（http:///https://），否则会被解析为内部路径。

内部链接

跳转到本站内的页面

<a href="./news/detail.html">新闻详情</a>

使用相对路径，路径层级需准确（./ 同级，../ 上级）。

示例：

<!-- 外部链接（新标签页打开） -->
<a href="https://www.github.com" target="_blank">GitHub</a>

<!-- 内部链接（当前页打开） -->
<a href="./pages/about.html">关于我们</a>

<!-- 锚点链接（跳转到页面顶部） -->
<a href="#top">回到顶部</a>
<div id="top">页面顶部</div>

<!-- 空链接（占位） -->
<a href="#">暂未开发</a>

补充：涉及路径时，一定要根据自己需求和实际情况来写出正确的路径！！！

4. 列表与表格：结构化数据展示

4.1列表标签体系

  • 无序列表：无固定顺序，默认圆点标记；适用于新闻列表、导航菜单、商品列表等。
  • 标签组合：<ul>+<li>
  • 有序列表：自动顺序编号（数字 / 字母等）；适用于排行榜、步骤说明、试卷答案等。
  • 标签组合：<ol>+<li>
  • 嵌套与样式扩展：支持<ul>/<ol>互相嵌套（如分类列表）；默认样式（圆点 / 编号）可通过 CSS 修改为自定义样式（如去掉标记、换图标）。

示例：

<!-- 无序列表 -->
<ul>
  <li>新闻1</li>
  <li>新闻2</li>
</ul>
<!-- 有序列表（排行榜） -->
<ol>
  <li>第一名</li>
  <li>第二名</li>
</ol>
<!-- 嵌套列表 -->
<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
    </ul>
  </li>
</ul>

4.2 表格标签详解

在⽹⻚中以⾏+列的单元格的⽅式整⻬展示和数据

4.2.1 基本标签：

标签名

说明

table

表格整体容器，用于包裹所有表格相关标签

tr

表格的行，作为 table 的直接子标签，包裹 td/th

td

普通单元格，用于承载表格核心内容

th

表头单元格，替代 td 使用，默认加粗居中，用于定义列 / 行标题，提升语义化

 

<table border="1">  <!-- border="1" 显示表格边框（默认无） -->
  <!-- 表头行：th默认居中、加粗 -->
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>专业</th>
  </tr>
  <!-- 数据行：td是普通单元格 -->
  <tr>
    <td>小明</td>
    <td>18</td>
    <td>土木工程</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>19</td>
    <td>大数据</td>
  </tr>
</table>

4.2.2 合并单元格

表格的合并单元格可以通过colspan（跨列合并） rowspan（跨行合并）实现

<h3>跨列</h3>
<table border="1" width="400px" height="200px"><!-- width与height是设置单元格的宽度和高度-->
	<tr align="center"><!--align="center"是设置内容居中显示 -->
	    <td>姓名</td>
	    <td>年龄</td>
		<td>地址</td>
	</tr>
	<tr align="center">
		<td>小明</td>
		<td colspan="2">无</td>
	</tr>
	<tr align="center">
		<td>小红</td>
		<td>19</td>
		<td>成都</td>
	</tr>
</table>
		
<h3>跨行</h3>
<table border="1" width="400px" height="200px">
	<tr align="center">
		<td>姓名</td>
		<td>年龄</td>
		<td>地址</td>
	</tr>
	<tr align="center">
    	<td>张三</td>
		<td>18</td>
		<td rowspan="2">北京</td>
	</tr>
	<tr align="center">
		<td>李四</td>
		<td>20</td>
	</tr>
</table>

​

5.表单

5.1 input 系列标签

5.1.1 文本输入类

类型

说明

常用属性

type="text"

单行文本输入框（如用户名、邮箱）

placeholder（提示文字）、maxlength（最大字符数）、required（必填）

type="password"

密码输入框（内容掩码显示）

同上；注意：提交时为明文，安全依赖 HTTPS

示例：

<input type="text" placeholder="请输入用户名" maxlength="20" required>
<input type="password" placeholder="请输入密码" required>

5.1.2 选择类标签

单选框 type="radio"

示例：

<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

多选框 type="checkbox"

示例：

<input type="checkbox" name="hobby" value="reading" checked> 阅读
<input type="checkbox" name="hobby" value="music"> 音乐

5.1.3 文件上传 type="file"

  • multiple 属性：允许一次选择多个文件（需配合后端支持）；
  • accept 属性（推荐）：限制可选文件类型，提升体验。

示例：

<input type="file" name="avatar" accept="image/png,image/jpeg">
<input type="file" name="attachments" multiple accept=".pdf,.docx">

注：<form> 必须设置 enctype="multipart/form-data" 才能正确上传文件。

5.1.4 按钮类 type 取值与功能

类型

功能说明

type="submit"

提交表单（默认行为：触发表单提交）

type="reset"

重置表单：将所有控件恢复到初始值（慎用，用户体验差）

type="button"

普通按钮：无默认行为，通常配合 JavaScript 使用

示例：

<input type="submit" value="登录">
<input type="reset" value="重置">
<input type="button" value="获取验证码" onclick="sendCode()">

5.2 其他表单控件

5.2.1 <button> 标签

比 <input type="button"> 更灵活：可包含 HTML 内容（如图标、换行）

  • type="submit"（默认值！）→ 提交表单
  • type="reset" → 重置表单
  • type="button" → 无行为，需 JS 绑定
<button type="button">取消</button>
<button type="submit">确认提交</button>

5.2.2 下拉菜单 <select> + <option>

  • <select> 定义下拉列表
  • <option> 定义选项
  • 默认选中：在 <option> 上加 selected 属性
  • 可通过 value 属性指定提交值（若无 value，则用选项文本）
<select name="city">
  <option value="">--请选择城市--</option>
  <option value="bj">北京</option>
  <option value="sh" selected>上海</option>
  <option value="gz">广州</option>
</select>

5.2.3 <label> 标签：提升可访问性与交互体验

两种绑定方式：
  • for + id 关联（推荐）
<label for="email">邮箱：</label>
<input type="email" id="email" name="email">
  • 直接包裹控件
<label>
  <input type="checkbox" name="agree"> 我同意用户协议
</label>

6.综合案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>相亲注册</title>
</head>
<body>
    <h1>摆脱单身，做回自己</h1>
    <hr>

    <div>
        昵称: <input type="text" placeholder="请输入昵称">
    </div>
    <br>

    <div>
        性别: 
        <input type="radio" name="gender" checked> 男
        <input type="radio" name="gender"> 女
    </div>
    <br>

    <div>
        所在城市: 
        <select>
            <option selected>上海</option>
            <option>北京</option>
            <option>广州</option>
			<option>深圳</option>
        </select>
    </div>
    <br>

    <div>
        婚姻状况: 
        <input type="radio" name="marital" checked> 未婚
        <input type="radio" name="marital"> 已婚
        <input type="radio" name="marital"> 保密
    </div>
    <br>

    <div>
        喜欢的类型: 
        <input type="checkbox" checked> 可爱
        <input type="checkbox" checked> 性感
        <input type="checkbox"> 御姐
        <input type="checkbox"> 萝莉
        <input type="checkbox"> 小鲜肉
        <input type="checkbox"> 大叔
    </div>
    <br>

    <div>
        个人介绍: <br>
        <textarea rows="8" cols="50"></textarea>
    </div>
    <br>

    <div>
        <strong>我承诺</strong>
        <ul>
            <li>年满20岁、深情且单身</li>
            <li>抱着严肃的态度</li>
            <li>真心寻找另一半</li>
        </ul>
        <input type="checkbox"> 我同意所有条款
    </div>
    <br>

    <div>
        <button>免费注册</button>
        <button type="reset">重置</button>
    </div>
</body>
</html>

结语：本文系统梳理了 HTML 开发的核心脉络：涵盖 Web 标准架构、语义化标签、结构化数据展示（列表与表格）以及用户交互基础（表单控件）。HTML 作为前端开发的结构性基石，其掌握程度直接影响后续 CSS 与 JavaScript 的协同效率。建议通过持续编码实践，将知识转化为能力——你的第一个网页，就从今天开始构建。

# 前端 # html
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

AllApiDeck：让你的 AI coding对接使用全套丝滑连贯

现在的 AI 工具层出不穷，但很多时候我们都浪费在“管理工具”本身上了。AllApiDeck 的初衷就是把复杂留给后端，把简单留给用户。如果你也厌倦了在各种中转站和配置文件之间反复横跳，如果你也想让你的 AI 桌面环境变得优雅一点，真的建议你去 GitHub 关注一下这个项目。适用人群：AI 玩家、开发者、拥有 3 个以上 API 站点的“囤货狂人”。快去试试吧，把省下的时间拿去喝咖啡，或者去野外

avatar 2048 AI社区
cover

远程办公难协同？OpenClaw 接入钉钉，AI 全程辅助执行

avatar 2048 AI社区

从零构建 Hermes Agent ↔ CSDN MCP 自动化发布链路

CSDN 的反爬（WAF）很硬：headless Chrome 被精准拦截。Cookie 导入是最实用的绕过方案。前端变化快：CSS 选择器、弹窗逻辑随时可能变，MCP 服务的维护成本主要在适配前端更新。MCP 的价值：通过 MCP 协议，AI Agent 可以无缝获取"发布文章"这种高级能力，比让用户手动操作高效得多。Cookie 安全：Cookie 包含完整的登录凭证，务必保管好。如果泄露，在

avatar 2048 AI社区