主根元素
将 HTML 文档的所有内容包裹起来。| 元素 | 描述 |
|---|---|
<html> | 表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。所有其它元素必须是此元素的后代。 |
文档元数据
1. base
<!DOCTYPE html>
<html lang="zh">
<head>
<!-- 基础链接设置，所有相对链接将基于此URL -->
<base href="https://www.example.com/">
</head>
<body>
<!-- 参考 base 标签的效果 -->
<p>点击以下链接将带你到示例网站：<a href="page1.html">示例页面 1</a></p>
</body>
可以看到我们的代码并没有在a标签(超链接)里面设置网址,但是由于我们设置了base
点击“示例页面1”，跳转到bash设置的页面：
2. head
head元素是 HTML 文档的头部，包含了关于文档的信息（元数据），这些信息对页面的展示和功能至关重要，但不会直接显示在页面的内容部分。`` 通常放置文档的 `` 信息、CSS 样式、JavaScript 文件和文档的标题。
3. link
link元素主要用于在 HTML 文档与外部资源之间建立关系。最常见的用途是链接外部 CSS 文件，也可以用于其他资源，如网页图标（favicon）和 Web 字体等。
<head>
<!-- 链接外部CSS文件 -->
<link rel="stylesheet" href="styles.css">
<!-- 设置网页的图标 -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- 从 Google Fonts 加载字体 -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
</head>
4. meta
meta元素用于提供文档的元数据，如字符编码、页面描述、关键字等。meta标签不会在网页中显示，但对搜索引擎优化（SEO）、页面性能等有重要作用。
<head>
<!-- 设置字符编码 -->
<meta charset="UTF-8">
<!-- 页面描述，用于搜索引擎结果展示 -->
<meta name="description" content="HTML教程，学习HTML标签和页面结构。">
<!-- 页面关键字，帮助SEO -->
<meta name="keywords" content="HTML, 教程, 学习">
<!-- 设置网页视口，适应移动设备 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置网页作者 -->
<meta name="author" content="Jane Doe">
</head>
5. style
style元素用于定义文档的内部 CSS 样式。这些样式直接影响到文档的显示效果，但仅在该页面有效。style通常用于小型项目或实验性页面，在生产环境中建议使用外部 CSS 文件。
6. title
title元素定义了网页的标题，这个标题会显示在浏览器的标签页上title是网页中最重要的元数据之一，对于 SEO（搜索引擎优化）至关重要。每个 HTML 文档只能有一个title元素。
<head>
<title>HTML基础教程 - 学习HTML标签和网页结构</title>
</head>
效果如下：
文档元数据总结
| 元素 | 描述 |
|---|---|
<base> | 指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个该元素。 |
<head> | 包含文档相关的配置信息（元数据），包括文档的标题、脚本和样式表等。 |
<link> | 指定当前文档与外部资源的关系。该元素最常用于链接 CSS，此外也可以被用来创建站点图标（比如“favicon”样式图标和移动设备上用以显示在主屏幕的图标）。 |
<meta> | 表示那些不能由其它 HTML 元相关（meta-related）元素表示的元数据信息。如：、、 |
<style> | 包含文档或者文档部分内容的样式信息，它们会被应用于包含此元素的文档。 |
<title> | 定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。 |
