HTML 基础入门：从零开始的网页搭建之旅

最新推荐文章于 2026-05-26 03:30:17 发布

原创最新推荐文章于 2026-05-26 03:30:17 发布 · 1.2k 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#html #前端

一、HTML 是什么

HTML（超文本标记语言，HyperText Markup Language）是构建网页的基础技术之一。虽然常被误认为是编程语言，但实际上它是一种结构化的标记语言，专门用于定义和描述网页的内容组织结构。

HTML 的核心功能是通过一系列预定义的标签（tags）来标记不同类型的内容元素。这些标签构成了网页的骨架结构，包括：

文本内容（标题、段落等）
多媒体元素（图片、音频、视频等）
交互式组件（表单、按钮等）
结构化区块（页眉、导航栏、正文区域等）

举个实际例子：

<h1>这是主标题</h1>
<p>这是一个包含<strong>重点强调</strong>文字的段落。</p>
<ul>
    <li>列表项一</li>
    <li>列表项二</li>
</ul>
<img src="example.jpg" alt="示例图片">

现代HTML5标准进一步扩展了语义化标签，如<header>、<nav>、<section>等，使得网页结构更加清晰和有意义。这些标签不仅帮助浏览器正确渲染页面，还能提升搜索引擎的可读性和可访问性。

二、HTML 文档的基本结构

一个完整的 HTML 文档有着固定的基本结构，就像盖房子需要先搭建好框架一样。HTML 文档的结构分为声明区、头部(head)和主体(body)三大部分，每个部分都有其特定的功能和用途。下面我们来详细解析一个最基本的 HTML 文档结构：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个HTML页面</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是我的第一个HTML页面，欢迎大家！</p>
    <p>在这里我将学习并展示HTML的各种元素和功能。</p>
</body>
</html>

<!DOCTYPE html>：这是文档类型声明，它告诉浏览器当前文档是 HTML5 文档。这个声明必须放在 HTML 文档的最开头，且对大小写不敏感。在HTML5之前，DOCTYPE声明要复杂得多，比如HTML4.01的声明是<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">。
<html>标签：这是整个 HTML 文档的根标签，所有的 HTML 内容都要放在这个标签内部。它通常包含一个lang属性来指定文档的主要语言，例如<html lang="zh-CN">表示中文(简体，中国)。
<head>标签：用于存放文档的头部信息，这些信息通常不会直接显示在网页的主体内容中，主要包括：
- 文档的元信息(meta)
- 文档的标题(title)
- 字符编码设置
- 视口设置(viewport)
- 外部资源引用(CSS, JavaScript等)
- 搜索引擎优化信息
<meta charset="UTF-8">：指定文档的字符编码为 UTF-8，这是目前最常用的字符编码方式，可以保证网页能够正确显示各种语言的文字，包括中文、日文、韩文等。如果不指定编码，可能会导致页面出现乱码。
<meta name="viewport">：这个meta标签对于响应式网页设计非常重要，它控制了页面在不同设备上的显示方式。width=device-width表示页面宽度与设备宽度一致，initial-scale=1.0表示初始缩放比例为1。
<title>标签：用于设置网页的标题，这个标题会显示在以下几个地方：
- 浏览器的标题栏或标签页上
- 搜索引擎结果中
- 用户收藏该网页时作为默认名称
<body>标签：包含了网页中所有要显示给用户看的内容，常用的内容元素包括：
- 文本内容：<h1>到<h6>标题、<p>段落等
- 多媒体：<img>图片、<video>视频等
- 交互元素：<a>链接、<button>按钮等
- 结构化元素：<header>、<nav>、<section>等

这个基础结构是每个HTML网页的起点，开发者可以根据实际需求在这个基础上添加更多的元素和功能。随着网页复杂度的增加，可能还会引入外部CSS样式表和JavaScript文件，但基本的HTML文档结构始终保持着这样的框架。

三、HTML 标签和元素

一、标签的分类

HTML 标签通常分为双标签和单标签两种类型，它们在网页结构中扮演着不同的角色。

双标签 (Paired Tags)

双标签由开始标签和结束标签组成，格式为<标签名>内容</标签名>，主要用于包含和定义内容区域。

结构特点：必须成对出现，开始标签和结束标签之间是标签所控制的内容
示例：
- <p>这是一个段落</p>
- <div>这是一个块级容器</div>
- <h1>这是一级标题</h1>
应用场景：
- 包裹文本内容（如<p>、<span>）
- 创建文档结构（如<div>、<section>）
- 定义列表项（如<li>）
- 建立超链接（如<a href="#">链接</a>）

单标签 (Self-closing Tags)

单标签也称为空标签或自闭合标签，没有结束标签，通常用于插入特定内容或执行特定功能。

结构特点：单独出现，不需要闭合
示例：
- <br> - 换行标签
- <img src="image.jpg" alt="示例图片"> - 图像标签
- <input type="text"> - 输入框标签
应用场景：
- 插入媒体内容（如图片、视频）
- 创建表单控件（如输入框、按钮）
- 页面布局控制（如换行、水平线）

注意：在XHTML中，单标签需要写成<br />形式带有闭合斜杠，但在HTML5中两种写法都可以接受。

二、元素的概念

HTML 元素是指从开始标签到结束标签之间的所有内容，包括开始标签、结束标签和中间的内容，是构成HTML文档的基本单位。

完整元素结构

一个典型的HTML元素包含以下部分：

<开始标签 属性="值">内容</结束标签>

例如：

<a href="https://example.com" target="_blank">访问示例网站</a>

<a> 是开始标签
href 和 target 是属性
"https://example.com" 和 "_blank" 是属性值
访问示例网站 是元素内容
</a> 是结束标签

元素类型

常规元素：
- 包含开始标签、内容和结束标签
- 示例：<p>段落文本</p>
空元素：
- 单标签构成的元素，没有内容和结束标签
- 示例：<img src="photo.jpg" alt="照片">
嵌套元素：
- 元素可以包含其他元素形成层级结构
- 示例：
```
<div>
  <h2>标题</h2>
  <p>段落内容</p>
</div>
```

元素属性

大多数HTML元素都可以包含属性，用于提供额外信息或控制元素行为：

全局属性：所有元素都可使用的属性，如id、class、style等
专有属性：特定元素特有的属性，如<img>的src属性、<a>的href属性
布尔属性：只有属性名没有值的属性，如<input disabled>中的disabled

了解HTML标签和元素的概念是学习网页开发的基础，它们共同构成了网页的结构和内容。

四、常用的 HTML 基础标签

一、标题标签

HTML 提供了 6 级标题标签，用于定义文档中的标题层次结构。这些标签分别是 <h1> 到 <h6>，其中 <h1> 级别最高，字体最大，通常用于页面主标题；<h6> 级别最低，字体最小，用于最低级别的子标题。标题标签不仅影响文本的视觉呈现，还对网页的SEO（搜索引擎优化）有重要影响。

<h1>这是一级标题 - 通常用于页面主标题</h1>
<h2>这是二级标题 - 用于主要章节标题</h2>
<h3>这是三级标题 - 用于子章节</h3>
<h4>这是四级标题 - 用于更小的分组</h4>
<h5>这是五级标题 - 较少使用</h5>
<h6>这是六级标题 - 最小级别的标题</h6>

最佳实践建议：

每个页面应该只有一个 <h1> 标签
标题应该按照层级顺序使用，不要跳过级别
标题应该简明扼要地描述内容

二、段落标签

<p> 标签用于定义段落，是HTML中最常用的文本容器之一。每个 <p> 标签中的内容会自成一段，浏览器会自动在段落前后添加一定的垂直间距（通常是1em）。

<p>这是第一个段落，它包含了一些文字内容。段落标签会自动在前后添加间距，使文档结构更清晰。</p>

<p>这是第二个段落，它和第一个段落之间会有默认的间距。这个间距的大小可以通过CSS进行调整。</p>

实际应用场景：

新闻文章内容分段
产品描述分段
博客文章正文

三、换行标签

<br> 标签用于在文本中插入换行，它是一个自闭合标签（不需要闭合标签）。与 <p> 标签不同，<br> 只产生换行而不创建新的段落，因此不会增加额外的垂直间距。

<p>这是一行文字，<br>这里使用换行标签进行了换行。<br>可以看到行与行之间没有段落间距。</p>

典型使用场景：

诗歌或歌词的格式保持
地址信息的分行显示
需要紧凑排列的多行文本

四、链接标签

<a> 标签是HTML中最重要的标签之一，用于创建超链接。它可以将文本或图像转换为可点击的链接，指向其他网页、文件、电子邮件地址或页面内的锚点。

基本语法：

<a href="目标地址" target="打开方式" title="提示文本">链接文本</a>

属性详解：

href：指定链接的目标地址，可以是：
- 绝对URL（如https://www.example.com）
- 相对路径（如about.html或images/photo.jpg）
- 页面锚点（如#section2）
- 电子邮件地址（如mailto:contact@example.com）
- 电话号码（如tel:+123456789）
target：控制链接的打开方式：
- _self：在当前窗口/标签页打开（默认）
- _blank：在新窗口/标签页打开
- _parent：在父框架中打开
- _top：在整个窗口中打开
title：提供额外的提示信息，鼠标悬停时显示

示例：

<!-- 外部网站链接 -->
<a href="https://www.csdn.net" target="_blank" title="访问CSDN技术社区">访问CSDN</a>

<!-- 内部页面链接 -->
<a href="about.html">关于我们</a>

<!-- 电子邮件链接 -->
<a href="mailto:contact@example.com">联系我们</a>

<!-- 页面锚点链接 -->
<a href="#chapter3">跳转到第三章</a>

五、图像标签

<img> 标签用于在网页中嵌入图像，它是自闭合标签。图像可以增强网页的视觉效果和信息传达能力。

完整语法：

<img src="图像路径" 
     alt="替代文本" 
     width="宽度" 
     height="高度" 
     title="提示文本" 
     loading="加载方式">

属性详解：

src：指定图像源文件路径，可以是：
- 相对路径（如images/logo.png）
- 绝对URL（如https://example.com/images/banner.jpg）
- Base64编码数据（如data:image/png;base64,...）
alt：提供替代文本，在以下情况显示：
- 图像无法加载时
- 屏幕阅读器为视障用户朗读时
- 搜索引擎理解图像内容时
width/height：设置图像显示尺寸（单位可以是px或%）
title：鼠标悬停时显示的提示文本
loading：控制图像加载行为：
- eager：立即加载（默认）
- lazy：延迟加载（当图像进入视口时加载）

示例：

<!-- 本地图像 -->
<img src="images/product.jpg" 
     alt="新款智能手机" 
     width="400" 
     title="点击查看详情">

<!-- 网络图像 -->
<img src="https://example.com/banner.png" 
     alt="促销广告" 
     height="200">

<!-- 响应式图像（使用srcset） -->
<img src="photo-small.jpg"
     srcset="photo-small.jpg 480w, photo-medium.jpg 1024w, photo-large.jpg 1600w"
     sizes="(max-width: 600px) 480px, (max-width: 1200px) 1024px, 1600px"
     alt="风景照片">

六、列表标签

HTML提供了三种列表类型，适用于不同的内容组织需求。

1. 有序列表（Ordered List）

使用 <ol> 标签定义，列表项用 <li> 标签标记，会自动编号。适用于需要明确顺序的内容。

属性：

type：设置编号类型（1, A, a, I, i）
start：设置起始编号
reversed：反向编号

<ol type="1" start="3">
  <li>第一步：准备材料</li>
  <li>第二步：混合搅拌</li>
  <li>第三步：放入烤箱</li>
  <li>第四步：等待20分钟</li>
</ol>

2. 无序列表（Unordered List）

使用 <ul> 标签定义，列表项用 <li> 标签标记，前面显示项目符号。适用于没有特定顺序的项目。

属性：

可以通过CSS的list-style-type改变项目符号样式（disc, circle, square, none）

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
  <li>葡萄</li>
</ul>

3. 定义列表（Definition List）

使用 <dl> 标签定义，包含术语（<dt>）和描述（<dd>）。适用于术语解释或键值对形式的内容。

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，用于定义网页结构和内容。</dd>
  
  <dt>CSS</dt>
  <dd>层叠样式表，用于控制网页的表现和布局。</dd>
  
  <dt>JavaScript</dt>
  <dd>脚本语言，用于实现网页的交互功能。</dd>
</dl>

应用场景：

导航菜单（常用无序列表）
步骤说明（常用有序列表）
常见问题解答（常用定义列表）
产品特性列表

七、表格标签

<table> 标签用于创建数据表格，是展示结构化数据的重要方式。完整的表格由多个相关标签组成。

基本结构：

<table>
  <caption>表格标题</caption>
  <thead>
    <tr>
      <th>表头单元格1</th>
      <th>表头单元格2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据单元格1</td>
      <td>数据单元格2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>页脚单元格1</td>
      <td>页脚单元格2</td>
    </tr>
  </tfoot>
</table>

标签详解：

<table>：定义表格容器
<caption>：表格标题（可选的）
<thead>：表头部分（包含列标题）
<tbody>：表格主体（包含主要数据）
<tfoot>：表格页脚（包含汇总信息）
<tr>：定义表格行
<th>：定义表头单元格（自动加粗居中）
<td>：定义标准数据单元格

属性说明（虽然现在推荐使用CSS替代这些属性）：

border：设置表格边框宽度
cellpadding：单元格内边距
cellspacing：单元格间距
colspan：单元格横跨列数
rowspan：单元格纵跨行数

完整示例：

<table border="1" style="width:100%">
  <caption>学生成绩表 - 2023年第一学期</caption>
  <thead>
    <tr>
      <th rowspan="2">学号</th>
      <th rowspan="2">姓名</th>
      <th colspan="3">科目成绩</th>
    </tr>
    <tr>
      <th>数学</th>
      <th>语文</th>
      <th>英语</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>张三</td>
      <td>90</td>
      <td>85</td>
      <td>88</td>
    </tr>
    <tr>
      <td>002</td>
      <td>李四</td>
      <td>78</td>
      <td>92</td>
      <td>85</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">平均分</td>
      <td>84</td>
      <td>88.5</td>
      <td>86.5</td>
    </tr>
  </tfoot>
</table>

现代网页开发中，表格主要用于展示表格化数据，而非页面布局。布局功能已被CSS Flexbox和Grid等现代布局技术所取代。

五、HTML 属性

HTML 标签可以拥有属性，属性提供了有关 HTML 元素的额外信息，这些信息可以用于控制元素的行为、样式或与脚本的交互。属性总是在开始标签中指定，以名称/值对的形式出现，例如 name="value"。

一、属性的特点

属性必须写在开始标签中：
- 正确的写法：<img src="image.jpg" alt="示例图片">
- 错误的写法：<img> src="image.jpg" alt="示例图片"
属性名称不区分大小写：
- class="text" 和 CLASS="text" 是等效的
- 但为了代码一致性，通常建议使用小写（如 class 而不是 CLASS）
属性值引号的使用：
- 可以使用双引号：class="text"
- 可以使用单引号：class='text'
- 在 HTML5 中，某些简单属性值可以省略引号（如 disabled 而不是 disabled="disabled"）
- 建议始终使用引号（特别是当属性值包含空格时），例如：class="text primary"

二、常用的全局属性

全局属性是可以应用于大多数 HTML 标签的属性，以下是几个最常用的：

class 属性：
- 为元素指定一个或多个类名（多个类名用空格分隔）
- 主要用于通过 CSS 对元素进行样式设置
- 示例：<div class="container main">...</div>
id 属性：
- 为元素指定唯一的标识符
- 在整个文档中必须是唯一的
- 可用于通过 JavaScript 或 CSS 定位特定元素
- 示例：<section id="about-us">...</section>
style 属性：
- 用于为元素设置内联样式
- 样式声明以 属性:值; 的形式出现
- 多个样式声明用分号分隔
- 示例：<p style="color: blue; font-size: 18px;">...</p>
其他重要的全局属性：
- title：提供元素的额外信息（通常显示为工具提示）
- data-*：用于存储自定义数据（如 data-user-id="123"）
- lang：指定元素内容的语言（如 lang="en"）
- tabindex：控制元素是否能通过键盘获取焦点及其顺序

示例代码

<p class="text" id="para1" style="color: red; font-size: 16px;">
  这是一个带有属性的段落
</p>

<div class="container" id="main-container" data-page="home" title="主要内容区域">
  <button class="btn primary" style="background-color: #4CAF50; color: white;">提交</button>
</div>

六、基础操作指令及示例

一、创建 HTML 文件

详细步骤说明：

新建文本文件：
- 在 Windows 系统中，右键点击桌面或文件夹空白处 → 选择"新建" → "文本文档"
- 在 macOS 系统中，使用"文本编辑"应用创建新文档
修改文件扩展名：
- 在 Windows 中：
  - 首先确保显示文件扩展名（在文件资源管理器 → 查看 → 勾选"文件扩展名"）
  - 右键文件 → 重命名 → 将".txt"改为".html"或".htm"
- 在 macOS 中：
  - 右键文件 → 选择"显示简介" → 在"名称与扩展名"处修改
  - 或使用终端命令mv 原文件名.txt 新文件名.html
编辑 HTML 代码：
- 推荐使用的文本编辑器：
  - 基础编辑器：记事本(Windows)、TextEdit(macOS)
  - 专业编辑器：VS Code、Sublime Text、Atom、Notepad++
- 编辑技巧：
  - 使用专业编辑器可获得语法高亮和代码提示
  - 保存时确保编码为UTF-8（特别是包含中文时）

二、运行 HTML 文件

运行方法与调试技巧：

打开方式：
- 双击文件（默认使用系统设置的浏览器打开）
- 右键文件 → 打开方式 → 选择特定浏览器（如Chrome、Firefox、Edge等）
开发调试流程：
- 修改代码 → 保存文件(Ctrl+S) → 浏览器刷新(F5或Ctrl+R)
- 高级调试：
  - 按F12打开开发者工具
  - 使用"元素"面板检查HTML结构
  - 使用"控制台"查看错误信息
特殊注意事项：
- 网页中的图片路径要正确（相对路径或完整URL）
- 现代浏览器对本地文件的安全限制：
  - 某些API（如AJAX请求）可能在file://协议下受限
  - 可使用本地服务器（如VS Code的Live Server扩展）解决

三、完整示例解析

示例代码详细说明：

<!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>HTML基础示例</title>
    <!-- 网页标题，显示在浏览器标签页上 -->
</head>

<body>
    <!-- 文档内容区域 -->
    <h1>欢迎学习HTML</h1>
    <!-- 一级标题，一个页面通常只用一个h1 -->
    <p>HTML是构建网页的基础，下面是一些常用的HTML元素示例。</p>
    <!-- 段落文本 -->

    <h2>链接示例</h2>
    <!-- 二级标题 -->
    <a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">
        访问百度
    </a>
    <!-- 超链接，target="_blank"表示在新标签页打开 -->
    <!-- rel属性增强安全性，防止tabnabbing攻击 -->

    <h2>图像示例</h2>
    <img src="https://img.baidu.com/img/logo.png" 
         alt="百度logo" 
         width="200"
         loading="lazy">
    <!-- 图片元素，alt属性为替代文本（重要SEO元素） -->
    <!-- loading="lazy"实现图片懒加载 -->

    <h2>列表示例</h2>
    <h3>有序列表 (ol = ordered list)</h3>
    <ol>
        <li>学习HTML</li>
        <li>学习CSS</li>
        <li>学习JavaScript</li>
    </ol>

    <h3>无序列表 (ul = unordered list)</h3>
    <ul>
        <li>前端开发</li>
        <li>后端开发</li>
        <li>移动端开发</li>
    </ul>

    <h2>表格示例</h2>
    <table border="1">
        <!-- border属性仅为演示，实际开发中应使用CSS设置样式 -->
        <caption>课程表</caption>
        <!-- 表格标题 -->
        <thead>
            <!-- 表头区域 -->
            <tr>
                <th scope="col">时间</th>
                <th scope="col">周一</th>
                <th scope="col">周二</th>
            </tr>
        </thead>
        <tbody>
            <!-- 表格主体 -->
            <tr>
                <th scope="row">上午</th>
                <td>HTML</td>
                <td>CSS</td>
            </tr>
            <tr>
                <th scope="row">下午</th>
                <td>JavaScript</td>
                <td>练习</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

实际应用建议：

代码组织：
- 保持良好缩进（建议2或4个空格）
- 添加注释说明复杂结构
- 将CSS和JavaScript分离到单独文件中
扩展学习：
- 在示例基础上添加：
  - 表单元素（input、button等）
  - 多媒体元素（video、audio）
  - 语义化标签（header、footer、article等）
最佳实践：
- 使用HTML验证器检查代码
- 遵循W3C标准和Web可访问性指南
- 在多个浏览器中测试显示效果