meta 标签到底是做什么的,我竟一无所知
1. 起因
最近部门在推微前端,需要按功能拆分多个子应用,主应用在加载的过程中经常出现加载失败的问题。因为https地址中,如果加载了http资源,浏览器将认为这是不安全的资源,将会默认阻止。后来在文档中添加了<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
完美解决。
此时我才发现自己对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
, 用于表示要设置的项。
比如<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
,设置的项是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
比如:<meta http-equiv="content-type" content="text/html charset=utf8">
可以用来声明文档类型,设置字符集,content-type
几乎所有的属性都可以在meta
中进行设置。
这样设置浏览器的头信息就会包含:
content-type: text/html charset=utf8
2. expires
用于设置浏览器的过期时间, 其实就是响应头中的expires属性。
<meta http-equiv="expires" content="31 Dec 2021">expires:31 Dec 2008
3. refresh
该种设定表示5秒自动刷新并且跳转到指定的网页。如果不设置url的值那么浏览器则刷新本网页。
<meta http-equiv="refresh" content="5 url=http://www.zhiqianduan.com">
4. window-target
强制页面在当前窗口以独立页面显示, 可以防止别人在框架中调用自己的页面。
<meta http-equiv="window-target" content="_top'>
5. pragma
禁止浏览器从本地计算机的缓存中访问页面的内容
<meta http-equiv="pragma" content="no-cache">
2. name 属性
name
属性主要用于描述网页,与对应的content
中的内容主要是便于搜索引擎查找信息和分类信息用的, 用法与http-equiv
相同,name
设置属性名,content
设置属性值。
1. author
author
用来标注网页的作者
<meta name="author" content="aaa@mail.abc.com">
2. description
description
用来告诉搜素引擎当前网页的主要内容,是关于网站的一段描述信息。
<meta name="description" content="这是我的HTML">
3. keywords
keywords
设置网页的关键字,来告诉浏览器关键字是什么。是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类。
<meta name="keywords" content="Hello world">
4. generator
表示当前html
是用什么工具编写生成的,并没有实际作用,一般是编辑器自动创建的。
<meta name="generator" content="vscode">
5. revised
指定页面的最新版本
<meta name="revised" content="V2,2015/10/1">
6. robots
告诉搜索引擎机器人抓取哪些页面,all / none / index / noindex / follow / nofollow
。
<meta name="robots" content="all">
all
:文件将被检索,且页面上的链接可以被查询;none
:文件将不被检索,且页面上的链接不可以被查询;index
:文件将被检索;follow
:页面上的链接可以被查询;noindex
:文件将不被检索,但页面上的链接可以被查询;nofollow
:文件将不被检索,页面上的链接可以被查询。
3. scheme 属性
scheme
属性用于指定要用来翻译属性值的方案。此方案应该在由 head
标签的 profile
属性指定的概况文件中进行了定义。html5
不支持该属性。
5. base 标签
base
标签定义了文档的基础url
地址,在文档中所有的相对地址形式的url
都是相对于这里定义的url
而言的。为页面上的链接规定默认地址或目标。
<base href="http://www.w3school.com.cn/i/" target="_blank" />
base标签包含的属性。
1. href
href
是必选属性,指定了文档的基础url
地址。例如,如果希望将文档的基础URL定义为https://www.abc.com
,则可以使用如下语句:<base href="http://www.abc.com">
如果文档的超链接指向welcom.html
,则它实际上指向的是如下url
地址:https://www.abc.com/welocme.html
。
2. target
定义了当文档中的链接
点击后的打开方式_blank
,_self
,_parrent
,_top
。
6. link 标签
link
用于引入外部样式表,在html
的头部可以包含任意数量的link
,link
标签有以下常用属性。
<link type="text/css" rel="stylesheet" href="github-markdown.css">
1. type
定义包含的文档类型,例如text/css
2. rel
定义html
文档和所要包含资源之间的链接关系,可能的值有很多,最为常用的是stylesheet
,用于包含一个固定首选样式的表单。
3. href
表示指向被包含资源的url
地址。
7. style 标签
编写内部样式表的标签。
<style> body { background: #f3f5f9; }</style>
8. script 标签
加载javascript
脚本的标签。加载的脚本会被默认执行。默认情况下当浏览器解析到script
标签的时候会停止html
的解析而开始加载script
代码并且执行。
<script src="script.js"></script>
1. type
指示脚本的MIME
类型。
<script type="text/javascript">
2. async
规定异步执行脚本,仅适用于通过src
引入的外部脚本。设置的async
属性的script
加载不会影响后面html
的解析,加载是与文档解析同时发生的。加载完成后立即执行。执行过程会停止html
文档解析。
<script async src="script.js"></script>
3. charset
规定在外部脚本文件中使用的字符编码。
<script type="text/javascript" src="script.js" charset="UTF-8"></script>
4. defer
规定是否对脚本执行进行延迟,直到页面加载为止。设置了defer
属性的script
不会阻止后面html
的解析,加载与解析是共同进行的,但是script
的执行要在所有元素解析完成之后,DOMContentLoaded
事件触发之前完成。
<script defer src="script.js"></script>
5. language
规定脚本语言,与``type```功能类似,不建议使用该字段。
6. src
外部脚本的地址。
<script src="script.js"></script>
9. bgsound
网站背景音乐。
<bgsound src="music.mp4" autostart="true" loop="5">
1. src
表示背景音乐的url
值。
2. autostart
是否自动播放ture
自动播放,false
不播放,默认为false
。
3. loop
是否重复播放,值为数字或者infinite
,表示重复具体次或无限次。
meta 标签到底是做什么的,我竟一无所知相关推荐
- 移动平台的meta标签-----神奇的功效
对于桌面平台web布局中大家对meta标签再熟悉不过了,它永远位于 head 元素内部,对做SEO的朋友一定对meta有种特殊的感情吧,今天我们就来说说移动平台的meta标签,在移动平台meta标签究 ...
- jekyll 博客对搜索引擎的SEO提升方法--head中的meta标签和Jekyll SEO Tag
我用GitHub Pages搭建了jekyll的博客后,想要提升自己博客的SEO,尤其是对搜索引擎:百度.谷歌. head中的meta标签 说道提升SEO,必然要提到HTML中的head标签中的met ...
- HTML meta标签总结与属性使用介绍
转载自: https://segmentfault.com/a/1190000004279791 之前学习前端中,对meta标签的了解仅仅只是这一句. <meta charset="U ...
- meta标签的使用方法(PC端)
<!DOCTYPE html> <html lang="en"> <head><!--设定页面使用的字符集--><meta h ...
- 如何为 Drupal 添加简单的 SEO META 标签(title keywords des...
2019独角兽企业重金招聘Python工程师标准>>> Drupal 做为优秀的世界级开源 CMS 建站系统,自然有很多开发者贡献与 SEO 相关的模块插件扩展例如:用来批量自定义 ...
- 移动端适配--meta标签玩的是什么
基本一直都在做移动端的开发,rem布局也写了很久,不过对于实现的原理有些模棱两可的盲点,自己总结一下留着以后回顾. 本文分以下几个层面,主打用最最通俗的语言来阐述. 布局小例子 viewport作用 ...
- html meta页面自适应,【转载·收藏】 html5手机网站自适应需要加的meta标签
webapp开发初期,会碰到在pc端开发好的页面在移动端显示过大的问题,这里需要在html head中加入meta标签来控制缩放 下面是对于这个标签的具体说明: viewport 语法介绍: cont ...
- SEO | 重新认识一下Meta标签
很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是HTML语言HEAD区的一个辅 ...
- 常用SEO优化之META标签
之前对meta标签的理解只有<meta charset="UTF-8">和移动端适口<meta name="viewport" content ...
最新文章
- gen_event中的handler和supervised handler
- 20145205《Java程序设计》课程总结
- 枚举类型和各种类型之间转换
- 七十二、区间合并,插入求交集, 删除被覆盖区间
- PHPmysqli的 预处理执行查询语句
- salesforce 零基础开发入门学习(十四)salesforce中工厂模式的运用
- python可以开多少线程_python爬虫可以开多少线程?
- Unity3D基础11:Rigidbody物理类组件
- java8中class怎么用_如何在Java中使用Class T?
- 技术图文:基于“科比投篮”数据集学Pandas
- 2021年华为杯数学建模竞赛E题——信号干扰下的超宽带(UWB)精确定位问题
- IsPostBack深入探讨
- U盘在windows电脑中毒,插入Macbook变成exe文件
- 筱筱笔记:npm发包流程
- 高效能人士的七个习惯--读后感
- 【笔记】不一样的 双11 技术,阿里巴巴经济体云原生实践(上)
- HTTP状态 500 - 内部服务器错误java.lang.NullPointerException
- 基于 VPX 总线的工件台运动控制系统研究与开发-以光刻运动台为例(一)
- GDAL+Python | 实现栅格影像处理之栅格矢量化及矢量栅格化
- GCPF【异常检测:Density-based】
热门文章
- js向上向下取整_js四舍五入、向上取整、向下取整
- 第 24 章 基于 Simulink 进行图像和视频处理--matlab深度学习实战整理
- python -【mongo】 处理ObjectID (ObjectID和字符串之间的转换)
- PBFT共识算法的个人见解
- 操作系统:银行家算法模拟,C语言实现
- 【无标题】编写一个程序提示用户输入一个整数,然后显示这个整数的所有数字的和。
- maven中使用mybatis-plus
- 三星com.android,三星生活助手(com.samsung.android.app.sreminder) - 7.0.00.9 - 应用 - 酷安
- Maven中profile和filtering实现多个环境下的属性过滤
- 《Urban stranger》——都市异乡人{英汉互译}【都市时代,异乡异客的我们】