<head>标签详解
在页面加载完成的时候,标签head里的内容,是不会在页面中显示出来的。它包含了像页面的<title>
(标题) ,CSS(如果你选择用 CSS 来为 HTML 内容添加样式),指向自定义图标的链接和其他的元数据(描述HTML的数据,比如,作者,和描述文档的重要关键词)。
什么是HTML头部
- HTML头部是包含在
<head>
元素里面的内容。不像<body>
元素的内容会显示在浏览器中,head里面的内容不会在浏览器中显示,它的作用是包含一些页面的元数据。
元数据:<title>
- 元素
<title>
是用来表示整个HTML文档标题的元数据(不是文档的内容)。 - 元素
<title>
也可以用在:当你尝试给某个网页添加书签,<title>
标签包裹的内容被作为建议的书签名。 - 元素
<title>
的内容也被用在搜索的结果中。
元数据:<meta>
元数据就是描述数据的数据,而HTML有一个“官方的”方式来为一个文档添加元数据 --> <meta>元素。
元素
<meta>
:可以指定当前文档中的字符编码。<!-- 这个元素简单的指定了文档的字符编码 —— 在这个文档中被允许使用的字符集。 --> <meta charset="utf-8">
- 元素
<meta>
:可以天啊及作者和描述
元素<meta>
包含了name
和content
特性:
+ `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 为网站提供了更丰富的元数据。
<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包含了样式表文件的路径:<link rel="stylesheet" href="my-css-file.css">
<script>
部分没必要非要放在文档头部;实际上,把它放在文档的尾部(在 </body>标签之前)是一个更好的选择,这样可以确保在加载脚本之前浏览器已经解析了HTML内容(如果脚本加载某个不存在的元素,浏览器会报错)。<!-- 注意: <script>元素看起来像一个空元素,但它并不是,因此需要一个结束标记。您还可以选择将脚本放入<script>元素中,而不是指向外部脚本文件。 --> <script src="my-js-file.js"></script>
为文档设置主语言
为你的站点设定语言, 这个可以通过添加lang属性到HTML开始标签中来实现
<html lang="en-US">
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。