HTML 知识量：9 - 26 - 70
title 标签的主要用途包括：
定义网页标题：在浏览器的标签页上，会看到当前正在查看的网页的标题，这就是由 title 标签定义的。
搜索引擎优化 (SEO)：搜索引擎如 Google 会使用 title 标签的内容来理解网页的主题和内容。因此，编写一个准确和描述性的 title 标签对于网站的搜索引擎优化至关重要。
浏览器书签和历史记录：在浏览器中保存一个网页作为书签，或者在历史记录中查找一个网页时，title 标签的内容会显示出来，帮助用户识别网页。
社交媒体分享：在社交媒体上分享一个网页时，title 标签的内容通常会作为分享内容的标题显示。
可访问性：对于使用屏幕阅读器等辅助技术的用户来说，title 标签的内容通常会被读出，以帮助理解当前页面的内容。
下面是一个简单的 HTML 文档示例，其中包含了 <title> 标签：
<!DOCTYPE html> <html> <head> <title>我的网页标题</title> </head> <body> <h1>欢迎来到我的网页！</h1> <p>这是一个示例网页，用于展示 <title> 标签的用法。</p> </body> </html>
在这个示例中，<title> 标签内的内容是 "我的网页标题"，这就是在浏览器中打开这个网页时会在标签页上看到的标题。同时，这个标题也会用于搜索引擎优化、浏览器书签和历史记录等场景。
<meta> 标签位于 <head> 部分内，用于提供有关 HTML 文档的元数据。与 <title> 标签不同，<meta> 标签不会直接显示在页面上，但是对于浏览器、搜索引擎和其他 web 服务来说，这些元数据是非常重要的。
<meta> 标签通常用于以下几种情况：
字符集声明：通过 <meta charset="UTF-8">，可以告诉浏览器该页面使用的字符编码是 UTF-8。这有助于浏览器正确解析和显示页面内容，特别是包含特殊字符或多种语言的内容。
页面描述和关键词：通过 name 属性，可以为页面提供描述（description）和关键词（keywords）。这些信息通常不会直接显示在页面上，但会被搜索引擎用来了解页面的内容和主题，从而优化搜索结果。
页面刷新：通过 http-equiv 属性设置为 refresh，可以告诉浏览器在指定的时间间隔后刷新页面。例如，<meta http-equiv="refresh" content="30"> 会让页面每 30 秒刷新一次。
浏览器缓存控制：通过设置 http-equiv 属性为 cache-control 或 expires，可以控制浏览器如何缓存页面。这有助于优化页面加载速度和用户体验。
视口设置：在移动端开发中，<meta name="viewport" content="width=device-width, initial-scale=1.0"> 用于设置视口的宽度和初始缩放级别，确保页面在移动设备上正确显示。
下面是一个包含多个 <meta> 标签的示例：
<!DOCTYPE html> <html> <head> <title>我的网页标题</title> <meta charset="UTF-8"> <meta name="description" content="这是一个示例网页的描述"> <meta name="keywords" content="示例, 网页, HTML, meta标签"> <meta http-equiv="refresh" content="30"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>欢迎来到我的网页！</h1> <p>这是一个示例网页，用于展示 meta 标签的用法。</p> </body> </html>
在这个示例中，使用了多个 <meta> 标签来提供关于页面的不同元数据信息。这些信息虽然不会直接显示在页面上，但对于搜索引擎优化、用户体验和页面功能来说都是非常重要的。
<style> 标签在 HTML 中用于定义内部样式表，它包含了 CSS（Cascading Style Sheets，层叠样式表）规则，这些规则描述了如何显示 HTML 文档中的元素。与 <title> 和 <meta> 标签不同，<style> 标签的内容会直接影响页面在浏览器中的呈现方式。
<style> 标签通常位于 HTML 文档的 <head> 部分内，这样浏览器在解析页面时就能立即应用这些样式。不过，根据 HTML5 的规范，<style> 标签也可以放在 <body> 部分的开始处，这样可以让页面内容先加载，样式后应用，从而避免页面在样式加载完成之前出现样式闪烁的问题。
在 <style> 标签内部，可以编写 CSS 规则来定义元素的样式。这些规则包括选择器（选择需要应用样式的 HTML 元素）和声明块（包含一条或多条 CSS 声明，每条声明都包含一个属性和一个值）。
下面是一个包含 <style> 标签的 HTML 文档示例：
<!DOCTYPE html>
<html>
<head>
<title>我的网页标题</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-size: 20px;
}
</style>
</head>
<body>
<h1>欢迎来到我的网页！</h1>
<p>这是一个示例网页，用于展示 style 标签的用法。</p>
</body>
</html>在这个示例中，<style> 标签内定义了三个 CSS 规则：
body ：选择器设置了页面背景色为浅蓝色。
h1 ：选择器设置了标题文字颜色为白色，并且居中对齐。
p ：选择器设置了段落文字的字体大小为 20 像素。
<script> 标签在 HTML 中用于嵌入或引用 JavaScript 代码。JavaScript 是一种脚本语言，通常用于为网页添加交互性和动态功能。<script> 标签可以放在 HTML 文档的 <head> 或 <body> 部分中，也可以将它们放在 <body> 的底部（紧挨着关闭的 </body> 标签），因为这有助于确保在脚本执行之前页面的其余部分已经完全加载。
<script> 标签有几种使用方式：
1. 内联脚本：直接在 <script> 标签内部编写 JavaScript 代码。
<script>
// 在这里编写 JavaScript 代码
function sayHello() {
alert("Hello, World!");
}
</script>2. 外部脚本：使用 src 属性引用外部的 JavaScript 文件。
<script src="script.js"></script>
在这个例子中，script.js 是包含 JavaScript 代码的外部文件。当浏览器解析到这个 <script> 标签时，它会去下载并执行这个文件中的代码。
3. 异步和延迟执行：通过 async 和 defer 属性控制脚本的加载和执行方式。
async：表示脚本将异步地执行，这意味着它不会阻塞页面的解析，但当脚本下载完成后会立即执行，可能会打断页面的渲染。
<script async src="script.js"></script>
defer：表示脚本将被延迟到文档解析完成之后，但在 DOMContentLoaded 事件之前执行。这对于需要等到文档完全解析后才能正确运行的脚本很有用。
<script defer src="script.js"></script>
4. 内联事件处理程序：虽然不推荐使用（因为不利于内容与行为的分离），但 <script> 标签有时也用于直接在 HTML 元素中定义事件处理程序。
<button onclick="sayHello()">点击我</button>
<script>
function sayHello() {
alert("Hello, button!");
}
</script>在这个例子中，当按钮被点击时，会触发 sayHello 函数。
5. 类型属性：虽然在现代浏览器中不再是必需的（因为默认类型就是 text/javascript），但 <script> 标签过去常常包含一个 type 属性来指定脚本的类型。
<script type="text/javascript"> // JavaScript 代码 </script>
在 HTML5 中，这个属性对于 JavaScript 脚本来说是不必要的，因为 "application/javascript" 已经是默认值了。
<link> 标签是 HTML 中用于建立与外部资源关系的标签，最常见的用途是链接到外部样式表（CSS 文件）。这个标签放置在 HTML 文档的 <head> 部分内。
<link> 标签的基本语法如下：
<link rel="stylesheet" href="style.css" type="text/css">
在这个例子中：
rel 属性定义了当前文档与被链接文档之间的关系，stylesheet 表示被链接的文档是一个样式表。
href 属性指定了需要加载的外部资源（在这个例子中是 CSS 文件）的地址。
type 属性规定了被链接文档的 MIME 类型，对于 CSS 文件来说，通常是 text/css。
<link> 标签还可以用于链接到网站的图标（favicon），这通常是通过在 <head> 部分内添加如下代码来实现的：
<link rel="icon" href="favicon.ico" type="image/x-icon">
这里，rel 属性的值为 icon，表明链接的资源是网站的图标；href 属性则指向了图标文件（favicon.ico）的位置。
注意：<link> 标签是一个空元素，它只包含属性，不包含任何内容。此外，它只能出现在 <head> 部分内，并且可以出现任意次。
Copyright © 2017-Now pnotes.cn. All Rights Reserved.
编程学习笔记 保留所有权利
MARK:3.0.0.20240214.P35
From 2017.2.6