HTML <head> 元素用作元数据(关于数据的数据)的容器。它用在 <html> 标签和 <body> 标签之间。

HTML 文档的头部是页面加载时其内容不会显示在浏览器中的部分。它只包含有关 HTML 文档的元数据,该元数据指定有关 HTML 文档的数据。

一个 HTML head 可以包含很多元数据信息,也可以包含很少或没有信息,这取决于我们的要求。而head部分在创建一个网站时起着至关重要的作用,它是一个HTML文件。

元数据定义文档标题、字符集、样式、链接、脚本和其他元信息。

以下是元数据中使用的标签列表:

<title>
<style>
<meta>
<link>
<script>
<base>

HTML <title> 元素

HTML <title> 元素用于定义文档的标题。它用于所有 HTML/XHTML 文档。<title> 元素必须放在 <head> 元素之间,一个文档只能有一个 title 元素。

<title> 元素有什么作用?

  1. 它在浏览器选项卡中定义了一个标题。
  2. 将页面添加到收藏夹时,它会为该页面提供一个标题。
  3. 它在搜索引擎结果中显示页面的标题。

注意:title 元素必须与文档相关,建议长度为 65 到 70 个字符,包括空格。

例子:

<!DOCTYPE html>  
<html>  
<head>  
  <title>This Page Title</title>  
</head>  
<body>  
<p>The body's content is displayed in the browser window.</p>  
<p>The content of the title element is displayed in the browser tab, in favorites and in search engine results.</p>  
</body>  
</html>  

HTML <style> 元素

HTML <style> 元素用于设置 HTML 页面的样式。<style> 元素只能具有该 HTML 页面的 CSS 属性。如果我们想为多个页面应用 CSS,那么我们应该使用单独的 CSS 文件。

例子:

<!DOCTYPE html>  
<html>  
<head>  
  <title>This is Page Title</title>  
  <style>  
    body {background-color: pink;}  
    h1 {color: red;}      
    p {color: blue;}  
  </style>  
</head>    
<body>  
<h1>This is a Heading</h1>  
<p>This is a paragraph.</p>  
</body>  
</html>  

HTML <link> 元素

HTML <link> 元素用于将外部样式表链接到您的网页。<link> 元素主要包含两个属性,即“rel”和“href”。rel 属性表明它是一个样式表,而 href 给出了该外部文件的路径。

例子:

<!DOCTYPE html>  
 <html>  
 <head>  
    <title>This is title</title>  
    <link rel="stylesheet" href="style.css">  
   </head>  
   <body>  
    <h2>Web-page with external CSS</h2>  
    <p>This is looking a cool page</p>  
   </body>  
 </html>  

HTML <meta> 元素

HTML <meta> 元素用于指定网页上的字符集、页面描述、关键字、作者和其他元数据。

浏览器、搜索引擎和其他网络服务主要使用元数据来更好地对您的网页进行排名。

让我们看看如何使用元数据:

定义字符集:

<meta charset="UTF-8">  

charset 属性指定字符编码。在此示例中,我们将其设置为“UTF-8”,这意味着它可以处理显示任何语言。

例子:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">    
</head>  
<body>  
<p>This is written in English language<span style="color: blue"> My friend's name is.......</span></p>  
<p>This is Chinese language <span style="color: red">Wǒ de péngyǒu jiào</span></p>  
</body>  
</html>  

输出:

网页头

要定义您的网页的描述:

<meta name="description" content="Free Web tutorials">  

如果您提供元描述,那么它将有助于搜索引擎执行相关搜索。

为搜索引擎定义关键字:

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

关键字值也用于为搜索引擎提供关键字,但由于垃圾邮件发送者,它可能会被浏览器忽略。

要定义网页的作者:

<meta name="author" content="Akon">  

作者值指定编写页面内容的人的姓名,对于某些内容管理系统自动提取作者信息很有用。

每 30 秒刷新一次文档:

<meta http-equiv="refresh" content="30">  

元刷新用于向浏览器提供指令,使其在给定的时间间隔后自动刷新页面。如上例,它将在 30 秒后自动刷新

<meta http-equiv="refresh" content="10; url=https://www.javatpoint.com/html-head> 

如果您添加一个带有内容值的 URL,那么它将在时间限制结束后重定向到该页面。

例子:

<!DOCTYPE html>  
<html>  
 <head>  
   <meta http-equiv="refresh" content="5; url=https://www.javatpoint.com/html-head">  
 </head>  
   <body>  
    <h2>Meta element Example</h2>  
   <p style="color: green;">Kindly wait for 5 seconds and after 5 seconds it will automatically redirect to URL specified in meta tag</p>  
 </body>  
</html>  

下面的例子展示了如何在 HTML head 中使用所有的 Meta 元素

例子:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<meta name="description" content="Free Web tutorials">  
<meta name="keywords" content="HTML,CSS,XML,JavaScript">  
<meta name="author" content="Akon">  
</head>  
<body>  
<p>All the meta information are set.</p>  
</body>  
</html>  

使用 <meta> 标签设置视口

HTML5 中引入了此方法,以通过使用 <meta> 标记来控制视口。

视口是网页的用户可见区域。它因设备而异,在手机上看起来比在电脑屏幕上小。

<meta>视口元素的语法:

<meta name="viewport" content="width=device-width, initial-scale=1.0">  

此处,<meta> 视口元素指定如何控制页面的尺寸和缩放比例。

width =device-width用于设置页面的宽度以跟随设备的屏幕宽度(这将因设备而异)。

initial -scale=1.0用于设置浏览器首次加载页面时的初始缩放级别。

没有视口 <meta> 标签的网页示例:

<!DOCTYPE html>  
<html>  
<body>  
  
<p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>  
  
<img src="image.jpg" alt="image" width="460" height="345">  
  
<p>  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut   
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation   
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel   
eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu   
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum  
zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis   
eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.  
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat  
facer possim assum.  
</p>  
  
</body>  
</html>  

带有视口 <meta> 标签的网页示例:

<!DOCTYPE html>  
<html>  
<head>  
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>  
<style>  
img {  
    max-width: 100%;  
    height: auto;  
}  
</style>  
</head>  
<body>  
<p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>  
  
<img src="image.jpg" alt="image" width="460" height="345">  
  
<p>  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut   
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation   
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel   
eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu   
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum  
zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis   
eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.  
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat  
facer possim assum.  
</p>  
  
</body>  
</html>  

注意:要清楚地看到差异,请在智能手机或平板电脑上打开此页面。

HTML <base> 元素

HTML <base> 元素用于指定页面中所有相对 URL 的基本 URL 和基本目标。

例子:

<!DOCTYPE html>  
<html>  
<head>  
<title>Page Title</title>  
<base href="https://static.javatpoint.com/htmlpages/images/" target="_blank">  
</head>  
<body>  
<img src="html5.png">  
<p>We have specified a base URL, the browser will look for the image "html5.png"   
at "https://static.javatpoint.com/htmlpages/images/html5.png"</p>  
<p><a href=" https://www.javatpoint.com">JavatPoint</a></p>  
<p>The link above will open in a new window because base target is set to "_blank".</p>  
</body>  
</html>  

HTML <script> 元素

HTML <script> 元素用于为同一页面应用客户端 JavaScript,或将外部 JavaScript 文件添加到当前页面。

例子:

<!DOCTYPE html>  
<html>  
<head>  
    <script>  
        function fun() {  
        document.getElementById("p").style.color="green";     
        }  
    </script>  
</head>  
<body>  
<h2>Script within Head element</h2>  
<p id="p">This will change the color</p>  
<button type="button" onclick="fun()">Click me</button>  
</body>  
</html>  

如果我们想使用一些外部 JavaScript 文件,那么可以通过以下方式应用它:

<script src=".js file_path">  

排除 <html>、<head> 和 <body> 元素

HTML 5 方便我们省略 <html>、<body> 和 <head> 标签。

例子:

<!DOCTYPE html>  
<title>Page Title</title>  
<h1>This is a heading</h1>  
<p>This is a paragraph.</p>  

注意:不建议省略 <html> 和 <body> 标签。省略这些标签会使 DOM 或 XML 软件崩溃,并在旧浏览器 (IE9) 中产生错误。

但是,您可以省略 <head> 标记。

标签: html, HTML教程, HTML技术, HTML学习, HTML学习教程, HTML下载, HTML语言, HTML开发, HTML入门教程, HTML进阶教程, HTML高级教程, HTML面试题, HTML笔试题, HTML编程思想