HTML标签引⼊之头部标签（headhead）
上⼀个潦草的随笔中提到了head标签在⼀个html⽂档中的“灵魂”地位，接下来就从head的内部标签来看⼀看这“灵魂”是怎么来的。
① title标签
title标签决定着⽹页的名称，这也是我们在浏览器中最直观能够看到的部分：
1<!DOCTYPE html>
2<html>
3<head>
4<title>这⾥是标题</title>
5</head>
6<body>
7</body>
8</html>
添加title标题后使⽤使⽤浏览器打开html⽂档获得如下效果
在不设置title标签的情况下，⽹页名称为对应⽂档的全称，如XXX.html
② meta标签
meta标签内部的声明相当于⽹页的标签，浏览器通过meta标签会对页⾯进⾏解析。
我在⽬前看到的html⽂档中最常见到的meta标签形式都以如下⽅式出现：
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>这⾥是标题</title>
6</head>
7<body>
8</body>
9</html>
这个meta标签中给charset属性设置属性值为“utf-8”，浏览器在解析的过程中就可以知晓该⽂档是使⽤“utf-8”编码完成的。
此处的meta标签完成了声明编码的任务，与之相类似还有很多可以⽤到meta标签，如声明作者、主要内容等等。可以看出meta标签个性化程度很⾼。
③ style标签
style顾名思义，在html⽂档中发挥改变样式的作⽤，可以归为CSS（叠样式表，Cascading Style Sheets）的范畴。这⾥提到的style标签涉及html⽂档中引⼊css的三种⽅式，这⾥属于内联式。
这个地⽅涉及与body内标签的结合以及选择器的问题，所以先放⼀个空的style标签
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>这⾥是标题</title>
6<style></style>
7</head>
8<body>
9</body>
10</html>
④ link标签
说完style标签，接下来与它相关的就是link标签，link标签通常是负责css⽂件的外部引⼊，也就是引⼊css三种⽅式之⼀的外联式。
引⼊css⽂件是link标签⽤途中我认为最常见的⽅式，具体来看如下：
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
href标签怎么用
5<title>这⾥是标题</title>
6<link rel="stylesheet" type="text/css" href="css⽂件位置">
7<style></style>
8</head>
9<body>
10</body>
11</html>
rel属性的其他表现⽅式不常见，这⾥不做说明；type属性表⽰该标签的类型，属性值"text/css"体现了引⼊的是css⽂件，href属性⼗分常见，其属性值为⽬标⽂件的地址。
link标签与style标签都⽤作css样式的引⼊，区别主要在于⽂件的操作与体量。
如果是很简单的html⽂档，需要改变样式的标签也不会很多的话，完全可以使⽤内联式（<style></style>），甚⾄是之后会见到的⾏内式（将style作为属性，具体需要改变的样式作为属性值）；
在相对⼤⼀些的html⽂档中css就被作为外部⽂件进⾏引⼊了，这样做的好处是⽅便修改⽽且减少代码冗余。针对不同的情况两种⽅式各有利弊，接下来要说到的script标签也是如此
⑤ script标签
script标签属于⽹页脚本的引⼊，也分为内联、外联和⾏内（不常见）三种引⼊⽅式。与样式引⼊的区别在于⽆论外联还是内联脚本引⼊只需要<script></script>即可。
在这⾥先选择加⼊单纯的script标签，如style标签⼀样：
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>这⾥是标题</title>
6<link rel="stylesheet" href="css⽂件位置">
7<style></style>
8<script></script>
9</head>
10<body>
11</body>
12</html>
为了完成这篇随笔，我还发现了两个罕见或者说我平时没有注意到的头部内标签：base标签和noscript标签
⑥ base标签
base标签也是⼀个可以很好的体现出head标签“灵魂”地位的证明，⽤来作为⽹页中其他⼀些链接操作的基准。介于⾥⾯的属性较少，可以通过举例说明：
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>这⾥是标题</title>
6<link rel="stylesheet" href="css⽂件位置">
7<style></style>
8<script></script>
9<base href="相对链接的前置链接" target="打开链接的⽅式">
10</head>
11<body>
12</body>
13</html>
base的基准作⽤⼀部分就体现在其href属性的属性值充当页⾯内其他标签href属性值的前置链接，在这⾥涉及到⽂件的绝对地址（绝对路径）和相对地址（相对路径）。
绝对路径，我的理解是可以确定⽂件位置的最粗暴的⽅式，但不⼀定简单，有时还很繁琐；相对路径就往往会简化许多。
这⾥可以⽤在⼤街上问路来举例：你向⼀个陌⽣⼈询问市政府在哪⾥，有的⼈可能就会基于⾃⼰现在
的位置，通过脑海中想象出的路线来进⾏答复。
这个过程所阐释的就是相对地址，因为这种回答是相对于当时的情况，如果下次换⼀个地⽅问路，就会收获不⼀样的回答。
可能有极少部分⼈会告诉你XXX⼤街XXX号，但这种情况更多存在于我们填写家庭住址，这种⼗分详尽来确认位置的描述就是绝对地址。
通过绝对地址来访问是很直接的，但是⼀旦地址过长就不利于重复使⽤，因为我们现在看到的⼤多数⽹页都需要图⽚、外部样式、脚本等⼀系列⽂件组成，形单影只的html是不常见的，因此html内部会有不少指向外部的地址。
这个时候往往需要相对地址，毕竟同⼀个项⽬内的⽂件前置部分的链接都不会变，后⼀部分地址就根据各⾃标签的引⽤确认即可。
base中的href属性值确认的就是前半部分的链接，有效减少代码冗余。
target的属性值为打开链接的⽅式，我常见的主要有"_blank"和"_self"。前者表⽰在⼀个在⼀个新的窗⼝中打开链接，后者表⽰在当前页⾯打开新页⾯，形成覆盖。
创建新标签页就是⼀种打开target属性值为"_blank"的操作，还有其他⼀些属性值在见到的时候可以再加以说明。
⑦noscript标签
当浏览器不⽀持script脚本时显⽰noscript中的内容，因为我觉得不常⽤这个我就不加到代码⾥了，以后⽤到希望⾃⼰能想到它。
由此head内部的标签就告⼀段落了，这个时候我们打开加⼊标签之后的html⽂档发现⽹页中依旧⼀⽚空⽩，这也从⼀个⽅⾯说明了只有“灵魂”没有“躯⼲”是不⾏的。
下次有机会来说⼀说“躯⼲”body内部的标签。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。