HTML 入门教程：从零开始构建标准网页骨架

FreeGuideOnline 最新 2026-06-12

什么是 HTML

HTML（HyperText Markup Language，超文本标记语言）不是编程语言，而是一种标记语言。它使用一系列标签来描述网页的结构与内容。你可以把 HTML 想象成盖房子的骨架：它定义了哪里是标题、哪里是段落、哪里是图片，但房子的外观（颜色、布局）则由 CSS 负责，交互行为则由 JavaScript 处理。

学习 HTML 是进入前端开发的第一步，也是构建任何网页的基础。

编写你的第一个 HTML 文件

创建 HTML 文件

在电脑上新建一个文本文件，将其扩展名改为 .html（例如 index.html），然后用任意文本编辑器（如 VS Code、记事本、Sublime Text）打开它。

编写基本骨架

一个标准的 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>这是一个段落。</p>
</body>
</html>

保存文件后，用浏览器打开它，你就能看到网页的雏形。下面逐行解释这个骨架的含义。

骨架代码详解

`<!DOCTYPE html>`

文档类型声明，必须写在第一行。它告诉浏览器这是一个 HTML5 文档，让浏览器按标准模式渲染。

`<html lang="zh-CN">`

根元素，包裹整个页面内容。lang 属性声明页面主要语言，这里 zh-CN 表示简体中文，有利于搜索引擎和辅助技术。

`<head>`

头部区域，包含页面的元数据（metadata），不会直接显示在页面上。常见内容有：
- <meta charset="UTF-8">：设置字符编码为 UTF-8，避免中文乱码。
- <meta name="viewport" ...>：让页面在移动设备上正确缩放。
- <title>：定义浏览器标签页的标题，也是搜索引擎结果中的标题。

`<body>`

主体区域，所有用户能看到的内容都写在这里，例如标题、段落、图片、链接等。

HTML 标签的基本语法

HTML 标签通常是成对出现的：一个开始标签和一个结束标签，中间包裹内容。

<tagname>内容</tagname>

但也有自闭合标签（空元素），例如：

<br>     <!-- 换行 -->
<img src="image.jpg" alt="描述">  <!-- 图片 -->
<hr>     <!-- 水平线 -->

属性

标签可以拥有属性，提供额外信息。属性总是写在开始标签内部，格式为 属性名="属性值"。

<a href="https://example.com">访问链接</a>
<img src="photo.jpg" alt="照片描述">

href：链接的目标地址
src：图片的文件路径
alt：图片的替代文字（无障碍与SEO必备）

多个属性之间用空格隔开，顺序无关。

常用 HTML 元素快速上手

标题与段落

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
... 一直到 <h6> 六级标题

<p>这是一个段落，段落之间会自动产生间距。</p>
<p>这是另一个段落。</p>

标题标签具有语义层级，<h1> 最重要（通常每个页面只用一次），<h6> 最次要。不要为了改变文字大小而随意使用标题，应该用 CSS 控制外观。

文本格式化

<strong>加粗（语义强调）</strong>
<em>斜体（语义强调）</em>
<b>仅加粗（无强调）</b>
<i>仅斜体（无强调）</i>
<u>下划线</u>
<s>删除线</s>
<br>  <!-- 换行 -->

建议在需要真正强调内容时使用 <strong> 和 <em>，仅样式需求则使用 CSS 或 <b>、<i>。

链接

<a href="https://www.example.com">访问示例网站</a>
<a href="about.html">关于我</a> <!-- 相对路径 -->
<a href="#section1">跳转到页面内部</a> <!-- 锚点 -->

href 可以是外部链接、内部相对路径、或 # 加目标元素的 id 实现页内跳转。
添加 target="_blank" 可在新标签页打开链接：<a href="https://example.com" target="_blank">新窗口打开</a>。

图像

<img src="images/photo.jpg" alt="一只可爱的猫">

src：图片路径（相对或绝对）。
alt：必填属性，描述图片内容。当图片无法显示或视障用户使用屏幕阅读器时，会呈现这段文字。
可以设置 width 和 height 属性（单位像素），但通常推荐用 CSS 控制尺寸。

列表

<!-- 无序列表 -->
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<!-- 有序列表 -->
<ol>
    <li>打开冰箱门</li>
    <li>把大象放进去</li>
    <li>关上冰箱门</li>
</ol>

列表可以嵌套使用，形成多层级结构。

表格

<table border="1">
    <caption>我的第一张表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>职业</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>前端工程师</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>设计师</td>
        </tr>
    </tbody>
</table>

<table>：定义表格。
<caption>：表格标题。
<thead>、<tbody>、<tfoot>：表格结构分区，有助于样式和脚本控制。
<tr>：行，<th>：表头单元格（默认加粗居中），<td>：普通数据单元格。
border 属性已不推荐，实际开发中用 CSS 设置边框。

表单（基础）

表单用于收集用户输入。

<form action="/submit" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" placeholder="请输入用户名" required>
    <br><br>
    
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
    <br><br>
    
    <label>性别：</label>
    <input type="radio" name="gender" value="male"> 男
    <input type="radio" name="gender" value="female"> 女
    <br><br>
    
    <label for="city">城市：</label>
    <select id="city" name="city">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
    </select>
    <br><br>
    
    <input type="submit" value="提交">
</form>

action：数据提交的服务器地址。
method：HTTP 方法（get 或 post）。
<label> 的 for 属性关联 input 的 id，提升可访问性。
name 属性是提交数据时的键名。
required 表示必填项。

块级与行内元素

块级元素（如 <div>、<p>、<h1>、<ul>）：独占一行，宽度默认占满父元素，可以设置宽高。
行内元素（如 <span>、<a>、<strong>、<img>）：不换行，宽高由内容决定，设置上下外边距可能无效。
使用 <div> 作为通用块级容器，<span> 作为通用行内容器，常用于搭配 CSS 布局和样式。

语义化 HTML 的重要性

使用正确的标签表达内容含义，而不是仅用 <div> 堆砌。语义化标签提高可访问性、SEO 和代码可读性。

常见语义化结构标签：

<header>   <!-- 页眉 -->
<nav>      <!-- 导航 -->
<main>     <!-- 主内容区 -->
<article>  <!-- 独立文章 -->
<section>  <!-- 章节 -->
<aside>    <!-- 侧边栏 -->
<footer>   <!-- 页脚 -->

示例页面布局：

<body>
    <header>
        <h1>网站名称</h1>
        <nav>
            <ul>
                <li><a href="/">首页</a></li>
                <li><a href="/about">关于</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>文章标题</h2>
            <p>正文内容...</p>
        </article>
        <aside>
            <h3>相关推荐</h3>
            <ul>
                <li>文章一</li>
            </ul>
        </aside>
    </main>
    <footer>
        <p>版权所有 © 2025</p>
    </footer>
</body>

构建一个完整的标准网页（实战范例）

创建一个简单的介绍页面，包含页眉、导航、关于我、项目列表和页脚。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张三的个人主页</title>
    <style>
        body { font-family: sans-serif; margin: 0; padding: 20px; }
        header, footer { background-color: #f4f4f4; padding: 10px; text-align: center; }
        nav ul { list-style: none; padding: 0; }
        nav ul li { display: inline; margin: 0 15px; }
        .projects { display: flex; gap: 20px; }
        .project-card { border: 1px solid #ccc; padding: 10px; }
    </style>
</head>
<body>
    <header>
        <h1>张三</h1>
        <nav>
            <ul>
                <li><a href="#about">关于我</a></li>
                <li><a href="#projects">项目</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="about">
            <h2>关于我</h2>
            <p>你好！我是一名前端开发爱好者，热衷于构建干净、语义化的网页。</p>
        </section>

        <section id="projects">
            <h2>我的项目</h2>
            <div class="projects">
                <article class="project-card">
                    <h3>个人博客</h3>
                    <p>使用 HTML 和 CSS 搭建的静态博客。</p>
                </article>
                <article class="project-card">
                    <h3>待办事项应用</h3>
                    <p>一个简单的 JavaScript 待办列表。</p>
                </article>
            </div>
        </section>

        <aside>
            <h3>技能标签</h3>
            <ul>
                <li>HTML5</li>
                <li>CSS3</li>
                <li>JavaScript</li>
            </ul>
        </aside>
    </main>

    <footer id="contact">
        <p>联系我：zhangsan@example.com</p>
        <p>© 2025 张三</p>
    </footer>
</body>
</html>

你可以直接将这段代码保存为 index.html 并用浏览器打开，查看完整效果。

常见问题与最佳实践

缩进与格式化

始终保持代码缩进，提高可读性。大多数编辑器支持自动格式化（例如 VS Code 的 Shift+Alt+F）。

路径写法

相对路径：相对于当前文件的位置。
- images/logo.png（同目录下的 images 文件夹内）
- ../style.css（上一级目录）
绝对路径：完整的网址 https://www.example.com/image.jpg 或本地磁盘路径（不推荐用于 web）。

验证 HTML

使用 W3C 验证服务检查你的 HTML 代码是否符合标准，这是修复隐藏问题的好习惯。

注释

<!-- 这是一个注释，不会在浏览器中显示 -->

注释有助于代码维护。

下一步学习

掌握 HTML 后，你应当学习：

CSS：为网页添加样式和布局。
响应式设计基础：让网页适配不同屏幕尺寸。
开发者工具：使用浏览器的开发者工具（F12）检查和调试页面。

HTML 虽然简单，但它是整个前端体系的基石。理解文档结构、语义化标签和基本元素，你将能够搭建任何网页的骨架。现在，打开你的编辑器，开始实践吧！