HTML的头部

HTML篇_第五章、HTML的`<head>`
- 一、HTML `<head>`元素
- 二、`<title>`元素
- 三、`<base>`元素
- 四、`<link>元素`
- 五、`<style>`元素
- 六、`<meta>`元素
- - 6.1为搜索引擎定义关键词
  - 6.2为网页定义描述内容
  - 6.3定义网页作者
- 七、`<script>`元素

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在这里不做叙述。

希望有所帮助！
关注我，持续更新。

一文读懂HTML的头部内容，希望有所帮助相关推荐

一文读懂HTTP/2及HTTP/3特性
前言 HTTP/2 相比于 HTTP/1,可以说是大幅度提高了网页的性能,只需要升级到该协议就可以减少很多之前需要做的性能优化工作,当然兼容问题以及如何优雅降级应该是国内还不普遍使用的原因之一. 虽然 ...
腾讯资深架构师干货总结：一文读懂大型分布式系统设计的方方面面
1.引言我们常常会听说,某个互联网应用的服务器端系统多么牛逼,比如QQ.微信.淘宝.那么,一个大型互联网应用的服务器端系统,到底牛逼在什么地方?为什么海量的用户访问,会让一个服务器端系统变得更复杂? ...
一文读懂HTTP Caching
一个典型的HTTP应用拓扑如下 user-agent - forward proxy - proxy server n - reverse proxy - origin server user-age ...
网络编程懒人入门(十一)：一文读懂什么是IPv6
本文同时发布于"即时通讯技术圈"公众号,链接是:https://mp.weixin.qq.com/s/cS5xB2DrjF52rmz6EGVJ6A. 本文参考了公众号鲜枣课堂的&q ...
一文读懂：什么是区块链
今天写一个能够一文读懂区块链的文章,以后谁再问我区块链是什么东西,我就把这篇文章发给他. -------- 个人技术公众号:解决方案工程师欢迎同领域的朋友关注.相互交流. -------- 区块链技 ...
实时社群技术专题(一)：支持百万人超级群聊，一文读懂社群产品Discord
本文由腾讯产品体验设计师volihuang分享,原题"千万级增长,实时社交产品Discord拆解",本文收录时有内容修订和大量排版优化. 1.引言对于大多数人而言,对即时通讯IM ...
一文读懂Faster RCNN
来源:信息网络工程研究中心本文约7500字,建议阅读10+分钟本文从四个切入点为你介绍Faster R-CNN网络. 经过R-CNN和Fast RCNN的积淀,Ross B. Girshick在20 ...

一文读懂HTML的头部内容，希望有所帮助

HTML的头部

HTML篇_第五章、HTML的`<head>`

一、HTML `<head>`元素

二、`<title>`元素

三、`<base>`元素

四、`<link>元素`

五、`<style>`元素

六、`<meta>`元素

6.1为搜索引擎定义关键词

6.2为网页定义描述内容

6.3定义网页作者

七、`<script>`元素

一文读懂HTML的头部内容，希望有所帮助相关推荐

最新文章

热门文章

一文读懂HTML的头部内容，希望有所帮助

HTML的头部

HTML篇_第五章、HTML的<head>

一、HTML <head>元素

二、<title>元素

三、<base>元素

四、<link>元素

五、<style>元素

六、<meta>元素

6.1为搜索引擎定义关键词

6.2为网页定义描述内容

6.3定义网页作者

七、<script>元素

一文读懂HTML的头部内容，希望有所帮助相关推荐

最新文章

热门文章

HTML篇_第五章、HTML的`<head>`

一、HTML `<head>`元素

二、`<title>`元素

三、`<base>`元素

四、`<link>元素`

五、`<style>`元素

六、`<meta>`元素

七、`<script>`元素