几个你不知道的Head标签用法

简介: HTML 标签用于定义文档的头部,它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

HTML<head> 标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

Head标签在我们的开发实践中最常用的大概是定义标题和网站小图标、引入CSS/JS、定义字符集,这篇文章将总结几个我所遇到的Head标签的几个高级用法。

一、SEO相关

  • 1. 定义关键词 keywords:
    <meta name="keywords" content="your keywords">
    页面描述内容 description:
    <meta name="description" content="your description">

  • 2. 定义网页搜索引擎索引方式,通常有如下几种取值:none,noindex,nofollow,all,index和follow等。
    <meta name="robots" content="index,follow">
    其中的属性说明如下:

  • 设定为all:文件将被检索,且页面上的链接可以被查询;

  • 设定为none:文件将不被检索,且页面上的链接不可以被查询;

  • 设定为index:文件将被检索;

  • 设定为follow:页面上的链接可以被查询;

  • 设定为noindex:文件将不被检索,但页面上的链接可以被查询;

  • 设定为nofollow:文件将不被检索,页面上的链接可以被查询。

  • 3. 结构化数据
    结构化,是通过网页特殊的标签将需要的数据提供给搜索引擎,并在搜索结果中按照既定的模版展现的实现形式,目的是为了提升搜索结果的体验,帮助站长提升搜索结果点击率。
    ** 如下时使用在head中设置结构化数据后的搜索引擎展示效果:**

    img_8bd0d568aa1b43c607bd806c4dbd8aed.png
    Paste_Image.png

    img_3399a79d5245c371a81dde1397266096.png
    Paste_Image.png

img_427d5c37349f29c1b3e32d8bef96ce12.png
Paste_Image.png

二、浏览器控制

  • 一、页面刷新:
    refresh示例
    5秒之后刷新本页面:
    <meta http-equiv="refresh" content="5" />
    5秒之后转到wangbaiyuan.cn:
    <meta http-equiv="refresh" content="5; url=http://wangbaiyuan.cn" />

  • **二、 控制页面与移动设备宽度相等 **
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    网页宽度默认等于屏幕宽度(width=device-width), 初始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

三、缓存控制:cache-control

<meta http-equiv="pragma" content="no-cache">
pragma与no-cache用于定义页面缓存,不缓存页面(为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过下面的定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览.)
<meta http-equiv="cache-control" content="no-cache">
常见的取值有private、no-cache、max-age、must-revalidate等,默认为private,其作用根据不同的重新浏览方式分为以下几种情况:

  • 1) 打开新窗口 值为private、no-cache、must-revalidate,那么打开新窗口访问时都会重新访问服务器。 而如果指定了max-age值,那么在此值内的时间里就不会重新访问服务器,例如: Cache-control: max-age=5(表示当访问此网页后的5秒内再次访问不会去服务器)
  • 2) 在地址栏回车 值为private或must-revalidate则只有第一次访问时会访问服务器,以后就不再访问。 值为no-cache,那么每次都会访问。 值为max-age,则在过期之前不会重复访问。
  • 3) 按后退按扭 值为private、must-revalidate、max-age,则不会重访问, 值为no-cache,则每次都重复访问4) 按刷新按扭 无论为何值,都会重复访问 Cache-control值为“no-cache”时,访问此页面不会在Internet临时文件夹留下页面备份。
    <meta http-equiv="expires" content="0">
    指定Expires值为一个早已过去的时间,那么访问此网时若重复在地址栏按回车,那么每次都会重复访问: Expires: Fri, 31 Dec 1999 16:00:00 GMT 比如:禁止页面在IE中缓存 http响应消息头部设置: CacheControl = no-cache Pragma=no-cache Expires = -1 Expires是个好东东,如果服务器上的网页经常变化,就把它设置为0,表示立即过期。
目录
相关文章
|
2月前
|
前端开发 JavaScript 开发者
html<p>标签的用法
`&lt;p&gt;` 标签主要用于定义段落,但在网页设计中也有创新用法,如用作容器、自定义样式、响应式设计调整、嵌套结构创建、伪元素及伪类应用、添加微数据和属性,以及增强可访问性等,这些方法可在保证语义清晰的前提下提升页面表现力。
|
2月前
|
前端开发
为什么最好把 CSS 的 link 标签放在 head 标签之间?
为什么最好把 CSS 的 link 标签放在 head 标签之间?
|
3月前
|
移动开发 搜索推荐 索引
HTML5 中 article 标签的含义与作用
【8月更文挑战第24天】
1064 0
|
5月前
|
前端开发 开发者 SEO
HTML基础标签解析:H1-H6、DIV与P的正确使用方法
HTML基础标签解析:H1-H6、DIV与P的正确使用方法
108 0
|
6月前
|
缓存 前端开发 JavaScript
CSS 的 link 标签放在 head 标签之间的作用
CSS 的 link 标签放在 head 标签之间的作用
79 1
|
移动开发 安全 JavaScript
HTML——标签,属性,语法总结
HTML——标签,属性,语法总结
HTML中a标签的target属性的取值和作用--详解(附加代码)
HTML中a标签的target属性的取值和作用--详解(附加代码)
255 0
|
移动开发 人工智能 前端开发
HTML5 常用 标签 锚 列表 用法
HTML5 常用 标签 锚 列表 用法