前言

欢迎来到HTML网页布局的学习之旅！无论你是完全的编程新手，还是对网页设计感兴趣的初学者，这篇博客都将带你系统地了解HTML网页布局的基础知识。我们将从最基础的概念讲起，逐步深入到实际应用，并通过大量代码示例帮助你理解每个知识点。

一、Web标准概述

1.1 为什么需要Web标准？

想象一下，你用不同的浏览器（如Chrome、Firefox、Edge）打开同一个网页，结果显示效果完全不同——这会是多么糟糕的用户体验！这正是Web标准要解决的问题。

核心问题：

不同浏览器有不同的渲染引擎相同代码在不同浏览器中可能有不同表现用户体验不一致

解决方案：Web标准统一了网页的显示规则，确保不同浏览器能呈现一致的效果。

1.2 Web标准的三大构成

Web标准由三部分组成，它们各司其职：

构成语言说明结构HTML负责网页的内容和骨架，决定"有什么"表现CSS负责网页的外观样式，决定"长什么样"（颜色、大小、布局等）行为JavaScript负责网页的交互和动态效果，决定"能做什么"

形象比喻：

HTML就像人体的骨骼——支撑结构CSS就像皮肤和衣服——决定外观JavaScript就像肌肉和神经——实现动作和反应

二、开发工具准备

工欲善其事，必先利其器。我们推荐使用**Visual Studio Code (VSCode)**作为开发工具。

2.1 VSCode下载与安装

访问官网选择适合你操作系统的版本下载按照向导完成安装

为什么选择VSCode？

免费开源跨平台（Windows/Mac/Linux）丰富的扩展插件强大的代码提示和自动完成功能

安装完成后，建议安装以下实用插件：

HTML Snippets - HTML代码片段提示Auto Rename Tag - 自动重命名配对的HTML标签Live Server - 实时预览网页效果

三、HTML基础结构

3.1 HTML文档基本结构

每个HTML文档都有固定的基础结构，就像文章有开头、正文和结尾一样。

我的第一个页面！！！

运行结果：

下面小宁将用小猪佩奇和大家解释一下：

html标签：⽹⻚的整体

head标签：⽹⻚的头部

body标签：⽹⻚的身体

title标签：⽹⻚的标题

四、常用HTML标签详解

4.1 HTML标签的基本结构

HTML标签分为两种类型：

双标签 - 由开始标签和结束标签组成，可以包裹内容

<标签名>内容

示例：

这是一个段落

单标签 - 只有开始标签，不能包裹内容

<标签名>

示例：

4.2 HTML标签的属性

属性为标签提供额外信息，格式为属性名="属性值"：

<标签名 属性1="值1" 属性2="值2">内容

示例：

访问示例网站

属性使用规则：

写在开始标签内一个标签可以有多个属性属性间用空格分隔属性与标签名间用空格分隔属性顺序无关

4.3 常用内容标签

1. 标题标签（h1-h6）

我是标题一

作为页面的顶级标题，应简洁明了地概括页面核心主题，并且通常只在每个页面中使用一次

我是标题二

用于一级子标题，常用来划分主要章节或部分，便于用户快速了解内容框架

我是标题三

进一步细分内容，适用于二级子标题，帮助读者更深入地浏览信息

我是标题四

用于更深层次的内容组织，如小节标题或特定细节说明，但实际应用较少

我是标题五

用于更深层次的内容组织，如小节标题或特定细节说明，但实际应用较少

我是标题六

用于更深层次的内容组织，如小节标题或特定细节说明，但实际应用较少

运行结果：

特点：

从h1到h6重要性递减默认样式字号逐渐减小一个页面通常只有一个h1（SEO优化）

2. 段落标签（p）

春

盼望着，盼望着，东风来了，春天的脚步近了。

一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。

小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。

坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。

桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，

白的像雪。花里带着甜味；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千

成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的， 没名

字的，散在花丛里，像眼睛，像星星，还眨呀眨的。 “吹面不寒杨柳风”，不错的，像母亲

的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味，还有各种花的香，都在微微润

湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，

唱出宛转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响着。

雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，

人家屋顶上全笼着一层薄烟。树叶子却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，

一点点黄晕的光，烘托出一片安静而和平的夜。在乡下，小路上，石桥边，有撑起伞慢慢走着的人；

还有地里工作的农夫，披着蓑，戴着笠的。他们的草屋，稀稀疏疏的在雨里静默着。

天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，他们也赶趟儿似的，

一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份事去。“一年之计在于春”；

刚起头儿，有的是工夫，有的是希望。

春天像刚落地的娃娃，从头到脚都是新的，他生长着。

春天像小姑娘，花枝招展的，笑着，走着。

春天像健壮的青年，有铁一般的胳膊和腰脚，他领着我们上前去。

运行结果：‘

3. 换行标签（br）和水平线标签（hr）

春的第四段

---

桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。
红的像火，粉的像霞，

白的像雪。
花里带着甜味；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。
花下成千

成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的， 没名

字的，散在花丛里，像眼睛，像星星，还眨呀眨的。
“吹面不寒杨柳风”，不错的，像母亲

的手抚摸着你。
风里带来些新翻的泥土的气息，混着青草味，还有各种花的香，都在微微润

湿的空气里酝酿。
鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，

唱出宛转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响着。

运行结果：

4.文本格式化标签

标签效果示例加粗强调重要斜体强调强调删除线原价999下划线新增内容_{下标H2O^上标x2}

重要

强调

原价999

新增内容

H₂O

x²

运行结果:

5. 图片标签（img）

我的图片

title="我是小猪佩奇"

width="500"

>

title="我是蓝天"

width="500rpx"

>

title="我是电脑图片"

width="500"

alt="无法显示图片"

>

src - 图片路径（必须）alt - 图片无法显示时的替代文本（SEO重要）title - 鼠标悬停时的提示文字width/height - 宽高（通常只设置一个保持比例）

运行结果：

6.链接标签（a）

跳转百度

百度一下

跳转图片页面

页面跳转

属性说明：

href - 目标地址（必须）target - 打开方式

_self - 当前窗口（默认）_blank - 新窗口

运行结果：

7.视频标签(video)和音频标签（audio）

运行结果:

4.4 路径使用

相对路径：

路径写法说明src="img.jpg"同级目录下的文件src="./img.jpg"同级目录下的文件（明确写法）src="images/img.jpg"下级目录中的文件src="../img.jpg"上级目录中的文件

4.5 无语义布局标签

1.div标签

这是一个块级容器

特点：

独占一行常用于页面布局划分

2.span标签

这是一个行内容器

特点：

不换行常用于小范围文本样式控制

4.6 有语义的HTML5布局标签

HTML5引入了语义化标签，使代码更易读：

标签名语义说明

页眉网页或区域的头部