当前位置： 正文

HTML head

03-19 HTML5/移动WEB应用/小程序 372

本文概述

HTML <head>元素用作元数据（有关数据的数据）的容器。在<html>标记和<body>标记之间使用。

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

HTML头可以包含很多元数据信息, 也可以包含很少或没有信息, 这取决于我们的要求。但是头部在创建网站时对HTML文档至关重要。

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

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

  • <标题>
  • <样式>
  • <meta>
  • <链接>
  • <脚本>
  • <基础>

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>元素用于指定网页上的字符集, 页面描述, 关键字, 作者和其他元数据。

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

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

定义字符集：

<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>

立即测试

输出：

HTML head

定义网页说明：

<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.srcmini02.com/html-head>

如果添加具有内容值的URL, 则在时间限制结束后它将重定向到该页面。

例：

<!DOCTYPE html>
<html>
 <head>
   <meta http-equiv="refresh" content="5; url=https://www.srcmini02.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标头中使用所有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.srcmini02.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.srcmini02.com/htmlpages/images/html5.png"</p>
<p><a href=" https://www.srcmini02.com">srcmini</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>标记。

微信公众号
手机浏览(小程序)
0
分享到：

猜你喜欢

软件用例工具概述 – 软件工程教程
HTML5/移动WEB应用/小程序

03-20 690
React Native设置元素样式 – React Native实战教程
HTML5/移动WEB应用/小程序

03-20 704
React Native状态state介绍和用法 – React Native实战教程
HTML5/移动WEB应用/小程序

03-20 736
软件维护概述 – 软件工程教程
HTML5/移动WEB应用/小程序

03-20 708
React Native ScrollView元素 – React Native实战教程
HTML5/移动WEB应用/小程序

03-20 726
redux核心概念和数据流 – Redux教程
HTML5/移动WEB应用/小程序

03-20 742
没有账号？ 忘记密码？