HTML基础
Random2026-02-10
第二章 HTML基础
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 <doctype>标签
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>