HTML 头部

HTML 头部

在 HTML 布局的文章中,我已经提到过网页主要的结构就两部分,一个是 head 部分,一个是 body 部分。这里 head 部分包含的并不是人类可读的信息,话句话说,在 head 部分的内容,网站一般是不会显示出来的,所有显示的内容一般都放在 body 部分。

head 部分是给机器读的,body 部分是给人类读的。head 部分主要包含了一些元数据信息,包括不限于网站的标题、页面样式、字符集、脚本数据、SEO 引导等等。

head 内部经常使用的标签如下:<title><base><link><style><meta><script><noscript> 等等。

title 元素

title 元素用来定义文档的标题,这个标题并不是网站页面上显示的标题。该元素被放在 head 元素内部,并且一个文档只拥有一个 title 元素,title 元素内部不能嵌套任何其它的标签,只能是纯文本内容。

该元素的内容最终会显示在下面几个地方:

  • 在浏览器的标题栏或者任务栏。
  • 收藏页面时或者添加书签时提供的标题。
  • 在搜索引擎结果中显示的标题。

下面是使用的案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>A simple HTML document</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

虽然 HTML 对标题的长度没有什么要求,但是标题的好坏可能会影响网站 SEO 的效果,所以标题的规范最好参考搜索引擎的规范名命。

base 元素

base 元素主要用于文档中链接的定位。base 提供基准 URL 地址,文档的后续链接都是以该基准链接为基础。例如:

<head>
	<base href="https://www.example.com/">
</head>
<body>
	<a href="#anchor">Anker</a>
</body>

<a> 标签最终指向的位置是:https://example.com/#anchor。该元素每个文档只能定义一个,并且必须出现在任何引用外部资源的元素之前。如果存在多个,则会遵循首次的声明内容。如果没有设置 base 元素,则页面相对链接基于 location.href 的值。

link 元素主要用于指定当前文档和外部文档之间的关系。最常用的是使用 link 元素引入外部样式表,除此之外也可以设置站点图表样式等等。

link 元素可以包含多个,例如下面的代码:

<link href="main.css" rel="stylesheet">
<link rel="icon" href="favicon.ico">

第一行用于指定页面样式,浏览器看到这一行会主动加载 main.css 文件,并将文件中的样式应用在该页面上。第二行用于指定网站的图标,该图标会显示在浏览器的标题栏、状态栏以及收藏栏中。

style 元素

style 元素主要是用于书写当前网页的 CSS 样式表,但是因为不能复用,所以并不是很推荐。使用 style 元素设置的样式表的优先级高于外部引用的 CSS 样式,所以你可以通过该方式覆盖掉外部引入的样式效果。

一个简单使用案例:

<!doctype html>
<html>
<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p>This is my paragraph.</p>
</body>
</html>

meta 元素

meta 元素用于提供 HTML 文档的元数据。元数据是一组数据,用于提供一些额外的描述信息。例如下面这个例子,描述了文档的作者信息:

<head>
    <title>Specifying Metadata</title>
    <meta charset="utf-8">
    <meta name="author" content="John Smith">
</head>

更多相关的信息,我们单独会专门抽出一个章节来讲解。

script/noscript 元素

script 元素用于引入当前页面的脚本信息,你可以通过该元素引入外部脚本文件,也可以直接将脚本代码放到该元素内部:

<script src="javascript.js"></script>

<script>
  alert("Hello World!");
</script>

不过这里有个问题,假如浏览器禁用或者不支持脚本语言怎么办?

为了解决这种状况,浏览器又引入了一个 noscript 元素,该元素的内容会在不支持脚本解析的浏览器上显示,如果脚本解析没有被禁用,那么 noscript 元素包含的内容不会被解析。

大佬,给点反馈?

平均评分 / 5. 投票数:

很抱歉,这篇文章不能帮助到你

请让我们改进这篇文章

告诉我们我们如何改善这篇文章?

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top