Web学习网站

Appearance

HTML 基本结构 ​

每个 HTML 文档都有一个基本结构，它由各种标签组成。了解这些基本结构是学习 HTML 的第一步。

HTML5 基本文档结构 ​

html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

各部分详解 ​

<!DOCTYPE html> 声明 ​

这是 HTML5 的文档类型声明，必须位于文档的第一行。

<html> 根元素 ​

这是 HTML 文档的根元素，所有其他元素都包含在其中。

<head> 头部元素 ​

包含文档的元数据，不会在浏览器窗口中显示：

  • <meta>: 提供有关页面的元信息
  • <title>: 定义文档标题
  • <link>: 链接外部资源，如 CSS 文件
  • <style>: 包含内部 CSS 样式
  • <script>: 包含或引用 JavaScript 代码

<body> 主体元素 ​

包含所有在浏览器窗口中显示的内容：

  • 标题（<h1> 到 <h6>）
  • 段落（<p>）
  • 链接（<a>）
  • 图像（<img>）
  • 列表（<ul>, <ol>, <li>）
  • 表格（<table>, <tr>, <td>）
  • 表单（<form>, <input>, <button>）等

第一个 HTML 页面示例 ​

html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是我的第一个网页。</p>
</body>
</html>

这个简单的页面展示了 HTML 的基本结构。在浏览器中打开时，会显示一个标题和一个段落。