- 您好！欢迎来到鲲鹏知舟
HTML <head> 标签
HTML <head> 元素用作元数据（关于数据的数据）的容器。它用于 <html> 标签和 <body> 标签之间。
HTML 文档的头部是页面加载时浏览器中不显示内容的部分。它仅包含有关 HTML 文档的元数据，该元数据指定有关 HTML 文档的数据。
HTML head 可以包含大量元数据信息，也可以包含很少或没有信息，这取决于我们的要求。但是头部在创建网站时对 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">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> 视口元素指定如何控制页面的尺寸和缩放。
的宽度=设备宽度是用来设置页面的宽度跟随设备的屏幕宽度（其将取决于在设备上）。
该初始规模= 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> 标记。
-
使用社交账号登录,本站支持