上一篇
HTML文档的结构
HTML文档由DOCTYPE声明、html根元素构成，包含head（含title、meta等元数据）和body（主体内容），结构清晰，符合标准
HTML文档的基础结构
HTML文档由多个层级组成,核心结构包含以下部分：
| 结构层级 | 说明 |
|---|---|
<!DOCTYPE> | 声明文档类型（HTML5为<!DOCTYPE html>），告知浏览器解析模式。 |
<html> | 根元素，包裹整个文档，可添加lang属性声明语言（如lang="zh-CN"）。 |
<head> | 头部区域，包含元数据（如标题、字符集、链接资源等）。 |
<body> | 主体区域，包含网页可见内容（文本、图片、链接、表格等）。 |
<head>头部元素详解
<head>中的元素用于配置页面元信息和加载资源,常见标签如下：
| 功能 | 示例 | |
|---|---|---|
<meta> | 设置字符编码、视口适配等。 | <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"> |
<link> | 引入外部资源（如CSS样式表）。 | <link rel="stylesheet" href="styles.css"> |
<script> | 引入JavaScript文件或内联脚本。 | <script src="script.js"></script><script>alert("Hello")</script> |
<body>主体元素详解
<body>的容器,常见标签及功能如下：
| 功能 | 示例 | |
|---|---|---|
<h1>~<h6> | 标题标签（<h1>为最高层级，<h6>为最低）。 | <h1>主标题</h1><h2>副标题</h2> |
<p> | 段落文本。 | <p>这是一个段落。</p> |
<ul>/<ol>/<li> | 无序列表（<ul>）、有序列表（<ol>）及列表项（<li>）。 | <ul><li>项目1</li><li>项目2</li></ul> |
<a> | 超链接（需设置href属性）。 | <a href="https://example.com">链接</a> |
<img> | 图片（需设置src属性，建议添加alt描述）。 | <img src="image.jpg" alt="示例图片"> |
<table> | 表格（需搭配<tr>行、<td>单元格）。 | <table><tr><td>数据1</td></tr></table> |
其他常用元素
| 功能 | 示例 | |
|---|---|---|
<div> | 分区容器（常用于布局和样式控制）。 | <div class="container">内容</div> |
<span> | 行内元素容器（用于局部样式或脚本控制）。 | <span style="color:red">红色文本</span> |
<form> | 表单（含输入框、按钮等，用于用户提交数据）。 | <form action="/submit"><input type="text"><button>提交</button></form> |
<video>/<audio> | 嵌入音视频（需设置src属性）。 | <video src="video.mp4" controls></video> |
相关问题与解答
问题1：<!DOCTYPE html>的作用是什么？
解答：<!DOCTYPE html>是HTML5的文档类型声明，告知浏览器以标准模式解析网页，避免旧版浏览器的兼容模式（如怪异模式）,它必须位于HTML文档的第一行。
问题2：如何在HTML中引入外部CSS文件？
解答：在<head>中使用<link>标签，设置rel="stylesheet"并指定CSS文件路径。
<link rel="stylesheet" href="styles.css">
