减小字体
增大字体- ·上一篇内容：HTML 全局属性
- ·下一篇内容：HTML 网站收藏图标
HTML 头部
HTML <head> 元素
在HTML文档中，位于<head>和</head>标签之间定义网页的标题，元数据，样式以及脚本等信息。
在HTML文档的头部区域可以使用的元素标签有<title>、<meta>、<style>、<script>、<link>、<base>和<noscript>。
HTML 头部元素
| 标签 | 描述 |
|---|---|
| <head> | 定义HTML文档的一些信息，如元数据，标题等。 |
| <base> | 为当前网页定义默认地址或默认目标。 |
| <link> | 定义文档与外部资源之间的关系，如链接CSS文件。 |
| <meta> | 定义HTML文档的一些元数据，如关键字，描述，作者等。 |
| <noscript> | 当用户浏览器不支持或禁用了客户端脚本时给出可替代的内容信息。 |
| <script> | 定义或引入外部客户端脚本。 |
| <style> | 定义网页的样式信息。 |
| <title> | 定义HTML文档的标题。 |
HTML <title> 元素
在HTML <head>部分使用<title>元素为当前网页定义一个标题。
所有的网页都应该有一个标题，而且只能定义一个标题。
HTML <title> 元素的主要作用有：
（1）当使用浏览器浏览该网页时，网页的标题显示在浏览器的标题栏或网页的标签中。
（2）当用户把该网页添加到收藏夹时，该标题将显示在收藏夹中。
（3）使用搜索引擎搜索到当前网页时，<title>中定义的标题将显示在搜索引擎的搜索结果中。
下面是一个HTML文档中<title>元素使用的例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这是我的一个网页</title>
</head>
<body>
<h1>内容一级标题</h1>
<p>这是段落：翔宇亭IT乐园的网址是：http://www.biye5u.com.</p>
<p>这是另外一个段落：翔宇亭IT乐园提供精心准备的内容。</p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>这是我的一个网页</title>
</head>
<body>
<h1>内容一级标题</h1>
<p>这是段落：翔宇亭IT乐园的网址是：http://www.biye5u.com.</p>
<p>这是另外一个段落：翔宇亭IT乐园提供精心准备的内容。</p>
</body>
</html>
HTML <meta> 元素
HTML <meta> 元素用于描述网页中的一些元数据。
<meta>元素中的元数据不会显示给用户，但会被浏览器、搜索引擎或其他应用所解析。
<meta>元素常用于定义网页的编码类型、关键词、网页内容描述、网页创建时间、网页修改时间、内容作者以及用于社交网络转载时的信息说明、信息验证以及索索引擎如何处理网页中的内容等。
HTML <meta> 使用举例
（1）为网页指定字符编码类型
<meta
charset="utf-8">
（2）为网页指定关键词
<meta
name="keywords"
content="HTML 教程, HTML, HTML meta">
（3）为网页添加描述内容
<meta
name="description"
content="HTML基础教程与实例">
（4）指定网页的作者
<meta
name="author"
content="biye5u.com">
（5）指定网页的版权
<meta
name="copyright"
content="翔宇亭IT乐园">
（6）指定网页每10秒钟刷新一次
<meta
http-equiv="refresh"
content="10">
（7）指定网页10秒后跳转到另外一页
<meta
http-equiv="refresh"
content="10; url=http://www.biye5u.com/">
（8）指定谷歌搜索引擎可以索引，追踪当前网页的链接
<meta
name="googlebot" content="index,follow">
（9）指定浏览器不缓存当前网页
<meta
http-equiv="Cache-Control"
content="no-cache">
HTML <link> 元素
HTML <link> 元素允许我们在当前文档中链接文档外部的其他资源，如CSS文件。
HTML <link>元素通常有href属性、rel属性和type属性。
href属性用于给出外部资源的地址；
rel属性用于给出当前文档与链接资源的关系，一般有一个或多个关键字构成，如stylesheet，icon等；
type属性用于给出被链接资源的类型，如text/css。
HTML <link> 使用例子
（1）链接CSS文件
<link
href="styles.css"
rel="stylesheet"
type="text/css">
上面这个例子中，href表明styles.css文件与包含该代码的文档在同一目录下。
（2）指定网站收藏图标
<link
rel="shortcut icon"
href="/favicon.ico"
type="image/x-icon">
在这个例子中，href给出网站收藏图片的地址为网站的根目录。
HTML <style> 元素
HTML <style> 元素用于定义当前HTML 文档的样式。
<style>
body {background-color: darkblue;}
h1 {color: gray;}
p {color: white;}
</style>
body {background-color: darkblue;}
h1 {color: gray;}
p {color: white;}
</style>
则在该文档中，网页的背景色为深蓝色，H1标题的颜色为灰色，段落文本的颜色为白色。
HTML <script> 元素
HTML <script> 元素用于引入外部客户端脚本或定义客户端脚本，如javascript.
（1）引入外部脚本
引入外部脚本时，需要使用<script>元素的src属性。
src属性给出外部脚本的地址。
<script
src="js/jquery.3.5.min.js"></script>
（2）定义脚本
<script>
var a = 3;
var b = 4;
alert(a + b);
</script>
var a = 3;
var b = 4;
alert(a + b);
</script>
上面这个例子在当前文档中定义了两个变量，并使用alert()函数弹出一个消息框显示结果。关于Javascript的使用，读者可以参考本站中的Javascript教程。
HTML <base> 元素
HTML <base> 元素用于给出文档其他链接的根地址或目标地址。
HTML <base> 元素必须有href属性或target属性，或者两个都有。
HTML <base> 元素应位于所有链接的最前面。
在一个网页中，应只有一个<base>元素，否则除第1个之外，其余会被忽略。
<!DOCTYPE
html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<base href= "http://www.biye5u.com/other/" target="_blank">
</head>
<body>
<img src="img/HTML-tutorial.png" style="width:480px;height:260px;border:0" alt="HTML 教程">
<a href="example-6593.html">HTML base 演示</a>
</body>
</html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<base href= "http://www.biye5u.com/other/" target="_blank">
</head>
<body>
<img src="img/HTML-tutorial.png" style="width:480px;height:260px;border:0" alt="HTML 教程">
<a href="example-6593.html">HTML base 演示</a>
</body>
</html>
在这个例子中，不管该文件位于什么位置，有关图片和链接的根地址都是：http://www.biye5u.com/other/
用户点击这里预览效果。
HTML <noscript> 元素
当用户浏览器不支持客户端脚本或者用户禁用了客户端脚本时，使用<noscript>元素可以给出可替代的内容提示。
<script>
document.write("欢迎光临!");
</script>
<noscript>你的浏览器不支持或禁用了JavaScript!</noscript>
document.write("欢迎光临!");
</script>
<noscript>你的浏览器不支持或禁用了JavaScript!</noscript>
以上讲解了HTML 头部一些元素的相关知识，如有问题请留言。如需转载请注明出处：翔宇亭IT乐园（http://www.biye5u.com），并给出本文的链接地址：http://www.biye5u.com/article/HTML5/2023/6593.html。
微信搜索“优雅的代码”关注本站的公众号，或直接使用微信扫描下面二维码关注本站公众号，以获取最新内容。
个人成长离不开各位的关注，你的关注就是我继续前行的动力。
- 给好评 如果您觉得此内容好，就请您
100%(1) 
- 给差评 如果您觉得此内容差，就请您
0%(0) 