HTML文档基本结构包括<!DOCTYPE html>、<html>、<head>和<body>。其中，<head>定义元数据如标题、字符集（UTF-8）以避免乱码，<meta>标签用于设置keywords、description、viewport等信息，<link>引入CSS，<script>加载JavaScript，<body>包含页面主体内容。
HTML文档的基本结构主要包括
<html>、
<head>和
<body>这三个核心标签。
<html>是根元素，包裹整个HTML文档；
<head>包含文档的元数据，如标题、字符集等；
<body>则包含用户在浏览器中看到的所有内容。
解决方案 HTML文档的基本结构就像一栋房子的地基和框架。
<!DOCTYPE html>声明文档类型，告诉浏览器使用哪个HTML版本来解析文档。然后，
<html>标签是整个文档的根元素，所有其他标签都嵌套在它里面。
<head>标签则像是房子的设计图和装修。它包含文档的元数据，这些信息不会直接显示在页面上，但对浏览器、搜索引擎和其他服务至关重要。例如：
<title>
：定义浏览器选项卡或窗口标题，也是搜索引擎结果中显示的标题。<meta>
：提供关于HTML文档的元数据，如字符集（charset
）、关键词（keywords
）、描述（description
）等。字符集通常设置为UTF-8
，以支持各种字符。<link>
：链接外部资源，如CSS样式表（rel="stylesheet"
）和网站图标（rel="icon"
）。<style>
：直接在HTML文档中嵌入CSS样式，但不推荐大量使用，最好放在外部样式表中。<script>
：嵌入或链接JavaScript代码，用于实现页面的动态效果和交互功能。
<body>标签是房子的主体，包含了用户在浏览器中看到的所有内容，如文本、图像、链接、表单等。这是HTML文档中最主要的部分，也是开发者花费最多时间编写的部分。
HTML文档的字符集声明为什么这么重要？
字符集声明，通常通过
<meta charset="UTF-8">来实现，它告诉浏览器使用哪种字符编码来解析HTML文档。如果字符集声明不正确或缺失，浏览器可能会使用错误的编码，导致页面显示乱码。
UTF-8是一种通用的字符编码，支持世界上几乎所有的字符，因此通常被推荐使用。
立即学习“前端免费学习笔记（深入）”；
想象一下，如果你用中文写了一封信，但收信人却用英文的编码来阅读，那么信的内容就会变成一堆乱码。字符集声明的作用就是确保浏览器使用正确的“语言”来理解HTML文档的内容，从而避免乱码问题。
<head>
中的<meta>
标签有哪些常见的属性和用途？
<meta>标签有很多属性，其中最常见的包括：
charset
：指定文档的字符集，如UTF-8
。name
：指定元数据的类型，常见的有keywords
、description
、author
、viewport
等。content
：指定元数据的值，与name
属性配合使用。
例如：
<meta name="keywords" content="HTML, CSS, JavaScript">
：指定页面的关键词，有助于搜索引擎优化（SEO）。<meta name="description" content="This is a sample HTML document.">
：指定页面的描述，显示在搜索引擎结果中，吸引用户点击。<meta name="author" content="John Doe">
：指定页面的作者。<meta name="viewport" content="width=device-width, initial-scale=1.0">
：配置移动设备的视口，确保页面在不同设备上正确显示。
关于
viewport，尤其需要注意。它控制着页面在移动设备上的缩放和显示方式。
width=device-width告诉浏览器使用设备的宽度作为页面的宽度，
initial-scale=1.0设置初始缩放比例为1.0。如果没有正确配置
viewport，页面在移动设备上可能会显示得过小或过大，影响用户体验。
如何在HTML文档中引入外部CSS样式表和JavaScript文件？
引入外部CSS样式表，可以使用
<link>标签，并将
rel属性设置为
stylesheet，
href属性设置为CSS文件的路径。例如：
<link rel="stylesheet" href="styles.css">
引入外部JavaScript文件，可以使用
<script>标签，并将
src属性设置为JavaScript文件的路径。例如：
<script src="script.js"></script>
<link>标签通常放在
<head>标签中，因为CSS样式应该在页面加载之前加载完成，以避免页面闪烁或样式错乱。
<script>标签可以放在
<head>标签中或
<body>标签的底部。放在
<body>底部可以确保在HTML内容加载完成后再执行JavaScript代码，避免JavaScript代码阻塞页面渲染。但如果JavaScript代码需要在页面加载之前执行，或者使用了
async或
defer属性，则可以放在
<head>标签中。
async属性表示异步加载JavaScript文件，不会阻塞页面渲染。
defer属性表示延迟加载JavaScript文件，在HTML解析完成后执行。使用
async或
defer属性可以提高页面加载速度，但需要注意JavaScript代码的执行顺序。
