标签到底能作些什么事情

时间 2020-08-12

标签标签到底作些什么事情繁體版

原文原文链接

<head>标签详解

在页面加载完成的时候，标签head里的内容，是不会在页面中显示出来的。它包含了像页面的 <title>(标题) ,CSS(若是你选择用 CSS 来为 HTML 内容添加样式)，指向自定义图标的连接和其余的元数据(描述HTML的数据，好比，做者，和描述文档的重要关键词)。

什么是HTML头部

HTML头部是包含在<head>元素里面的内容。不像<body>元素的内容会显示在浏览器中，head里面的内容不会在浏览器中显示，它的做用是包含一些页面的元数据。

元数据：<title>

元素<title>是用来表示整个HTML文档标题的元数据（不是文档的内容）。
元素<title>也能够用在：当你尝试给某个网页添加书签，<title>标签包裹的内容被做为建议的书签名。
元素<title>的内容也被用在搜索的结果中。

元数据：<meta>

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

元素<meta>：能够指定当前文档中的字符编码。css

<!-- 这个元素简单的指定了文档的字符编码 —— 在这个文档中被容许使用的字符集。 -->
<meta charset="utf-8">

元素<meta>：能够天啊及做者和描述

元素<meta>包含了name和content特性：html

+ `name`：制定了meta元素的类型；说明该元素包含了什么类型的信息。
+ `content`：指定了实际的元数据内容

```html
<!-- 指定做者在某些状况下是颇有用的：若是你须要联系页面的做者，问一些关于页面内容的问题。 
一些内容管理系统可以自动获取页面做者的信息，而后用于某些用途。 -->

<!-- 指定包含关于页面内容的关键字的页面内容的描述是颇有用的，
由于它可能或让你的页面在搜索引擎的相关的搜索出现得更多 
（这些行为术语上被称为 Search Engine Optimization, or SEO.） -->
<meta name="author" content="webxiang">
<meta name="description" content="A web developtor is learning HTML.">
```

其余类型的元数据之Facebook 编写的元数据协议 Open Graph Data 为网站提供了更丰富的元数据。web

<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">

其余类型的元数据之Twitter 还拥有本身的类型的专有元数据协议，当网站的 URL 显示在 twitter.com 上时，它具备类似的效果。浏览器
```
<meta name="twitter:title" content="Mozilla Developer Network">
```

增长自定义图标

为了进一步丰富你的网站设计，你能够在元数据中添加对自定义图标的引用，这些将在特定的场合中显示。

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

在HTML中应用CSS和JavaScript

现在，几乎全部网站都会使用 CSS 让网页更加美观，使用JavaScript让网页具备交互功能，好比视频播放器，地图，游戏以及更多功能。这些应用在网页中很常见，它们分别使用 <link>元素以及 <script> 元素。

<link>元素常常位于文档的头部。这个link元素有2个属性，rel="stylesheet"代表这是文档的样式表，而 href包含了样式表文件的路径：ide
```
<link rel="stylesheet" href="my-css-file.css">
```
<script>部分不必非要放在文档头部；实际上，把它放在文档的尾部（在 </body>标签以前）是一个更好的选择，这样能够确保在加载脚本以前浏览器已经解析了HTML内容（若是脚本加载某个不存在的元素，浏览器会报错）。网站
```

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

为文档设置主语言

为你的站点设定语言，这个能够经过添加lang属性到HTML开始标签中来实现

<html lang="en-US">