← 返回目录

HTML 基础：标签、属性与文档结构

入门 · 第 01 篇 ·

什么是 HTML

HTML（HyperText Markup Language，超文本标记语言）是构建网页的骨架。它用标签（Tag）定义页面中的各种内容元素，浏览器负责将这些标签渲染为可视化的页面。

HTML 不是编程语言，而是标记语言——它描述的是内容的结构，而不是行为逻辑。

文档结构

每个 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>
  <!-- 页面内容放在这里 -->
</body>
</html>

• <!DOCTYPE html>：告知浏览器使用 HTML5 标准解析
• <html>：根元素，lang 属性声明页面语言
• <head>：包含元数据（字符编码、视口设置、标题等）
• <body>：包含页面所有可见内容

常用标签

标题标签

HTML 提供 h1 到 h6 六级标题，h1 最重要：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

段落与文本

<p>这是一个段落。</p>
<strong>加粗文本</strong>
<em>斜体文本</em>
<a href="https://example.com">超链接</a>

列表

<!-- 无序列表 -->
<ul>
  <li>项目一</li>
  <li>项目二</li>
</ul>

<!-- 有序列表 -->
<ol>
  <li>第一步</li>
  <li>第二步</li>
</ol>

图片与媒体

<img src="photo.jpg" alt="图片描述" width="300">

语义化标签

HTML5 引入了大量语义化标签，让页面结构更清晰：

<header>页面头部</header>
<nav>导航栏</nav>
<main>主要内容</main>
<article>独立内容</article>
<section>内容分区</section>
<footer>页面底部</footer>

属性的书写

属性写在开始标签内，以键值对形式存在：

<a href="https://example.com" target="_blank">新窗口打开</a>
<input type="text" placeholder="请输入内容" required>

• 属性名区分大小写，建议全部小写
• 属性值建议用双引号包裹
• 布尔属性（如 required）可以不写值

注释

<!-- 这是 HTML 注释，不会被浏览器渲染 -->

实践建议

• 用 VS Code 或类似编辑器编写，利用 Emmet 插件快速生成标签
• 写完页面后用浏览器的开发者工具（F12）检查结构
• 养成使用语义化标签的习惯，而非全部用 <div>

小结

本篇介绍了 HTML 的核心概念：文档结构、常用标签、属性书写和语义化。HTML 是前端三件套的基础，掌握它才能顺利学习 CSS 和 JavaScript。

下一篇：CSS 基础：选择器、盒模型与布局入门