CSS里的几个小知识

在 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 设置初始缩放级别。
  • 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">

通过合理设置 <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>

相关推荐

  1. CSS知识

    2024-07-09 16:48:13       8 阅读
  2. C++ easyX程序(介绍函数使用)

    2024-07-09 16:48:13       44 阅读
  3. 【小说拉期待感技巧】

    2024-07-09 16:48:13       22 阅读
  4. 白学知识[css3轮播]

    2024-07-09 16:48:13       37 阅读
  5. 面试问题

    2024-07-09 16:48:13       47 阅读

最近更新

  1. 河南萌新联赛2024第(一)场:河南农业大学

    2024-07-09 16:48:13       0 阅读
  2. 解决echarts在uniapp里tooltip,legend不能点击的问题

    2024-07-09 16:48:13       0 阅读
  3. web学习笔记(八十一)

    2024-07-09 16:48:13       0 阅读
  4. 这些库都有什么应用场景呢

    2024-07-09 16:48:13       0 阅读
  5. 安卓逆向入门(3)------Frida基础

    2024-07-09 16:48:13       0 阅读
  6. SDL常用结构体和函数接口

    2024-07-09 16:48:13       0 阅读

热门阅读

  1. 社交媒体原生应用开发:Facebook的创新之路

    2024-07-09 16:48:13       10 阅读
  2. Gunicorn+Flask+Docker初体验

    2024-07-09 16:48:13       7 阅读
  3. 常用目标检测的格式转换脚本文件txt,json等

    2024-07-09 16:48:13       8 阅读
  4. 信息收集-arping

    2024-07-09 16:48:13       7 阅读
  5. flutter如何实现点击一文字后 打开对应的超链接

    2024-07-09 16:48:13       8 阅读
  6. TCP协议是安全的吗?

    2024-07-09 16:48:13       21 阅读
  7. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-07-09 16:48:13       23 阅读
  8. 【Python教程】压缩PDF文件大小

    2024-07-09 16:48:13       22 阅读
  9. 通过文章id递归查询所有评论(xml)

    2024-07-09 16:48:13       27 阅读