【HTML 基础】文档结构

文章目录

- - 1.<!DOCTYPE>
  - 2. <html>
  - 3. <head>
  - 4. <body>
  - 总结

HTML 文档的结构是构建网页的基础，通过合理使用标签，我们能够清晰地定义文档的各个部分。在这篇博客中，我们将介绍 HTML 文档的基本结构，包括 <!DOCTYPE>, <html>, <head> 和 <body> 等标签。

1.<!DOCTYPE>

<!DOCTYPE> 声明位于 HTML 文档的最顶部，它并不是 HTML 标签，而是一种告诉浏览器文档类型和版本的声明。它的作用是确保浏览器按照正确的文档类型解析页面，以保证页面的正确渲染。

<!DOCTYPE html>

这个声明告诉浏览器使用 HTML5 标准解析页面。在过去，不同的 HTML 版本有不同的文档类型声明，但 HTML5 的普及使得大多数网页都采用这个简单的声明。

2. <html>

<html> 元素是整个 HTML 文档的根元素，包含了文档的全部内容。它有两个子元素：<head> 和 <body>。

<!DOCTYPE html>
<html>
  <!-- head 和 body 元素都是写在 html 标签里面 -->
</html>

3. <head>

<head> 元素用于包含与文档相关的元信息（meta-information），而非实际的页面内容。在 <head> 中，我们可以设置文档的标题、引入外部样式表和脚本、定义字符集等。

<!DOCTYPE html>
<html>
  <head>
    <title>我的网页</title>
    <meta charset="UTF-8">
    <!-- 其他元信息和引入外部资源的标签 -->
  </head>
  <!-- body 元素在这里 -->
</html>

4. <body>

<body> 元素包含了 HTML 文档的实际内容，如文本、图像、链接等。这是用户直接看到和与之交互的部分。在 <body> 中，我们可以使用各种 HTML 标签来组织和呈现内容。

<!DOCTYPE html>
<html>
  <head>
    <title>我的网页</title>
    <meta charset="UTF-8">
    <!-- 其他元信息和引入外部资源的标签 -->
  </head>
  <body>
    <h1>欢迎来到我的网页</h1>
    <p>Hello World！</p>
    <!-- 其他页面内容 -->
  </body>
</html>