用于 head 部分的标签
本文说明了在头部部分使用的标签。
它解释了在head部分使用的标签，例如<link>、<script>和<style>。
YouTube Video
用于 head 部分的标签
<title> 标签
1<title>Document Title</title><title>标签定义了文档的标题。该标题显示在浏览器的标签页上，并在书签和搜索结果中使用。
<link> 标签
<link>标签用于将外部资源链接到当前文档。通常用于链接外部CSS文件，但也可以用于图标和其他外部资源。
<link> 标签的 rel 属性
rel属性用于指定在<link>标签中被链接的资源与当前文档之间的关系。rel属性有许多种值类型，但在这里我们将解释特别重要和常用的那些。
stylesheet
1<link rel="stylesheet" href="styles.css">stylesheet用于链接外部样式表。
icon
1<link rel="icon" href="favicon.ico" type="image/x-icon">rel="icon"定义了显示在浏览器标签页或书签中的图标。通过指定正确的favicon，可以增强网站的品牌和视觉识别。
preload
1<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">preload用于在页面渲染开始之前预先加载资源。对于时间重要的资源，如字体或大图像，尤其有用。这可以提高性能并增强用户体验。
canonical
1<link rel="canonical" href="https://example.com/page.html">canonical用于告知搜索引擎页面的规范版本。在内容重复的情况下，指明规范URL有助于从SEO的角度巩固搜索引擎排名，并确保内容被正确索引。
alternate
1<link rel="alternate" hreflang="en" href="https://example.com/en/">alternate用于向搜索引擎和浏览器指示不同语言或格式的页面。在多语言网站中，可以结合使用hreflang属性为每个语言版本指定URL，以向用户提供适当语言的页面。
manifest
1<link rel="manifest" href="/manifest.json">manifest为浏览器提供包含PWA（渐进式Web应用程序）配置信息的清单文件。该文件包含应用图标、主题颜色和显示模式等信息，有助于在移动设备上安装和运行PWA。
dns-prefetch
1<link rel="dns-prefetch" href="//example.com">- 引用外部资源时，提前执行域名的DNS解析可以提高页面加载速度。这在具有许多外部资源的页面或需要快速用户体验的情况下特别有效。
<style> 标签
1<style>
2 body {
3 font-family: Arial, sans-serif;
4 }
5</style><style>标签用于定义内部样式表。它用于将CSS样式应用于页面上的元素，允许您在不使用外部文件的情况下编写CSS。
<script> 标签
1<script>
2 console.log('Hello, World!');
3</script>
4<script src="script.js"></script><script>标签用于在HTML文档中嵌入JavaScript代码。您还可以链接外部JavaScript文件，以控制页面的动态行为。使用src属性指定脚本文件。
async 和 defer 属性
<script>标签支持两个属性：async和defer，它们会影响脚本的加载和执行时机。通常情况下，浏览器会依次处理脚本，但使用这些属性可以改善页面的性能和加载体验。
async 属性
1<script src="script.js" async></script>- 使用
async属性可以让脚本异步加载。浏览器会与其他资源并行加载该脚本，并在加载完成后立即执行。 async主要适用于独立脚本，并在脚本不依赖其他脚本或DOM的加载时使用。
defer 属性
1<script src="script.js" defer></script>- 使用
defer属性可以让脚本异步加载，但在HTML解析完成后执行。脚本的执行不会阻塞页面显示，从而提升用户体验。 defer在需要在DOM完全加载后执行脚本时很有效。例如，适用于希望脚本在页面的整体布局和元素加载完成后运行的情况。
CORS 政策和 crossorigin 属性
加载外部脚本时，可能会基于同源策略施加安全限制。在这种情况下，可以使用crossorigin属性允许资源共享。
1<script src="https://example.com/script.js" crossorigin="anonymous"></script>crossorigin属性可以设置为以下两个值：。
anonymous：发送请求时不包括凭据。use-credentials：发送请求时包括凭据。
type 属性
<script>标签可以使用type属性来指定脚本的类型。默认情况下使用JavaScript，但您也可以指定某些类型的脚本（例如模块类型的JavaScript或模板语言）。
JavaScript 模块
1<script type="module" src="module.js"></script>-
自ECMAScript 2015（ES6）以来，引入了JavaScript模块，可以将代码分隔到模块中，从而增强可重用性。通过指定
type="module"，可以将脚本视为一个模块。 -
可以使用
import和export将模块拆分为其他模块。
非 JavaScript 脚本
1<script type="application/ld+json">
2{
3 "@context": "https://schema.org",
4 "@type": "Organization",
5 "name": "Example Inc.",
6 "url": "https://www.example.com"
7}
8</script>- 除了JavaScript以外的脚本也可以在
<script>标签中指定。例如，在描述诸如JSON-LD的结构化数据时使用type="application/ld+json"。这里，JSON-LD是一种在网页上结构化数据的格式，使搜索引擎和其他应用程序能够更深入地理解数据。
使用 <script> 标签的注意事项
- 脚本顺序：脚本所依赖的库必须在依赖脚本之前加载。例如，使用jQuery的脚本必须在jQuery本身加载后再加载。
- 性能优化：为了避免影响页面加载速度，只在必要时加载脚本，并避免运行不必要的脚本。
- 安全措施：使用外部脚本时，确保它们从可信来源加载，以防嵌入恶意脚本。
<base> 标签
1<base href="https://example.com/"><base>标签为文档中的所有相对URL设置基准URL。href属性中指定的URL成为链接和图像中相对路径的基准。通常每个页面只使用一次。
<noscript> 标签
1<noscript>Your browser does not support JavaScript!</noscript><noscript>标签定义在浏览器中禁用JavaScript时显示的内容。它用于为不支持JavaScript的环境提供替代内容。
您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。