HTML 基础
所有 HTML 文档都共享一个通用的基本结构。理解这个结构是学习 HTML 的第一步。让我们来看一个最简单的 HTML 文档示例。
一个基本的 HTML 文档
html
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>现在，让我们来逐行分解这个结构：
1. <!DOCTYPE html> 声明
- 作用:
<!DOCTYPE html>是一个文档类型声明 (Document Type Declaration)，它告诉浏览器这个页面是使用 HTML5 标准编写的。 - 位置: 它必须是 HTML 文档的第一行，位于
<html>标签之前。 - 注意: 这不是一个 HTML 标签，而是一个指令。它不区分大小写，但通常推荐使用大写形式
<!DOCTYPE html>。
2. <html> 元素
- 作用:
<html>元素是整个 HTML 页面的根元素 (root element)。所有其他元素都必须嵌套在<html>和</html>标签之间。 lang属性: 通常会给<html>标签添加一个lang属性，来声明页面的主要语言，例如<html lang="en">表示英语，<html lang="zh-CN">表示简体中文。这对搜索引擎优化 (SEO) 和屏幕阅读器等辅助技术很有帮助。
3. <head> 元素
- 作用:
<head>元素包含了页面的元数据 (metadata)。这些信息不会直接显示在浏览器的主窗口中，但它们定义了文档的各种属性和信息。 - 包含内容:
<head>元素内部通常包含：<title>: 定义了显示在浏览器标签页或窗口标题栏上的页面标题。这是<head>中唯一一个必须包含的元素。<meta>: 提供关于 HTML 文档的元数据，如字符集声明 (<meta charset="UTF-8">)、页面描述、关键词等。<link>: 用于链接外部资源，最常见的是链接外部 CSS 样式表。<style>: 用于定义内部 CSS 样式。<script>: 用于链接或编写 JavaScript 代码。
4. <body> 元素
- 作用:
<body>元素定义了 HTML 文档的主体内容。所有你希望用户在浏览器中看到的内容，都应该放在<body>和</body>标签之间。 - 包含内容: 这包括文本、标题 (
<h1>到<h6>)、段落 (<p>)、图片 (<img>)、链接 (<a>)、列表、表格等等，构成了网页的可见部分。
标签的嵌套
HTML 是通过嵌套 (nesting) 标签来构建结构的。一个元素可以包含其他元素，就像俄罗斯套娃一样。正确的嵌套是至关重要的。
html
<!-- 正确的嵌套 -->
<p>这是一个<strong>重要的</strong>段落。</p>
<!-- 错误的嵌套 -->
<p>这是一个<strong>重要的</p></strong>段落。在这个基础结构之上，我们通过向 <body> 中添加更多的 HTML 元素来构建出丰富多彩的网页内容。