HTML的头部
HTML篇_第五章、HTML的<head>
一、HTML <head>元素
<head>元素包是整个文档的头部区域，它定义了文档信息，包含了所有的头部标签元素。在<head>元素中可以插入脚本（JavaScript）、样式文件（CSS）以及各种meta信息。可以添加在头部区域的元素见下文中的表格。
| 标签 | 描述 |
|---|---|
<head> | 定义了文档的信息 |
<title> | 定义了文档的标题 |
<base> | 定义了页面链接标签的默认链接地址 |
<link> | 定义了文档和外部资源之间的联系 |
<meta> | 定义了HTML文档中的元数据 |
<script> | 定义了客户端的脚本文件 |
<style> | 定义了HTML文档的样式文件 |
二、<title>元素
<title>元素定义了不同文档的标题，它在HTML文档中是必须存在的。在浏览器中，该元素的内容在搜索引擎的结果页面作为标题显示。在网页被收藏添加到收藏夹的时候，在收藏夹内也作为标题来显示。
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<p>文档内容</p>
</body>
</html>
三、<base>元素
<base>标签描述了基本的链接地址/链接目标，则该标签作为HTML文档中所有的链接标签的默认链接
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<base href="https://www.csdn.net/" target="_blank">
</head>
<body>
</body>
</html>
<base>标签指定了页面上所有链接的默认URL，URL需要在该标签的href属性内填写。上述代码中target属性值设置为“_blank”的意思是：链接会在新窗口打开。
四、<link>元素
<link>标签他定义了文档于外部标签之间的联系，通常用于链接到样式表。
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<link rel="stylesheet" type="text/css" href="demo.css"/>
</head>
<body>
</body>
</html>
上述代码中，rel（全称：relationship）的属性值设置为“stylesheet”的意思是描述了当前页面与href所指定文档的关系.即说明的是,href连接的文档是一个新式表；type属性是类型属性，属性值设置为"text/css"意思是告诉浏览器这里的文本内容（text）要层叠样式表（css）来解析；href属性的值设置为“demo.css”的意思是：当前层叠样式表（css）文件的文件路径。
五、<style>元素
<style>标签定义了文档样式的引用地址，也可以直接添加样式来渲染HTML文档
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<style type="text/css">
body{
background-color:red；
}
p{
color:black;
}
</style>
</head>
<body>
<h1>《桃花源记》</h1>
<p>晋·陶渊明</p>
<p>晋太元中，武陵人捕鱼为业。缘溪行，忘路之远近。忽逢桃花林，夹岸数百步，中无杂树，芳草鲜美，落英缤纷，渔人甚异之。复前行，欲穷其林。<br/>
林尽水源，便得一山，山有小口，仿佛若有光。便舍船，从口入。初极狭，才通人。复行数十步，豁然开朗。土地平旷，屋舍俨然，有良田美池桑竹之属。阡陌交通，鸡犬相闻。其中往来种作，男女衣着，悉如外人。黄发垂髫，并怡然自乐。<br/>
见渔人，乃大惊，问所从来。具答之。便要还家，设酒杀鸡作食。村中闻有此人，咸来问讯。自云先世避秦时乱，率妻子邑人来此绝境，不复出焉，遂与外人间隔。问今是何世，乃不知有汉，无论魏晋。此人一一为具言所闻，皆叹惋。余人各复延至其家，皆出酒食。停数日，辞去。此中人语云：“不足为外人道也。”<br/>
既出，得其船，便扶向路，处处志之。及郡下，诣太守，说如此。太守即遣人随其往，寻向所志，遂迷，不复得路。<br/>
南阳刘子骥，高尚士也，闻之，欣然规往。未果，寻病终，后遂无问津者</p>
</body>
</html>
上述代码中type属性值设置为"text/css"意思是告诉浏览器这里的文本内容（text）要层叠样式表（css）来解析。标签内容的意思是设置HTML文档的主题北京颜色为红色，段落的文字颜色为黑色。该部分涉及到层叠样式表（css）的相关知识，性情请参见关于层叠样式表（css）的系列文章，在此不做赘述。
六、<meta>元素
<meta>元素提供了元数据，一般放置在<head>区域通常用于指定网页的描述、关键词、文件的最后修改时间、作者和其他元数据。这些元数据会被浏览器解析，可以使用于浏览器（如何显示内容或加载页面）、搜索引擎（关键词）或者其他web服务，但是这些元数据不会显示在页面上。常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级，等等。
接下来举几个<meta>标签的实际应用例子。
6.1为搜索引擎定义关键词
<meta name="keywords" content="HTML,CSS,JavaScript"/>
上述代码中name属性是用来描述网页的，它的值“keywords”用于指定所提供的信息内容，的意思是为搜索引擎提供关键字列表，对应于content（网页内容）属性使用，便于搜索引擎查找分类。content属性的值为设置的关键字，上述代码中设置了三个关键字，各个关键字之间需要用英文逗号隔开。
6.2为网页定义描述内容
<meta name="description" content="网页简述"/>
上述代码中name属性的值设置为"description"，意思是：告诉搜索引擎当前页面的主要内容。
6.3定义网页作者
<meta name="author" content="7旅病娘"/>
上述代码中name属性的值设置为"author"，定义网页的作者。
七、<script>元素
这个标签用于加载脚本文件，如：JavaScript。关于JavaScript在这里不做叙述。
希望有所帮助！
关注我，持续更新。
2611
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
