在 HTML 中, 标签的 rel 属性用于定义当前文档与被链接文档之间的关系。
在 中,rel=“stylesheet” 表示被链接的文档(即 mystyle.css)是一个样式表(style sheet),用于为当前页面提供样式定义。
1、“rel” 是 “relation” 或 “relationship” 的缩写,意思是“关系;联系”。
2、“href” 是 “hypertext reference” 的缩写,意思是“超文本引用”。在 HTML 中,用于指定链接指向的资源地址。
<meta>
标签提供了关于 HTML 文档的元数据(metadata)。元数据是描述数据的数据,它不会直接显示在客户端页面上,但会被浏览器等程序解析和使用。
<meta>
标签位于文档的头部(<head>
部分),本身不包含实际的内容。它的作用是通过其属性定义与文档相关联的名称/值对,为浏览器、搜索引擎和其他网络服务提供各种信息。
常见的 <meta>
标签属性包括:
- name 属性:用于描述网页的各种信息,常见参数如下:
- Keywords(关键字):告诉搜索引擎网页的关键字,以提高搜索排名。例如:
<meta name="keywords" content="html, css, javascript">
- description(网站内容描述):向搜索引擎描述网站的主要内容,通常用于生成搜索结果中的摘要。例如:
<meta name="description" content="免费的 web 教程">
- author(作者):标注网页的作者。例如:
<meta name="author" content="bill gates">
- viewport(视图模式):改善网站在各种设备上的显示效果。例如:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
其中,width=device-width
将页面宽度设置为跟随设备屏幕宽度(视设备而定),initial-scale=1.0
设置初始缩放级别。
- Keywords(关键字):告诉搜索引擎网页的关键字,以提高搜索排名。例如:
- http-equiv 属性:相当于 HTTP 的文件头作用,可向浏览器传递一些有用信息,以帮助正确和精确地显示网页内容,常见参数如下:
- content-Type(显示字符集的设定):设定页面使用的字符集。例如:
<meta http-equiv="content-Type" content="text/html; charset=UTF-8">
- Expires(期限):用于设定网页的到期时间,过期后必须到服务器重新传输。例如:
<meta http-equiv="expires" content="Fri, 01 Jan 2020 18:18:18 GMT">
需使用 GMT 时间格式。 - Refresh(刷新):自动刷新并转到新页面。例如:
<meta http-equiv="refresh" content="5; url=https://www.baidu.cn">
其中的 5 表示停留 5 秒钟后自动刷新到指定的 URL 网址。 - Pragma(cache 模式):设定禁止浏览器从本地计算机的缓存中访问页面内容。例如:
<meta http-equiv="Pragma" content="no-cache">
- Window-target(显示窗口的设定):强制页面在当前窗口以独立页面显示,防止被其他框架调用。例如:
<meta http-equiv="windows-target" content="_blank">
- X-UA-Compatible(浏览模式):指定浏览器使用的版本进行渲染页面。例如:
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">
- Set-Cookie(cookie 设定):设定一个自定义 cookie,如果网页过期,存盘的 cookie 将被删除。例如:
<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT;path="/>
需使用 GMT 时间格式。 - content-Language(显示语言的设定):设定网页的显示语言。例如:
<meta http-equiv="Content-Language" content="zh-cn">
- content-Type(显示字符集的设定):设定页面使用的字符集。例如:
通过合理设置 <meta>
标签的属性,可以帮助搜索引擎更好地理解和索引网页,优化页面在不同设备上的显示,以及实现一些特定的功能,如自动刷新、设置字符集等。
例如,以下是一个包含了常见 <meta>
标签设置的 HTML 头部示例:
<head>
<meta charset="utf-8">
<meta name="description" content="这是一个示例网站,提供各种有用的信息">
<meta name="keywords" content="示例, 信息, 有用">
<meta name="author" content="作者姓名">
<meta http-equiv="refresh" content="30; url=https://example.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>