以前フロントエンドを勉強していた時、メタタグについてはこの文しか知りませんでした。
<meta charset="UTF-8">
しかし、Web サイトを開くと、head タグの中にメタ タグの列があります。たとえば、私のブログ。
しかし、あまりにも不慣れだったので、冬休みの学習計画の前にメタタグを追加しました。
はじめに
w3school をチェックしたとき、最初の文の「メタデータ」が私に Google の旅を開始させました。そして、w3school の英語版で希望の結果を見つけることができました。 (中国語の w3school はメタ情報のことであり、Google にも Baidu にも該当するエントリはありません。ただし、メタデータについては Google で詳しく説明されているため、ここでは英語版 W3school の説明を流用します。)
< ;meta> タグは HTML ドキュメントに関するメタデータを提供します。メタデータはページには表示されませんが、機械で解析可能です。
キーがメタデータであることは難しくありません。中国語ではメタデータと呼ばれ、データを説明するために使用されるデータです。ページには表示されませんが、マシンは認識します。このようにメタタグの機能が分かりやすいです。
Use
メタ要素は通常、ページの説明、キーワード、ドキュメントの作成者、最終更新日、その他のメタデータを指定するために使用されます。
メタデータは、ブラウザー (コンテンツの表示方法やページのリロード方法)、検索エンジン (キーワード)、またはその他の Web サービスで使用できます
この文では、メタ タグの使用法を簡潔かつ明確に紹介します。
翻訳: メタは、ページの説明、キーワード、最終更新日、その他のメタデータを定義するためによく使用されます。このメタデータは、ブラウザー (ページのレイアウトまたはリロード方法)、検索エンジン、およびその他の Web サービスに提供されます。
は
meta タグで構成され、http-equiv 属性と name 属性の 2 つの属性があります。
1. name 属性
name 属性は、主に Web ページのキーワード、説明など、Web ページを記述するために使用されます。対応する属性値は content です。 content 内のコンテンツは、名前入力タイプの具体的な説明であり、検索エンジンがクロールするのに便利です。
meta タグの name 属性の構文形式は次のとおりです。
<meta name="参数"content="具体的描述">。
name 属性には次のパラメータがあります。 (A ~ C は共通の属性です)
A. キーワード (キーワード)
説明: Web ページのキーワードを検索エンジンに伝えるために使用されます。
例:
<meta name="keywords"content="Lxxyx,博客,文科生,前端">
B. 説明 (Web サイトのコンテンツの説明)
説明: Web サイトのメインコンテンツを検索エンジンに伝えるために使用されます。
例:
<meta name="description"content="文科生,热爱前端与编程。目前大二,这是我的前端博客">
C. ビューポート (モバイル端末ウィンドウ)
説明: この概念は比較的複雑なので、次のブログ投稿で詳しく説明します。
この属性は、モバイル Web ページのデザインでよく使用されます。ビューポートは、ブートストラップや AmazeUI などのフレームワークを使用するときに使用されてきました。
例 (一般的な例):
<meta name="viewport" content="width=device-width, initial-scale=1">
D. ロボット (検索エンジン クローラーのインデックス作成方法を定義します)
説明: ロボットはクローラーにどのページを指示するために使用されます。インデックスを付ける必要がある 、インデックスを付ける必要のないページ。
コンテンツのパラメータには、all、none、index、noindex、follow、および nofollow が含まれます。デフォルトはすべてです。
例:
<meta name="robots" content="none">
特定のパラメータは次のとおりです:
1.none: 検索エンジンはこの Web ページを無視します。これは、noindex、nofollow と同等です。
2.noindex: 検索エンジンはこのページをインデックスしません。
3.nofollow: 検索エンジンは、この Web ページのリンク インデックスを通じて他の Web ページの検索を継続しません。
4.all: 検索エンジンは、この Web ページにインデックスを付け、この Web ページを介してリンクのインデックスを作成し続けます。これは、インデックスとフォローに相当します。
5.index: 検索エンジンがこのページにインデックスを付けます。
6.follow: 検索エンジンは、この Web ページのリンク インデックスを通じて他の Web ページを検索し続けます。
E. author (作成者)
説明: Web ページの作成者をマークするために使用されます
例:
<meta name="author"content="Lxxyx,841380530@qq.com">
F. )
説明: Web ページがどのようなソフトウェアで作られているかを示すために使用されます。
例 (このように記述できるかどうかはわかりません):
<meta name="generator"content="Sublime Text3">
G. copyright (copyright)
説明: 著作権情報をマークするために使用されます
例:
<meta name="copyright"content="Lxxyx"> //代表该网站为Lxxyx个人版权所有。
H. revisit-after (検索エンジン クローラーの再訪問時間)
注: ページが頻繁に更新されない場合、検索エンジンの負荷を軽減するために、クローラーによるサーバーへの負荷を軽減するために、クローラーの再訪問時間を設定できます。再訪問時間が短すぎる場合、クローラは定義されたデフォルト時間に訪問します。
例:
<meta name="revisit-after" content="7 days" >
I. レンダラ (デュアルコアブラウザのレンダリング方法)
説明: レンダラはデュアルコアブラウザ用に用意されており、デフォルトのレンダリングモードを指定するために使用されます。デュアルコアブラウザのページをレンダリングする方法。たとえば、360 ブラウザです。
例:
<meta name="renderer" content="webkit"> //默认webkit内核<meta name="renderer" content="ie-comp"> //默认IE兼容模式<meta name="renderer" content="ie-stand"> //默认IE标准模式
2. http-equiv 属性
紹介の前に、ちょっとした話をさせてください。ドキュメントやブログで http-equiv の紹介を読んでいると、次のような文章があります。
http-equiv は、名前が示すように、http のファイルヘッダー機能に相当します。
初めてこの文を見たとき、私は混乱しました。いろいろな専門用語を見ると、英語の正式名称を習慣的に覚えてしまうからです。 equivの正式名称は「equivalent」で、等しい、同等という意味です。その時、私の心に大きな混乱が生じました:「HTTP は等しいのか?
」后来还准备去Segmentfault提问来着。结果在写问题的时候,突然反应出equivalent还有相当于的意思。意思就是相当于http的作用。至于文件头是哪儿出来的,估计是从其作用来分析的。我认为顾名思义并不能得出"相当于http的文件头作用"这个论断。
这个我所认为的http-equiv意思的简介。
相当于HTTP的作用,比如说定义些HTTP参数啥的。
meta标签中http-equiv属性语法格式是:
<meta http-equiv="参数" content="具体的描述">
其中http-equiv属性主要有以下几种参数:
A. content-Type(设定网页字符集)()推荐使用HTML5的方式)
说明:用于设定网页字符集,便于浏览器解析与渲染页面
举例:
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML,不推荐<meta charset="utf-8"> //HTML5设定网页字符集的方式,推荐使用UTF-8
B. X-UA-Compatible(浏览器采取何种版本渲染当前页面)
说明:用于告知浏览器以何种版本来渲染页面。(一般都设置为最新模式,在各大框架中这个设置也很常见。)
举例:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面
C. cache-control(指定请求和响应遵循的缓存机制)
用法1.说明:指导浏览器如何缓存某个响应以及缓存多长时间。这一段内容我在网上找了很久,但都没有找到满意的。
最后终于在Google Developers中发现了我想要的答案。
举例:
<meta http-equiv="cache-control" content="no-cache">
共有以下几种用法:
no-cache: 先发送请求,与服务器确认该资源是否被更改,如果未被更改,则使用缓存。
no-store: 不允许缓存,每次都要去服务器上,下载完整的响应。(安全措施)
public : 缓存所有响应,但并非必须。因为max-age也可以做到相同效果
private : 只为单个用户缓存,因此不允许任何中继进行缓存。(比如说CDN就不允许缓存private的响应)
maxage : 表示当前请求开始,该响应在多久内能被缓存和重用,而不去服务器重新请求。例如:max-age=60表示响应可以再缓存和重用 60 秒。
用法2.(禁止百度自动转码)参考链接:HTTP缓存
说明:用于禁止当前页面在移动端浏览时,被百度自动转码。虽然百度的本意是好的,但是转码效果很多时候却不尽人意。所以可以在head中加入例子中的那句话,就可以避免百度自动转码了。
举例:
<meta http-equiv="Cache-Control" content="no-siteapp" />
D. expires(网页到期时间)
说明:用于设定网页的到期时间,过期后网页必须到服务器上重新传输。
举例:
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
E. refresh(自动刷新并指向某页面)
说明:网页将在设定的时间内,自动刷新并调向设定的网址。
举例:
<meta http-equiv="refresh" content="2;URL=http://www.lxxyx.win/"> //意思是2秒后跳转向我的博客
F. Set-Cookie(cookie设定)
说明:如果网页过期。那么这个网页存在本地的cookies也会被自动删除。
<meta http-equiv="Set-Cookie" content="name, date"> //格式<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具体范例
最后
暂时总结的就这么多了,meta标签的自定义属性实在太多了。所以只去找了常用的一些,还有像Window-target这样已经基本被废弃的属性,我也没有添加。
一开始以为一两个小时就能学习完毕,结果没想到竟然花了五六个小时,各处查资料,推敲文字。敲击文字的时候,也感觉自己学习了非常多。比如基本的SEO,HTTP协议的再次理解等。
因为经验尚浅,所以如果有出错的地方,希望各位能帮忙指正。
最后附上本人博客地址和原文链接,希望能与各位多多交流。
Lxxyx的前端乐园
寒假前端学习(1)——HTML meta标签总结

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1)w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2)リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3)HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1)HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2)コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3)HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの将来は、無限の可能性に満ちています。 1)新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2)Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3)パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

htmlisnotaprogramminglanguage; itisamarkuplanguage.1)htmlStructuresandformatswebcontentusingtags.2)ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)
