HTML详解 — 上篇（基础结构与常用标签）

HTML（HyperText Markup Language）是网页的 骨架语言，用于定义网页内容的结构。上篇我们重点讲 文档结构、文本标签、链接和图片。

1. HTML 文档基础结构

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 基础示例</title>
</head>
<body>
  <h1>这是标题</h1>
  <p>这是段落内容。</p>
</body>
</html>

说明：

  • <!DOCTYPE html>：声明文档类型为 HTML5。
  • <html>：HTML 根标签，lang 表示语言。
  • <head>：包含元信息（meta）、标题（title）、CSS、脚本等。
  • <body>：页面可见内容。

2. 文本标签

2.1 标题

HTML 提供 6 级标题，<h1> 最大，<h6> 最小：

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

2.2 段落与换行

1
2
<p>这是一个段落。</p>
<br> <!-- 换行 -->

2.3 强调文本

1
2
3
4
5
6
7
8
<strong>加粗</strong>
<b>粗体</b>
<em>强调（斜体）</em>
<i>斜体</i>
<mark>高亮文本</mark>
<small>小号文本</small>
<del>删除线</del>
<ins>插入线</ins>

2.4 文本分组

1
2
<div>块级容器</div>
<span>行内容器</span>

3. 列表

3.1 无序列表

1
2
3
4
5
<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

3.2 有序列表

1
2
3
4
<ol>
  <li>第一步</li>
  <li>第二步</li>
</ol>

3.3 描述列表

1
2
3
4
5
6
<dl>
  <dt>HTML</dt>
  <dd>网页结构语言</dd>
  <dt>CSS</dt>
  <dd>样式表语言</dd>
</dl>

4. 超链接

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

说明：

  • href：链接地址。
  • target="_blank"：新窗口打开。
  • title：鼠标悬停提示文本。

5. 图片

1
<img src="logo.png" alt="网站 Logo" width="200" height="100">

说明：

  • src：图片路径。
  • alt：图片无法显示时的文本说明，利于 SEO 和无障碍。
  • width / height：尺寸控制，可用 CSS 更灵活。

6. 基本分隔与引用

1
2
3
4
5
6
7
<hr> <!-- 水平分割线 -->

<blockquote>
  这是引用内容，通常用于引用别人的话。
</blockquote>

<q>这是内联引用</q>

7. 注释

1
2
<!-- 这是注释，不会显示在页面 -->
<img src="logo.png" alt="网站 Logo" width="200" height="100">