メタタグとは?ついに誰かが真実を語った。

メタタグとは?ついに誰かが真実を語った。

最近、部門はマイクロフロントエンドをプッシュしており、機能ごとに複数のサブアプリケーションを分割する必要があり、メインアプリケーションはロードプロセス中にロードに失敗することが多い。

最后更新 2021/12/23 21:02
隐冬
预计阅读 8 分钟
分类
フロント·エンド
标签
HTML Meta

1. 原因は、

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

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

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

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

ドキュメントのヘッダーは、ドキュメントのタイトル、ウェブ上の場所、他のドキュメントとの関係など、ドキュメントのさまざまなプロパティと情報を記述します。ドキュメントヘッダーに含まれるデータの大部分は、コンテンツとして読者には表示されません。

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

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

3. titleタグ

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

ドキュメントをユーザーのリンクリスト、お気に入り、ブックマークのリストに追加すると、タイトルがドキュメントのリンクのデフォルト名になります。

3.1. dir属性#dir属性#

规定元素中内容的文本方向rtlltr

3.2. lang属性

要素内の内容を指定する言語コード。

4. metaタグ

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

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

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

比如<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">,设置的项是Content-Security-Policy设置的值是upgrade-insecure-requests

4.1. http-equivプロパティ

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

4.1.1. content-type

比如:<meta http-equiv="content-type" content="text/html charset=utf8">可以用来声明文档类型、设字符集,目前content-type只能在 html 文档中使用。

これにより、ブラウザのヘッダー情報には

content-type: text/html charset=utf8

4.1.2. expires

ブラウザの有効期限を設定するために使用され、実際にはレスポンスヘッダーのexpires属性です。

<meta http-equiv="expires" content="31 Dec 2021" />
expires:31 Dec 2008

4.1.3. refresh

この設定では、5 秒で自動的に更新され、指定したWebページにジャンプします。URLを設定しない場合、ブラウザはこのページを更新します。

<meta http-equiv="refresh" content="5 url=http://www.zhiqianduan.com" />

4.1.4. window-target

現在のウィンドウにページを別個のページとして表示させることは、他の人がフレーム内で自分のページを呼び出すことを防ぐことができる。

<meta http-equiv="window-target" content="_top'>

4.1.5. pragma

ブラウザがローカルコンピュータのキャッシュからページのコンテンツにアクセスすることを禁止する

<meta http-equiv="pragma" content="no-cache" />

4.2. name属性

name属性主要用于描述网页,与对应的content中的内容主要是便于搜索引擎查找信息和分类信息用的, 用法与http-equiv相同,name设置属性名,content设置属性值。

4.2.1. author

author用来标注网页的作者

<meta name="author" content="aaa@mail.abc.com" />

4.2.2. description

description用来告诉搜素引擎当前网页的主要内容,是关于网站的一段描述信息。

<meta name="description" content="这是我的HTML" />

4.2.3. keywords

keywords设置网页的关键字,来告诉浏览器关键字是什么。是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类。

<meta name="keywords" content="Hello world" />

4.2.4. generator

現在のHTMLが作成されたツールを示し、実際には機能せず、通常はエディタによって自動的に作成されます。

<meta name="generator" content="vscode" />

4.2.5. revised

ページの最新バージョンを指定するには

<meta name="revised" content="V2,2015/10/1" />

4.2.6. robots

告诉搜索引擎机器人抓取哪些页面,all / none / index / noindex / follow / nofollow

<meta name="robots" content="all" />
  • all:文件将被检索,且页面上的链接可以被查询;
  • none:文件将不被检索,且页面上的链接不可以被查询;
  • index:文件将被检索;
  • follow:页面上的链接可以被查询;
  • noindex:文件将不被检索,但页面上的链接可以被查询;
  • nofollow:文件将不被检索,页面上的链接可以被查询。

4.3. schemeプロパティ

scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 head 标签的 profile 属性指定的概况文件中进行了定义。html5不支持该属性。

5. baseタグ

base标签定义了文档的基础url地址,在文档中所有的相对地址形式的url都是相对于这里定义的url而言的。为页面上的链接规定默认地址或目标。

<base href="http://www.w3school.com.cn/i/" target="_blank" />

baseタグに含まれる属性。

5.1. href

href是必选属性,指定了文档的基础url地址。例如,如果希望将文档的基础URL定义为https://www.abc.com,则可以使用如下语句:<base href="http://www.abc.com">如果文档的超链接指向welcom.html,则它实际上指向的是如下url地址:https://www.abc.com/welocme.html

5.2. target

定义了当文档中的链接点击后的打开方式_blank_self_parrent_top

6. リンクタグ

link用于引入外部样式表,在html的头部可以包含任意数量的linklink标签有以下常用属性。

<link type="text/css" rel="stylesheet" href="github-markdown.css" />

6.1. type

定义包含的文档类型,例如text/css

6.2. rel

定义html文档和所要包含资源之间的链接关系,可能的值有很多,最为常用的是stylesheet,用于包含一个固定首选样式的表单。

6.3. href

表示指向被包含资源的url地址。

7. スタイルタグ

内部スタイルシートのタグを記述します。

<style>
  body {
    background: #f3f5f9;
  }
</style>

8. scriptタグ

加载javascript脚本的标签。加载的脚本会被默认执行。默认情况下当浏览器解析到script标签的时候会停止html的解析而开始加载script代码并且执行。

<script src="script.js"></script>

8.1. type

指示脚本的MIME类型。

<script type="text/javascript">

8.2. async

规定异步执行脚本,仅适用于通过src引入的外部脚本。设置的async属性的script加载不会影响后面html的解析,加载是与文档解析同时发生的。加载完成后立即执行。执行过程会停止html文档解析。

<script async src="script.js"></script>

8.3. charset

外部スクリプトファイルで使用する文字エンコーディングを指定します。

<script type="text/javascript" src="script.js" charset="UTF-8"></script>

8.4. defer

规定是否对脚本执行进行延迟,直到页面加载为止。设置了defer属性的script不会阻止后面html的解析,加载与解析是共同进行的,但是script的执行要在所有元素解析完成之后,DOMContentLoaded事件触发之前完成。

<script defer src="script.js"></script>

8.5. language

规定脚本语言,与type功能类似,不建议使用该字段。

8.6. src

外部スクリプトのアドレス。

<script src="script.js"></script>

9. bgsound

WEBのBGM。

<bgsound src="music.mp4" autostart="true" loop="5"></bgsound>

9.1. src

表示背景音乐的url值。

9.2. autostart

是否自动播放ture自动播放,false不播放,默认为false

9.3. loop

是否重复播放,值为数字或者infinite,表示重复具体次或无限次。

** 出典 **

  1. w3c
  2. Wangkiwa

著者:冬の隠れ

リンクhttps//juejin.cn/post/6987919006468407309

ソース:希土類金

Keep Exploring

延伸阅读

更多文章
近期更新 2026/05/01

このサイトはついにAIで再構築されました。

Razor Pages、SEO、違法なキーワード検索フィルタリング、ロード最適化、コンテンツのホットアップデート、最小限のテストセット、ウェブストアの使用方法など、Code WFをAIでリファクタリングしました。

继续阅读
近期更新 2026/04/22

バージョン別の. NETサポート状況(250 7 0 7更新)

仮想マシンとテストマシンを使用して、各バージョンのオペレーティングシステムの. NETサポートをテストします。オペレーティングシステムのインストール後、対応するランタイムを測定し、スターダストエージェントをパスとして実行できます。

继续阅读