2、HTML入门——HTML元信息

[1. HTML头部](#1. HTML头部)
[2. 添加标题](#2. 添加标题)
[3. 元数据\<meta\>元素](#3. 元数据<meta>元素)
- [3.1 指定文档中的字符编码](#3.1 指定文档中的字符编码)
- [3.2 添加作者和描述](#3.2 添加作者和描述)
- - [3.2.1 搜索引擎中description的使用](#3.2.1 搜索引擎中description的使用)
- [3.3 其他类型的元数据(略过)](#3.3 其他类型的元数据(略过))
[4. 在你的站点增加自定义图标](#4. 在你的站点增加自定义图标)
[5. 在HTML中应用CSS和JavaScript](#5. 在HTML中应用CSS和JavaScript)
[6. 为文档设定主语言](#6. 为文档设定主语言)
参考
待了解

在页面加载完成的时候，HTML文档的头部是不会显示在web浏览器的。它包含了诸如页面的<title>、指向CSS的链接、指向自定义网页图标的链接和其他的元数据等信息。Web浏览器等使用文档头部的信息正确渲染HTML文档。

1. HTML头部

html 复制代码

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

HTML头部包含HTML<head>元素的内容，与<body>元素内容不同，页面在浏览器加载后它的内容不会在浏览器中显示，它的作用是保存页面的一些元数据。

&esmp;上述示例的头部非常简短。然而，大型页面的头部会相当大。

2. 添加标题

<title>元素，它可以为文档添加标题。但别和<h1>元素搞混了，<h1>是为body添加顶级标题的。

<h1>元素在页面加载完毕时显示在页面中，通常只出现一次，用来标记页面内容的标题。

<title>元素是一项元数据，用于表示整个HTML文档的标题。当网页被收藏的时候，<title>元素中的标题会显示。

3. 元数据<meta>元素

元数据就是描述数据的数据，而HTML有一个官方的方式来为一个文档添加元数据------<meta>元素。当然，其他在这篇文章中提到的东西也可以被当做元数据。有很多不同种类的<meta>元素可以被包含进你的页面的<head>元素。

3.1 指定文档中的字符编码

html 复制代码

<meta charset="utf-8" />

这个元素简单的指定了文档的字符编码------这个文档中被允许使用的字符集。utf-8是一个通用的字符集，它包含了任何人类语言中的大部分的字符，意味着该web页面可以显示任意的语言；所以对于你的每一个页面都使用这个设置会是一个好主意。

字符编码utf-8正常显示日文：

html 复制代码

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>&lt;title&gt; element</title>
</head>
<body>
<h1>&lt;h1&gt; element</h1>
<p>Japanese example: ご飯が熱い。</p>
</body>
</html>

将charset改为ISO-8859-1(拉丁字母表的字符集)，日文出现乱码：

3.2 添加作者和描述

许多<meta>元素包含了name和content属性：

name：指定了meta元素的类型；说明了该元素包含了什么类型的信息。

content：指定了实际的元数据内容。

这两个meta元素对于你定义你的页面的作者和提供页面的简要描述是很有用的：

html 复制代码

<meta name="author" content="Chris Mills" />
<meta
	name="description"
	content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications." />

指定作者在某些情况下是很有用的：如果你需要联系页面的作者，问一些关于页面内容的问题。一些内容管理系统能够自动获取页面作者的信息，然后用于某些用途。

指定一个包括与你的页面内容有关的关键词的描述是有用的，因为它有可能使你的页面在搜索引擎进行的相关搜索中出现得更多。

3.2.1 搜索引擎中description的使用

打开MDN Web Docs，按下F12，进入Web的控制台，点击上面的标签页中的元素，在<head>元素下面可以找到如下description：

在bing搜索中搜索MDN Web Docs中文：

3.3 其他类型的元数据(略过)

当你在网站上查看源码时，你也会发现其他类型的元数据。你在网站上看到的许多功能都是专有创作，旨在向某些网站提供可使用的特定信息。

4. 在你的站点增加自定义图标

为了进一步丰富你的网页设计，你可以在元数据中添加对自定义图标的引用，它们会在某些场景中显示。最常见的用例是favicon(favorites icon的缩写)。

这个不起眼的图标已经存在很多年了，16像素的方形图标是第一种类型。你可以看见这些图标出现在浏览器每一个打开的标签页中以及书签面板中的书签页面旁边。

页面添加网页图标的方式有：

1. 将其保存在与网站的索引页面相同的目录中，以.ico格式保存。

2. 将以下行添加到HTML的<head>块中以引用它：

html 复制代码

<link rel="icon" href="favicon.ico" type="image/x-icon" />

可以通过多个<link>元素，并为每个元素设置不同的<rel>属性值，来为不同的使用场景分别指定图标。

5. 在HTML中应用CSS和JavaScript

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

html 复制代码

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

html 复制代码

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

添加js脚本和css样式表后的html，js脚本和css样式表的文件名与html中一致就行：

html 复制代码

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Meta examples</title>

    <meta name="author" content="Chris Mills">
    <meta name="description" content="This is an example page to demonstrate usage of metadata on web pages.">

    <meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.png">
    <meta property="og:description" content="This is an example page to demonstrate usage of metadata on web pages.">
    <meta property="og:title" content="Metadata; The HTML &lt;head&gt;, on MDN">

    <link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon">
    <link href="learning.css" rel="stylesheet" type="text/css">
    <script src="learning.js"></script>
</head>
<body>
<h1>Meta examples</h1>

<p>Japanese example: ご飯が熱い。</p>
</body>
</html>

javascript 复制代码

const list = document.createElement('ul');
const info = document.createElement('p');
const html = document.querySelector('html');

info.textContent = 'Below is a dynamic list. Click anywhere on the page to add a new list item. Click an existing list item to change its text to something else.';

document.body.appendChild(info);
document.body.appendChild(list);

html.onclick = function() {
    const listItem = document.createElement('li');
    listItem.textContent = prompt('What content do you want the list item to have?');
    list.appendChild(listItem);

    listItem.onclick = function(e) {
        e.stopPropagation();
        this.textContent = prompt('Enter new content for your list item');
    }
}

css 复制代码

html {
    background-color: green;
    font-size: 20px;
}

ul {
    background: red;
    padding: 10px;
    border: 1px solid black;
}

li {
    margin-left: 20px;
}

然后安装nodejs，选择nodejs的包管理器来运行html文件。bun无需安装nodejs，直接bun run xxx.html：

上面的js脚本中在页面中添加了一个空列表。现在当你点击列表中的任何地方，浏览器都会弹出一个对话框要求你为新列表输入一些文本内容。当你点击OK按钮，刚刚这个新的列表项会添加到页面上；当你点击那些已有的列表项，会弹出一个对话框允许你修改列表项的文本。

CSS使页面背景变成了绿色，文本变得大了一点。它还将JavaScript添加到页面的一些内容进行了样式化。

6. 为文档设定主语言

可以为站点设置语言，这个可以通过添加lang属性到HTML开始的标签中来实现，如下所示：

html 复制代码

<html lang="zh-CN">

</html>

如果你的HTML文档的语言设置好了，那么你的HTML文档就会被搜索引擎更有效地索引，对于那些使用屏幕阅读器的视障人士也很用。

还可以将文档的分段设置为不同的语言：

html 复制代码

<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>

参考

1、HTML元信息

待了解

1、搜索引擎优化