【HTML】meta 标签到底是做什么的

您所在的位置:网站首页 HTML中的meta标签 【HTML】meta 标签到底是做什么的

【HTML】meta 标签到底是做什么的

2023-09-03 10:10| 来源: 网络整理| 查看: 265

1. 起因

最近部门在推微前端,需要按功能拆分多个子应用,主应用在加载的过程中经常出现加载失败的问题。因为https地址中,如果加载了http资源,浏览器将认为这是不安全的资源,将会默认阻止。后来在文档中添加了完美解决。

此时我才发现自己对meta简直一无所知,本文主要介绍meta,顺带也会提一提head中的其它标签。如有不对请指出,最后欢迎点赞 + 收藏。

2. head 标签

head标签与html标签,body标签一样是一个文档必须的元素。

head标签用于定于文档头部信息,它是所有头部元素的容器。head中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分:base, link, meta, script, style, 以及 title。

注意:应该把 head 标签放在文档的开始处,紧跟在 html 后面,并处于 body 标签或 frameset 标签之前。

3. title 标签

title 定义文档的标题,它是 head 部分中唯一必需的元素。浏览器会以特殊的方式来使用标题,设置的内容不会显示在页面中,通常把它放置在浏览器窗口的标题栏或状态栏上,如设置为空标题展示当前页面的地址信息。

当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称。

1. dir 属性

规定元素中内容的文本方向rtl、ltr。

2. lang 属性

规定元素中内容的语言代码。

4. meta 标签

meta 元素往往不会引起用户的注意,但是meta对整个网页有影响,会对网页能否被搜索引擎检索,和在搜索中的排名起着关键性的作用。

meta有个必须的属性content用于表示需要设置的项的值。

meta存在两个非必须的属性http-equiv和name, 用于表示要设置的项。

比如,设置的项是Content-Security-Policy设置的值是upgrade-insecure-requests。

1. http-equiv 属性

http-equiv一般设置的都是与http请求头相关的信息,设置的值会关联到http头部。也就是说浏览器在请求服务器获取html的时候,服务器会将html中设置的meta放在响应头中返回给浏览器。常见的类型比如content-type, expires, refresh, set-cookie, window-target, charset, pragma等等。

1. content-type

比如:可以用来声明文档类型,设置字符集,content-type几乎所有的属性都可以在meta中进行设置。

这样设置浏览器的头信息就会包含:

content-type: text/html charset=utf8 复制代码 2. expires

用于设置浏览器的过期时间, 其实就是响应头中的expires属性。

复制代码 expires:31 Dec 2008 复制代码 3. refresh

该种设定表示5秒自动刷新并且跳转到指定的网页。如果不设置url的值那么浏览器则刷新本网页。

复制代码 4. window-target

强制页面在当前窗口以独立页面显示, 可以防止别人在框架中调用自己的页面。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3