HTML - 头部 <head>元素_HTML 菜鸟教程

HTML <head>标签是 HTML 文档的一部分，用于包含有关文档的元信息，例如标题、字符编码、样式和脚本链接以及其他元数据。<head> 标签用于定义文档的标题。

HTML <head> 标签用作元数据的容器，并放置在 <html> 标签之后。元数据基本上是有关头部部分中存在的数据的数据。

<head>元素中提供的这些信息对于浏览器正确呈现页面以及搜索引擎和其他服务理解页面内容至关重要。不建议在标题标签中包含文档详细信息的其他部分。

HTML <head>元素

以下是文档标题中使用的常见标签。

元素	描述
<title>	用于表示网页标题。
<meta>	指定有关文档的元数据和其他重要信息。
<base>	对于 HTML 文档中的每个相对 URL，Base 标签都会定义一个绝对（基本）URL。
<style>	包含 HTML 文档的样式信息。
<link>	指定当前文档与外部资源之间的关系。
<script>	用于嵌入客户端脚本。

HTML <head>元素的示例

以下是一些示例，显示了 HTML 中不同<head>元素的用法。

<title> 标签指定 HTML 文档的标题

HTML <title> 标签用于指定 HTML 文档的标题。标题必须描述网页的内容，其格式应仅为文本。它出现在浏览器选项卡的标题栏中。

下面是一个示例，演示如何使用 <title> 标签为 HTML 文档提供标题。将此代码作为文件运行，以在浏览器选项卡顶部查看标题。

<!DOCTYPE html>
<html>

<head>
	 <title>HTML Title Tag Example</title>
</head>

<body>
	 <p>
			Save this code (.html) and run in your 
			browser to see title of the document
	 </p>
</body>

</html>

<meta> 标签为文档添加元数据

HTML <meta> 标签用于提供有关 HTML 文档的元数据。元数据只不过是有关网页的附加信息，包括页面到期时间、页面作者、关键字列表、页面描述等。此信息还用于搜索引擎优化。请记住，<meta> 标签指定的元数据不会显示在网页上，但它是机器可读的。

以下示例描述了 HTML 文档中 <meta> 标签的一些重要用法。

<!DOCTYPE html>
<html>

<head>
	 <!-- Provide list of keywords -->
	 <meta name="keywords" 
				 content="C, PHP, Perl, Python">

	 <!-- Provide description of the page -->
	 <meta name="description" 
				 content="HTML by qikepu.com">

	 <!-- Author information -->
	 <meta name="author" 
				 content="Qikepu Com">

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

	 <!-- Page refreshing delay -->
	 <meta http-equiv="refresh" 
				 content="30">

	 <!-- Setting expiry time for page-->
	 <meta http-equiv="expires" 
				 content="Wed, 21 June 2006 14:25:27 GMT">

	 <!-- Prevent bots from indexing page -->
	 <meta name="robots" 
				 content="noindex, nofollow">
</head>

<body>
	 <p>  
			Describing the use of HTML meta tag
	 </p>

</body>

</html>

<base> 标签设置 URL 的基址

HTML <base> 标签用于规定默认 URL 或默认目标。这意味着在查找给定项目时，所有其他 URL 都将连接到基本 URL 中。我们只允许在 HTML 文档中使用一个基本元素。<base> 标签最常用的属性是 href 和 target。

在此示例中，在给定的 URL 前面加上基本 URL“http://www.qikepu.com/”目录后，将搜索所有给定的页面和图像。

<!DOCTYPE html>
<html>

<head>
	 <title>HTML Base Tag Example</title>
	 <base href = "https://www.qikepu.com" />
</head>

<body>
	 <img src="/images/logo.png" 
				alt="Logo Image"/>
	 <br> <br>

	 <a href="/html/index.htm" 
			title="HTML 七教程"/>
				 HTML 教程
	 </a>
	 <br> <br>

	 <a href="/css/index.htm" 
			title="CSS 七科普"/>
				 CSS 教程
	 </a>

	 <p>
			Instead of using full url, we reduced it 
			to "html/index.htm" because we mentioned 
			base url as "www.qikepu.com"
	 </p>
</body>

</html>

<link> 标签将外部资源链接到 HTML 文档

在 HTML 中，<link> 标签用于指定当前网页与另一个外部资源之间的关系。外部资源的来源位于 href 属性中。<link> 标签的其他属性包括 rel、type 和 media。最常见的用途是将样式表嵌入到 HTML 文档中。

下面是一个示例，用于链接 Web 根目录中 CSS 子目录中可用的外部样式表文件。

<!DOCTYPE html>
<html>

<head>
	 <title>HTML link Tag Example</title>
	 <link rel="stylesheet" 
				 type="text/css" 
				 href="/css/style.css">
</head>

<body>
	<p>
			This is an example of linking stylesheet 
			to the current HTML document.
	 </p>
</body>

</html>

<style> 标签向 HTML 文档添加样式

HTML <style> 标签用于指定整个 HTML 文档或特定元素的样式。它最常见的属性是标题和媒体。

在下面的示例中，我们将看到 <p> 标签和 <div> 标签的不同样式方法。

<!DOCTYPE html>
<html>

<head>
	 <style>
			/*Styles to every tags*/
			*{
				 margin: 0px;
				 padding: 10px;
			}  
		  
			/*Style only applied to Body tag*/
			body{
				 background-color: lightblue;
			}

			/*Styles applied to all div tags*/
			div{
				 background-color: coral;
				 border:5px solid;
			}

			/*Styles applied to 'myclass' class*/
			.myclass{
				 border:5px solid;
			}
		  
			/*Styles only applied to 'myid' id*/
			#myid{
				 height:40px;
			}
	 </style>
</head>

<body>
	 <div></div>
	 
	 <br>
	 <p class="myclass">
			Hello, World!
	 </p>

	 <br>
	 <p class="myclass">
			Hello, World!
	 </p>

	 <br>
	 <div id="myid">
			Height = 40 px
	 </div>
	 
</body>

</html>

注意：要了解级联样式表的工作原理，请查看我们的免费 CSS 教程。

HTML 中的客户端<script>标签示例

HTML <script> 标签用于包含外部脚本文件或定义 HTML 文档的内部脚本。该脚本是执行某些操作的可执行代码。

下面是一个示例，我们使用 script 标签来定义一个简单的 JavaScript 函数。当用户单击该按钮时，将弹出一个警报框，其中包含 Hello， World 消息。

<!DOCTYPE html>
<html>

<head>
	 <script type="text/JavaScript">
			function Hello(){
				 alert("Hello, World");
			}
	 </script>
</head>

<body>
	 <br>
	 <input type="button" 
					onclick="Hello();" 
					value="Click Me"  />

</body>

</html>

注意：要了解 JavaScript 的工作原理，请查看我们的免费 JavaScript 教程。

<< HTML - 嵌入多媒体 HTML - 网站图标（Favicon图标） >>