前端必知必会-head元素

文章目录

HTML - Head 元素
HTML `<title>` 元素
HTML `<style>` 元素
HTML `<link>` 元素
HTML `<meta>` 元素
设置viewport
HTML `<script>` 元素
HTML `<base>` 元素
总结

HTML - Head 元素

HTML <head> 元素是以下元素的容器：<title>、<style>、<meta>、<link>、<script> 和 <base>。

<head> 元素是元数据（有关数据的数据）的容器，位于 <html> 标记和 <body> 标记之间。

HTML 元数据是有关 HTML 文档的数据。不显示元数据。

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

HTML `<title>` 元素

<title> 元素定义文档的标题。标题必须是纯文本，并显示在浏览器的标题栏或页面的选项卡中。

HTML 文档中必须有 <title> 元素！

页面标题的内容对于搜索引擎优化 (SEO) 非常重要！搜索引擎算法使用页面标题来决定在搜索结果中列出页面的顺序。

<title> 元素：

在浏览器工具栏中定义标题
在将页面添加到收藏夹时提供页面标题
在搜索引擎结果中显示页面标题
因此，请尽量使标题准确且有意义！

一个简单的 HTML 文档：

示例

<!DOCTYPE html>
<html>
<head>
<title>有意义的页面标题</title>
</head>
<body>文档的内容......</body>
</html>

HTML `<style>` 元素

<style> 元素用于定义单个 HTML 页面的样式信息：

示例

<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>

HTML `<link>` 元素

<link> 元素定义当前文档与外部资源之间的关系。

<link> 标签最常用于链接到外部样式表：

示例

<link rel="stylesheet" href="mystyle.css">

HTML `<meta>` 元素

<meta> 元素通常用于指定字符集、页面描述、关键字、文档作者和视口设置。

元数据不会显示在页面上，但会被浏览器（如何显示内容或重新加载页面）、搜索引擎（关键字）和其他 Web 服务使用。

示例
定义使用的字符集：

<meta charset="UTF-8">

定义搜索引擎的关键字：

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

定义网页描述：

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

定义页面作者：

<meta name="author" content="John Doe">

每 30 秒刷新一次文档：

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

设置视口以使您的网站在所有设备上看起来都很好：

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

<meta> 标签示例：

示例

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">

设置viewport

viewport是用户在网页上可见的区域。它随设备而变化 - 在手机上比在计算机屏幕上小。

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

为浏览器提供了有关如何控制页面尺寸和缩放的说明。

width=device-width 部分设置页面宽度以遵循设备的屏幕宽度（这将根据设备而变化）。
initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。

HTML `<script>` 元素

<script> 元素用于定义客户端 JavaScript。

以下 JavaScript 将“Hello JavaScript！”写入 id=“demo” 的 HTML 元素：

示例

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

HTML `<base>` 元素

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

<base> 标记必须具有 href 或 target 属性，或两者兼有。

文档中只能有一个 <base>元素!

示例
为页面上的所有链接指定默认 URL 和默认目标：

<head>
<base href="https://www.baidu.com/" target="_blank">
</head><body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML 基本标记</a>
</body>