🔵HTMLhead元素

本文最后更新于:2022年4月6日 中午

head元素

无论是否使用head标签,现代浏览器均会自动创建head标签

head元素支持以下元素:

1
2
3
4
5
6
7
8
9
<head>
<base />
<meta />
<title></title>
<link />
<script></script>
<style></style>
<noscript></noscript>
</head>

title元素

元素内容应为纯文本,且只因有一个title元素,元素文本为浏览器标签文本

1
2
3
<head>
<title>网页标题</title>
</head>

base元素

指定该页面的基准路径与链接的打开方式,该标签应至多只有一个

href

该属性指定了本页面srchref路径的基准路径

当其他元素使用href属性为空时访问基准路径

1
2
3
4
5
6
7
8
9
<head>
<base href="https://www.qingshaner.com/" />
</head>

<body>
<a href="">
<img src="images/flower.jpg">使用相对路径
</a>
</body>

href值应以/结尾

target

指定页面打开方式,可被其他元素的行内target属性覆盖

target 打开方式
_blank 新窗口打开
_parent 上一级窗口打开(使用iframe)
_self 当前窗口打开(默认)
_top 最上层窗口打开(使用iframe)
framename 指定iframe打开

link元素

link元素通常用来引入外部样式表或设置网页标签栏图标

1
2
3
<head>
<link href="style.css" />
</head>

设置图标

1
2
3
<head>
<link href="https://xxx.ico" rel="icon" />
</head>

media属性

media条件满足时加载

外部资源链接元素 MDN

style元素

该属性用于设置元素CSS样式

1
2
3
4
5
<style>
h1 {
color: #fff;
}
</style>

media

该属性用于设置对不同的设备应用不同的样式

同上

meta元素

用于声明信息

charset

指定编码字符集

1
<meta charset="utf-8" />

name/content

用于向爬虫提示网页内容

<meta name="key" content="value"

1
2
3
4
5
6
<head>
<meta name="keywords" content="IT, 前端, HTML, head" />
<meta name="description" content="描述该页面的内容是什么" />
<meta name="robots" content="指明应爬取哪些页面" />
<meta name="author" content="作者" />
</head>

说明:description用来告诉搜索引擎你的网站主要内容。

网站内容描述(description)的设计要点:

①网页描述为自然语言而不是罗列关键词(与keywords设计正好相反);

②尽可能准确地描述网页的核心内容,通常为网页内容的摘要信息,也就是希望搜索引擎在检索结果中展示的摘要信息;

③网页描述中含有有效关键词;

④网页描述内容与网页标题内容有高度相关性;

⑤网页描述内容与网页主体内容有高度相关性;

⑥网页描述的文字不必太多,一般不超过搜索引擎检索结果摘要信息的最多字数(通常在100中文字之内,不同搜索引擎略有差异)。

《百度百科》

http-equiv/content

类似于http头的作用

1
2
3
4
5
<head>
<meta http-equiv="default-style" content="默认样式(style或link元素的title)" />
<meta http-equiv="refresh" content="刷新/跳转间隔(s);url=地址栏链接URL" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>

关于meta标签实现转场效果貌似只有ie有效

script元素

用于写入或引入脚本

src

用于引入外部脚本,不推荐在head同步引入脚本(会造成白屏)

1
2
3
<head>
<script src="main.js"></script>
</head>

async

异步导入脚本

1
<script src="main.js" async="true" ></script>

defer

等待文档加载完再导入脚本

type

声明脚本类型,默认text/javascript

设置为module则当作模块导入

noscript元素

其内容在禁用或不支持脚本时生效


🔵HTMLhead元素
https://qingshaner.com/HTMLhead标签/
作者
清山
发布于
2021年11月21日
许可协议