首页教程软件教程正文

HTML 头部

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 432 浏览 5970 个字

摘要 :

文章目录 HTML <title> 元素 HTML <style> 元素 HTML <link> 元素 HTML <meta> 元素使用<meta>标签设置视口 HTML <base> 元素 HT……

文
章
目
录

HTML <title> 元素
HTML <style> 元素
HTML <link> 元素
HTML <meta> 元素
使用<meta>标签设置视口
HTML <base> 元素
HTML <script> 元素

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

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

一个HTML头部可以包含大量元数据信息，也可以没有信息，这取决于我们的需求。但头部在创建网站时对HTML文档起着关键作用。

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

以下是用于元数据的标签列表：

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

HTML <title> 元素

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

<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\">我的朋友叫....</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.panziye.com>

如果您在内容值中添加URL，则在时间限制结束后将重定向到该页面。

示例：

<!DOCTYPE html>  
<html>  
 <head>  
   <meta http-equiv=\"refresh\" content=\"5; url=https://www.panziye.com\">  
 </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头部使用所有元素的示例。

示例：

<!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 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=\"head>  <body>  <img src=html5.png\">  
<p>We have specified a base URL, the browser will look for the image \"html5.png\"   
at \"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文件，则可以通过以下方式应用：不包括<html>、<head>和<body>元素 HTML5允许我们省略<html>、<body>和<head>标签。

示例：