HTML 教程之 HTML 头部与文件路径

  Web Site16 minutes read (About 2467 words)

HTML 中的 Head 头部元素以及外部文件引用路径。

HTML Head 头部

HTML Head 头部元素包含了所有的头部标签元素，用于定义文档相关的概要信息，例如：HTML 文档的元数据（Meta）、以及所需资源的引用（CSS && Javascript），对文档能够在浏览器中正确显示起到了非常重要的作用。

<head> 头部元素区域可添加的元素标签为: <title> && <base> && <style> && <meta> && <link> && <script> && <noscript>。

下面分别来看如何使用：

Title

Title 元素在 HTML/XHTML 文档中是必须的，用于定义 HTML 文档的标题。<title> 标签仅允许存在一个，其内容仅允许包含纯文本内容，不能包含其它 HTML 标签。

Title 元素定义的 HTML 文档标题显示于：浏览器标题栏（标签栏）、当将页面添加到收藏夹（书签）时提供标题、显示在搜索引擎结果页面的标题。

Title 元素使用：

1
2
3
4
<head>
    <meta charset="utf-8" />
    <title>HTML 演示</title>
</head>

Base

Base 元素用来定义一个链接地址，作为当前 HTML 文档中所有相对链接的基本链接。

设置了基本链接后，当前页面中的所有相对链接都会使用这个基本链接作为前缀。如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>HTML 演示</title>
        <base href="https://www.orangeshare.cn/" />
    </head>
    <body>
        <ul>
            <li><a href="index.html">Home Page</a></li>
            <li><a href="categories/index.html">Blog Categories</a></li>
        </ul>
    </body>
</html>

上面示例中，第一个 li 中链接会被解析为：https://www.orangeshare.cn/index.html；第二个 li 中链接会被解析为：https://www.orangeshare.cn/categories/index.html。

需要注意的是，HTML 文档中的 <base> 标签必须出现在任何引用外部资源的标签之前，而且一个 HTML 文档中仅允许定义一个 <base> 标签。

Link 元素用于定义文档中对外部资源的引用，常用于引入外部的 CSS 样式表或 Javascript 脚本。

Head 元素中可以包含任意数量的 <link> 标签。<link> 标签中包含两个主要的属性，分别是 rel 和 href。

rel 属性用来指示引用文件的类型，href 属性用来设置外部文件的路径。示例代码如下：

1
2
3
<head>
    <link rel="stylesheet" href="style.css" type="" />    
</head>

还有一个常见的属性：type，定义被链接文档/资源的 MIME （媒体）类型。只有当设置了 href 属性时，才能使用该属性其属性值是 MIME_type 的，支持如下媒体类型：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
text/plain
text/html
text/css
image/jpeg
image/png
audio/mpeg
audio/ogg
audio/*
video/mp4
application/*
application/json
application/javascript
application/ecmascript
application/octet-stream
…

Style

前面提到过，<style> 标签用于在 HTML 文档中嵌入 CSS 样式，属于内部样式表。

1
2
3
4
5
6
<head>        
    <style>
    body {background-color:yellow}
    p {color:blue}
    </style>
</head>

Meta

Meta 元素用于定义有关 HTML 文档的元数据，元素据不会显示在页面上，但是对于机器是可读的（可解析的），例如：页面描述、关键词、文档的作者、最后修改时间以及其它。

[1] >>> 定义字符集

HTML 5 中，新增了一个 charset 属性，使得 HTML 文档字符集定义更容易了，可用来解决文档编码问题。

HTML 4.01 中符集定义：

1
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

HTML 5 中符集定义：

1
<meta charset="UTF-8" />

[2] >>> 定义页面描述 && 文档关键词 && 页面作者

需要 name && content 属性搭配使用。其中 name 用来表示定义的是什么元数据，其值包括：author && description && keywords && application-name && generator；其具体值通过关联 content 属性值获得。

也就是说，你定义了一个页面作者 name=author 的元数据，页面作者要通过关联 content=John 获得，为 John。

实例 1 - 定义文档关键词，用于搜索引擎：

1
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />

实例 2 - 定义 Web 页面描述：

1
<meta name="description" content="Free Web tutorials on HTML and CSS" />

实例 3 - 定义页面作者：

1
<meta name="author" content="Hege Refsnes" />

[3] >>> http-equiv 属性

上面提到过，HTML 4.01 中 http-equiv 是规定 HTML 文档的字符集的唯一方式：

1
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

http-equiv 相当于 HTTP 的头文件，向浏览器传递有用的信息。并且类似于上面的 name 属性，需要搭配 content 属性使用。

http-equiv 支持定义的页面元数据如下：

  • content-type：规定文档的字符编码；
  • default-style：规定要使用的预定义的样式表，其对应的 content 属性的值必须匹配同一文档中的一个 link 元素上的 title 属性的值，或者必须匹配同一文档中的一个 style 元素上的 title 属性的值；
  • refresh：定义文档自动刷新的时间间隔（慎重使用，会使得页面不受用户控制）。

示例如下：

1
2
3
4
5
6
7
8
<!-- HTML 4.0.1 中定义字符集 -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<!-- 规定要使用的预定义的样式表 -->
<meta http-equiv="default-style" content="the document's preferred stylesheet" />

<!-- 每 30s 自动刷新页面 -->
<meta http-equiv="refresh" content="30" />

content 属性定义与 http-equiv 或 name 属性相关的元信息，其属性值是文本类型（text）的。需要搭配 http-equiv 或 name 属性使用，是一个辅助属性。

Script

<script> 标签用于定义 JavaScript 脚本，示例代码如下：

1
2
3
4
5
<head>
    <script>
        document.write("Meet JavaScript")
    </script>
</head>

具体可学习网络上的 JavaScript 教程，这里了解就好。

Noscript

当用户的浏览器不支持 JavaScript 脚本或者禁用 JavaScript 脚本时，可以在 <noscript> 标签中定义一些内容来替代不能运行的 JavaScript 脚本或者给用户一些提示。

除了 <script> 标签外，在 <noscript> 标签中可以包含任何 HTML 元素，如下例所示：

1
2
3
4
5
6
7
8
<head>
    <script>
        document.write("Meet JavaScript")
    </script>
    <noscript>
        <p>当前浏览器不支持 JavaScript，或者您禁用了 JavaScript！</p>
    </noscript>
</head>

HTML Lang=zh-CN

根据 W3C 推荐标准，您应该通过 <html> 标签中的 lang 属性对每张页面中的主要语言进行声明，这对搜索引擎和浏览器是有帮助的:

比如声明网页主要语言为英文：

1
2
3
<html lang="en">
...
</html>

在 XHTML 中，采用如下方式在 标签中对语言进行声明：

1
2
3
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
...
</html>

关于各国语言缩略词可参考 >>> ISO 639-1 语言代码。

你可以尝试一下，如果你在中国，本地浏览器的默认语言是中文，当我们打开一个外国网站（en）时，浏览器会提示 “是否将网页内容翻译成中文”？。登录几个中国的本土网站（zh-CN），发现源码中并没有写 lang 属性，也没有翻译的提示，默认中文。

浏览器会将读取到的页面语言和本地语言进行比较判断，如果一致，不做处理，否则提示是否需要翻译（当然前提是用户勾选了这个功能，Chrome 默认勾选）。

HTML5 中, lang 属性可用于任何的 HTML 元素 (它会验证任何 HTML 元素。但不一定是有用)。HTML 4.01 中, lang 属性不能用于: <base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param>, <script> 等。

HTML 文件路径

文件路径用于定义，网站文件夹结构中（WEB 服务器上）某个文件的位置。

文件路径会在链接外部文件时被用到：

  • 网页
  • 图像
  • 样式表
  • JavaScript

下面以图像的绝对路径和相对路径进行说明，其它网络资源文件同理：

绝对文件路径

绝对路径好理解，就是图片在计算机中的完整存储路径，例如 E:/HTMLDemo/images/kawayi.jpg。

而对于网络图片资源而言，绝对路径就是万维网中图片的完整 URL。例如：https://www.domain.com/images/kawayi.jpg。

相对文件路径

而相对路径是指，图片相对于当前 HTML 网页文档的路径。

先以本地计算机中图片为例：

假设，图片资源和 HTML 文档位于同一文件夹下，你可以通过如下代码使用图片：

1
<img src="kawayi.jpg">

假设，图片资源位于 HTML 文档的上一级目录中，你可以通过如下代码使用图片：

1
<img src="../kawayi.jpg">

同理，上上级就是 ../../kawayi.jpg，同级 images 目录下就是 images/kawayi.jpg（相当于下级目录）。

需要注意的是，并不是只有本地图片资源才可以使用相对路径！！！

前面提到过，网站可以看作是一个绑定了特定域名的顶级目录，该目录（网站文件夹结构）位于提供 Web 服务的远程服务器上，故该网站中的网页可以访问到该顶级目录下的资源（图片、文件等）。

故，当你有了一个自己的 Web 站点之后，你在 Web 站点中的网页中插入图片时，也可以使用相对路径的定义方法。

推荐方案

如果可能的话，使用文件的相对路径是个好习惯。

相对路径优势 >>>

如果使用了相对路径，那么你的网页就不会与当前的基准 URL 进行绑定，避免网页上传至服务器后需要重新修改相关资源文件的路径（路径失效）。

这也就意味着，相对路径的定义方法降低和本地环境的关联性，所有文件路径在你的本地电脑上 (localhost >>> 本地开发) 或未来的公共域（WEB Server >>> 产品发布）中均可正常工作。

如果你想深入了解 URL 的内容，可以参考博文系列中 >>> 网站基础之 URL 全结构解析 一文。

HTML 教程之 HTML 头部与文件路径

https://www.orangeshare.cn/2019/01/03/html-jiao-cheng-zhi-html-tou-bu-yu-wen-jian-lu-jing/

Author

Waldeinsamkeit

Posted on

2019-01-03

Updated on

2022-12-13

Licensed under

#
You need to set install_url to use ShareThis. Please set it in _config.yml.

Like this article? Support the author with

Comments

You forgot to set the shortname for Disqus. Please set it in _config.yml.

Catalogue

×