🔵HTMLhead元素

本文最后更新于：2024年4月25日 上午

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

该属性指定了本页面src或href路径的基准路径

当其他元素使用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元素

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

参考文档:

《HTML超文本标记语言 (MDN)》

《HTML5: base元素 (cdmana.com)》

《meta (百度百科)》

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