HTML文档中的部分元素说明
# meta 元素
# meta 元素用于定义元数据
head 中用于定义元数据,比如title
,style
,link
等标签,meta
标签用于定义那些不能使用其他定元相关(meta-related)元素定义的任何元数据信息
# meta 元素定义的元数据的类型包括以下几种
- 如果设置了
charset
属性,meta 元素是一个字符集声明,告诉文档使用哪种字符编码
例如:<meta charset="UTF-8" />
- 如果设置了
http-equiv
属性,meta 元素则是编译指令
例如:<meta http-equiv="X-UA-Compatible" content="IE=edge" />
- 如果设置了
name
属性,meta 元素提供的是文档级别的元数据,应用于整个页面
例如:<meta name="viewport" content="width=device-width, initial-scale=1.0" />
# meta 元素的 http-equiv 属性
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
在编辑器中自动生成的 HTML 结构中会存在这样一段代码,这段代码在官方文档中的解释如下
- 告知 IE 浏览器去模仿哪一个浏览器行为
- IE=edge, 告知 IE8 去使用最高有效模仿形式来模仿
# meta 元素的 name 属性
meta 元素中 name 属性的取值有很多
文档地址:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta/name
name 常用的取值
- robots: 爬虫、协作搜寻器或者‘机器人’对此页面的行为或者应当遵守的规则
- author: 文档作者的名字
- Copyright: 版权声明
- description: 一段对文档的简短精确,对页面内容的描述,比如在一些浏览器中,Firefox 和 Opera,将其用作书签的默认描述
- keywords: 与页面内容相关的关键词,使用逗号分隔。某些搜索引擎会进行收录
# link 元素
# link 图标
favicon
称为站点图标或者页面图标,常见的使用方式
<link rel="icon" href="http://......"/>
,
也存在一些兼容性的写法
如果代码中没有明确的设置这段代码但是依然可以正常的显示网站上说明
上面的代码另一个局限性就是将 favicon 关联到了某个特定的 HTML 或者 XHTML 文档上,为避免这一点,favicon.ico 文件应置于根目录下,多数浏览器将自动检测并使用它
# link 其它设置
<link rel="alternate" href="https://pvp.qq.com/m/">
这里说明有另外一个可替换的网站可以选择
# CSS 样式的字符编码
浏览器会按照如下的顺序执行对应的方法(一旦找到就停止并得出结果)
- 文件的开头的
Unicode Byte-order
(字节顺序标记)字符值 - 由
Content-Type: HTTP Header
中的 charset 属性给出的值或用于提供样式表的协议中的等效值 - CSS 文件开头使用
@charset 'UTF-8'
,开发中推荐使用 - 使用参考文档定义的字符编码,link 元素的 charset 属性,当前方法已在 HTML5 标准中废除
- 假设文档是 UTF-8
上次更新: 2022/08/03, 08:35:34