“头”里有什么——HTML 元信息

2025/3/28

向全栈工程师迈进！

一、看基本HTML

html 复制代码

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>我的测试页面</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>

整体主要包含head元素，body元素。在head元素中，其里面的内容是不会在浏览器中显示，他的作用就是保存页面的一些元数据。

1.1"头里"可添加title 元素

title 中的内容会被显示在网页的上方，如上面的看基本HTML代码中，其就会显示为"我的测试页面"

1.2 "头里"可添加Meta 元素

元数据是描述数据的数据 ，而 HTML 有一个"官方的"方式来为一个文档添加元数据------<meta> 元素。

html 复制代码

<meta charset="utf-8" />

指定数据使用 utf-8 通用的字符集。

当然meta元素也可以这样使用

html 复制代码

<meta name="author" content="cg5017"/>
<meta
  name="description"
  content="这个网页告诉我们要好好学习，天天向上"/>

1.3 "头里"可在你的网站增加自定义图标

为了进一步丰富网站设计，可以在元数据中添加对自定义图标的引用 ，它们会在某些场景下显示。最常见的用例为 favicon（为"favorites icon"的缩写，在浏览器的"收藏夹"及"书签"列表中显示）。

html 复制代码

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

<%= BASE_URL %>是一个模板语法占位符，在前端项目构建时会被实际的基础 URL 所替换。

几乎现在所使用的所有网站都会使用CSS来让网页更加炫酷，并使用JavaScript来让网页有交互功能，比如视频播放器、地图、游戏以及更多功能。这些应用在网页中很常见，它们分别使用<link>元素以及<Script>元素。

1.4 "头里"可在HTML中应用CSS和JavaScript

1.4.1 link 元素引入CSS

html 复制代码

<link rel="stylesheet" href="my-css-file.css" />

href是包含了样式表文件路径 rel = "stylesheet" 表明这是文档的样式表。

1.4.2 script 元素引入JavaScript

html 复制代码

<script src="my-js-file.js" defer></script>

包含 src 属性来指向需要加载的 JavaScript 文件路径，同时最好加上**defer 以告诉浏览器在解析完成 HTML 后再加载 JavaScript。**这样可以确保在加载脚本之前浏览器已经解析了所有的 HTML 内容。这样就不会因为 JavaScript 试图访问页面上不存在的 HTML 元素而产生错误。

1.5 为文档设置主语言 lang 属性

html 复制代码

<html lang="zh-CN">
  ...
</html>

在html文件中设置 lang="zh-CN" 表明整个网页的主要语言为中文，设置相应的lang属性是非常重要的，对于那些使用屏幕阅读器的视障人士也很有用（例如，法语和英语中都有"six"这个单词，但是发音却完全不同）。所以在书写某些内容的是，可以在标签内部加上lang属性。

山高路远，慢慢走

别慌，别慌，别慌.........