HTML基础：从零开始学网页

原创于 2025-12-26 20:03:26 发布 · 729 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端

Web前端开发技术专栏收录该内容

5 篇文章

订阅专栏

编程达人挑战赛·第6期 10w+人浏览 137人参与

第二章 HTML基础

本专栏以《Web前端开发技术》（清华大学出版社，储久良著）为主要参考资料，旨在配合课程教学与实践练习使用。文章内容将结合理论与实践，深入讲解前端开发技术，帮助读者系统掌握 Web 前端开发技能。

我会一直连载，如果你喜欢本系列内容，欢迎 订阅专栏 或者关注我，这样就不会错过后续更多前端教程、实战案例与技术分享。

2.1 HTML文档的结构

HTML（超文本标记语言）是网页的基础骨架。每一个网页都由以下两大部分组成：

头部（head）：包含页面元数据，例如标题、编码、引用样式和脚本等，不直接显示在页面内容中。
主体（body）：页面的主要内容区域，所有能在浏览器中看到的内容都在这里。

标准HTML5文档结构如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
  </head>
  <body>
    <h1>欢迎来到HTML学习世界！</h1>
    <p>这是正文内容。</p>
  </body>
</html>

知识拓展：

建议在<html>标签上设置lang="zh-CN"，利于搜索引擎优化和无障碍访问。
所有标签推荐小写书写，有助于代码规范和兼容性。

2.2 头部 head

2.2.1 标题 title 标签

<title>标签用于指定网页标题，显示在浏览器标签栏或窗口顶部。一个网页只能有一个<title>标签。

2.2.2 元信息 meta 标签

<meta>标签用于定义网页的元数据，如字符编码、作者、关键词、描述等。常见写法：

<meta charset="UTF-8">
<meta name="author" content="张三">
<meta name="keywords" content="HTML, 教程, 入门">
<meta name="description" content="这是一个HTML基础入门页面。">

知识拓展：

使用<meta charset="UTF-8">确保网页支持中文和多语言。
合理设置keywords和description有助于SEO（搜索引擎优化）。

2.3 主体 body

2.3.1 body标签的属性

<body>标签是页面的主内容区。可以通过属性（如bgcolor设置背景色），但HTML5推荐用CSS样式实现页面美化：

<body style="background-color: #f5f5f5;">

知识拓展：

建议内容结构清晰，合理使用标题（<h1>~<h6>）、段落（<p>）、列表（<ul>、<ol>）、图片（<img>）、链接（<a>）等标签。
语义化标签（如<header>、<nav>、<main>、<footer>）可提高页面结构的清晰性和SEO效果。

2.4 HTML基本语法

2.4.1 标签的类型

双标签：有开始和结束标签，如<p>内容</p>、<div>内容</div>
单标签/自闭合标签：如<br>、<img>（HTML5中可不加斜杠）

2.4.2 HTML属性

HTML标签可通过各种属性实现扩展功能，例如：

<a href="https://www.example.com" target="_blank">点击访问</a>
<img src="logo.png" alt="网站logo" width="100">

常见属性说明：

href：链接地址
src：图片路径
alt：图片替代文本，建议设置利于无障碍
id/class：标签唯一标识与样式辅助
style：内联样式设置

知识拓展：

所有属性值建议用英文双引号包裹，增强兼容性和规范性。
合理使用id和class，为样式和脚本操作提供方便。

2.5 注释

注释用于对代码进行说明，便于后续维护和团队协作：

<!-- 这里是头部区域 -->

知识拓展：
注释不会被浏览器显示，但不要在注释中写敏感信息，以防源码泄漏。

2.6 HTML文档编写与规范

2.6.1 HTML代码的书写规范

标签统一用小写
合理缩进，层次分明
文件编码统一为UTF-8
页面结构清晰，优先使用语义化标签

2.6.2 HTML文档的命名规则

文件名简洁明了
避免使用中文、空格
用连字符“-”分隔单词，如：about-us.html

知识拓展：

语义化标签如<header>, <nav>, <main>, <footer>可提升页面的结构清晰度及搜索引擎友好度。

2.7 HTML文档的类型

2.7.1 标签

HTML5文档必须声明类型，告诉浏览器以标准模式解析：

<!DOCTYPE html>

知识拓展：

旧版HTML有复杂的DTD声明，HTML5统一为简单的<!DOCTYPE html>。

2.8 思政案例——传统美德故事：铁杵磨成针

通过网页展示中华传统美德，如坚持不懈、诚信、孝顺、友善等。案例：铁杵磨成针，强调持之以恒、勤奋努力的精神。

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>传统美德故事:铁杵磨成针</title>
    <style type="text/css">
        div {
            text-align: center;
        }
        p {
            text-align: left;
            text-indent: 2em;
            margin: 3px;
        }
        strong, em {
            color: red;
        }
    </style>
</head>
<body style="background-color:#FEFEFE; margin-left:100px; margin-right:100px;">
<h2 style="text-align:center;">传统美德故事:铁杵磨成针</h2>
<hr size="1" color="red" width="100%"/>
<div>
    <img src="image-2-1.jpg" alt="铁杵磨成针插图">
    <p>
        唐朝大诗人李白，小时候不喜欢读书。一天，乘老师不在屋，悄悄溜出门去玩儿。他来到山下小河边，见一位老婆婆，在石头上磨一根铁杵。李白很纳闷，上前问：“老婆婆，您磨铁杵做什么？”老婆婆说：“我在磨针。”李白吃惊地问：“哎呀！铁杵这么粗大，怎样能磨成针呢？”老婆婆笑呵呵地说：“只要天天磨铁杵总能越磨越细，还怕磨不成针吗？”
    </p>
    <p>
        聪明的李白听后，想到自己，心中惭愧，转身跑回了书屋。从此，他牢记<strong>“只要功夫深，铁杵磨成针”</strong>的道理，发奋读书，最后成为有名的大诗人。
    </p>
    <p>
        <em><u>“书山有路勤为径，学海无涯苦作舟”</u></em>。中华民族自强不息的精神，在勤奋读书方面表现得格外突出。不论是善于治国的政治家，还是胸怀韬略的军事家；不论是思维敏捷的思想家，还是智慧超群的科学家，他们之所以在事业上不同凡响，都是与他们从小的远大抱负分不开的。俗话说：“有志者立常志，无志者常立志”，立志，贵在少年。
    </p>
    <hr size="1" color="red" width="100%"/>
</div>
</body>
</html>

练习 2

[!TIP]

答案仅供参考

一、选择题

下列标记中用于设置页面标题的标记是（）
- A. caption B. title C. html D. head
  答案：B. title
下列标记中能够显示网页内容的标记是（）
- A. title B. br C. html D. body
  答案：D. body
以下（）不是元信息 meta 标记的属性。
- A. name B. color C. content D. http-equiv
  答案：B. color
设置 body 显示信息的颜色为红色的属性是（）
- A. text B. color C. bgcolor D. background
  答案：C. bgcolor
以下标记不是成对标记的是（）
- A. html B. br C. body D. head
  答案：B. br

二、填空题

HTML 文档通常以__或____作为扩展名，网站的首页文件通常命名为______或______。
- 答案：.htm、.html、index.htm、index.html
HTML 文档是用来描述网页的，一般由______和______两部分组成。
- 答案：头部、主体
HTML 中的标记分为______标记和______标记两种。部分标记是单标记，大多数标记是______标记，由______标记（或______标记）和______标记（或______标记）组成。
- 答案：单、成对、成对、开始、起始、结束、终止

三、简答题

简述一个 HTML 文档应包含几个基本标记，并举例说明。
- 答案示例：
  - 一个标准的 HTML 文档应包含以下几个基本标记：
    1. <!DOCTYPE html>：声明文档类型。
    2. <html>：定义整个 HTML 页面。
    3. <head>：头部标记，包含页面元数据。
    4. <title>：网页标题，在浏览器标签栏显示。
    5. <meta>：定义网页的元信息（如字符集、描述等）。
    6. <body>：主体标记，页面实际内容。
  - 示例代码：
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>示例页面</title>
  </head>
  <body>
    <h1>欢迎学习HTML</h1>
  </body>
</html>
```
写出 HTML 文档的命名规则。
- 答案示例：
  - HTML 文档文件名应简洁明了，通常用英文小写字母书写，避免使用中文或空格。单词之间可用连字符“-”连接。首页文件通常命名为 index.html 或 index.htm。