HTML <head>标签
HTML <head>作用
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>标签做什么？
它在浏览器选项卡中定义了标题。
当页面添加到收藏夹时，它将为页面提供标题。
它在搜索引擎结果中显示页面的标题。
注意: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>这是标题</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服务使用，以更好地对您的网页进行排名。
让我们看看如何使用元数据:
定义字符集:
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="免费Web教程">
如果您提供一个元描述，那么它将对搜索引擎执行相关搜索很有用。
为搜索引擎定义关键字:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
该关键字值还用于为搜索引擎提供关键字，但是由于垃圾邮件发送者，它可能会被浏览器忽略。
定义网页的作者:
<meta name="author" content="lidihuo">
作者值指定撰写页面内容的人员的姓名，对于某些内容管理系统自动提取作者信息很有用。
每30秒刷新一次文档:
<meta http-equiv="refresh" content="30">
元刷新用于向浏览器提供指令，以在给定的时间间隔后自动刷新页面。如上例所示，它将在30秒后自动刷新
<meta http-equiv="refresh"content="10; url=https://www.lidihuo.com/html/html-index.html>
如果添加带有内容值的URL，则在时间限制结束后它将重定向到该页面。
示例:
<!DOCTYPE html>
<html>
< head>
<meta http-equiv="refresh"content="5; url=https://www.lidihuo.com/html/html-tags-head.html">
</head>
<body>
<h2> Meta element Example</h2>
<p style="color: green;"> 请等待5秒，将自动重定向到URL中的元标签中指定URL</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> 所有元信息都已设置。</p>
</body>
</html>
使用 <meta>标签设置视口
HTML5中引入了此方法，以通过使用 <meta>标签来控制视口。
视口是用户在网页上的可见区域。它随设备的不同而变化，并且在手机上的显示尺寸小于计算机屏幕。
<meta>视口标签的语法:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在此处，
<meta>视口标签指定如何控制页面的尺寸和缩放比例。
width=device-width 用于设置页面的宽度以跟随设备的屏幕宽度（视设备而定）。
初始比例=1.0 用于设置浏览器首次加载页面时的初始缩放级别。
网络示例没有视口 <meta>标签的页面:
<!DOCTYPE html>
<html>
<body>
<p> <b> 在PC端或PAD端浏览</b> </p>
<img src="image.jpg" alt="image"width="460"height="345">
<p>立地货（www.lidihuo.com）是一个由个人创建的学习平台，"立地货"取名来之《西游记》三十七回讲到的立帝货，原为救世主之意， 而现实中并无救世主，故而把"立帝货"改为"立地货"，唯有脚踏实地学习成长，自己才能主宰自己的人生，搭建本站旨在为职场小白排忧解惑，提供零基础的学习教程，携手抵制成长焦虑，共同学习成长，让“知”者结伴同行。</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> 在PC端或PAD端浏览。</b> </p>
<img src="image.jpg" alt="image" width="460"height="345">
<p>立地货（www.lidihuo.com）是一个由个人创建的学习平台，"立地货"取名来之《西游记》三十七回讲到的立帝货，原为救世主之意， 而现实中并无救世主，故而把"立帝货"改为"立地货"，唯有脚踏实地学习成长，自己才能主宰自己的人生，搭建本站旨在为职场小白排忧解惑，提供零基础的学习教程，携手抵制成长焦虑，共同学习成长，让“知”者结伴同行。</p>
</body>
</html>
注意:要清楚地看到差异，请在智能手机或平板电脑上打开此页面。
HTML 标签
HTML
标签用于指定页面中所有相对URL的基本URL和基本目标。
示例:
<!DOCTYPE html>
<html>
< head>
<title> Page Title</title>
<base href="https://www.lidihuo.com/" target="_blank">
</head>
<body>
<img src="logo.png">
<p> 我们已经指定一个基本URL，浏览器将寻找 的 图像 "logo.png"
at "https://www.lidihuo.com/images/logo.png"</p>
<p> <a href="https://www.lidihuo.com"> Lidihuo</a> </p>
<p>上面的链接将在新窗口中打开，因为基本目标设置为 "_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>Head元素中的脚本 </h2>
<p id = "p">这将更改颜色</p>
<button type="button" onclick = "fun()"> Click me </button>
</body>
</html>
如果我们要使用一些外部JavaScript文件，则可以通过以下方式应用它:
排除 <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> 标签。
