This article introduces the role of html meta tags and how to use them. It also introduces many methods of use. I hope you can practice these codes several times by yourself. The explanations are beside it. Finally, it also introduces the HTML meta tags. The meta settings of several famous websites.
Let’s start by talking about the role of the meta tag:
The meta tag is a key tag in the head area of the HTML tag. It is located in the < of the HTML document. between head> and
When checking w3school, the "metadata" in the first sentence made me start my Google journey. Then I successfully found the results I wanted in the English version of w3school. (The Chinese w3school refers to meta-information, and neither Google nor Baidu has relevant entries. However, metadata is explained in detail on Google. Therefore, the explanation of the English version of W3school is used here.)
It is not difficult to see that among them The key is metadata, which is called metadata in Chinese and is the data used to describe data. It won't show up on the page, but the machine will recognize it. In this way, the function of meta tags is easy to understand.
meta is often used to define page descriptions, keywords, last modified date, and other metadata. This metadata will serve browsers (how the page is laid out or reloaded), search engines and other web services.
Introduction to the use of meta tags in HTML:
<head> <! - 声明文档使用的字符编码 - > <meta charset =“utf-8”/> <! - 页面关键词 - > <meta name =“keywords”content =“个人活动发布,会办app,活动管理,会议管理,社群管理“/> <! - 页面描述 - > <meta name =”description“content =”发布个人会议,发布公司会议,w我们都可以帮你找到合适的会议地点和参会观众“> <! - 网页作者 - > <meta name =”author“content =”xin1642868874@163.com“> <! - 搜索引擎抓取robotterms是一组使用逗号(, )分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。 - > <meta name =“机器人“content =”索引,按照“> <! - 页面重定向和刷新 - > <meta http-equiv =”refresh“content =”0; url =“/> <! - 禁止Chrome浏览器中自动提示翻译 - > <meta name =“google”value =“notranslate”> <! - - 禁止百度转码 - > <meta http-equiv =“Cache-Control”content =“no-siteapp”> <! - 自定义标签:app版本号说明 - > <meta name =“app-version”content =“1.13.3”> <title>php中文网</title> </head>
The above are all about the role and use of HTML meta tags. There are many attributes, but those are important now It's still a little early for us to learn this.
Let’s share the meta files of the homepages of several famous websites:
The meta settings of JD.com’s homepage:
<meta charset="gbk"> <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!"> <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">
Meta setting of Taobao homepage:
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <meta name="spm-id" content="a21bo"> <meta name="description" content="淘宝网 - 亚洲最大、最安全的网上交易平台,提供各类服饰、美容、家居、数码、话费/点卡充值… 8亿优质特价商品,同时提供担保交易(先收货后付款)、先行赔付、假一赔三、七天无理由退换货、数码免费维修等安全交易保障服务,让你全面安心享受网上购物乐趣!"> <meta name="keyword" content="">
Meta setting of Youku homepage:
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="title" content="优酷-中国领先视频网站,提供视频播放,视频发布,视频搜索 - 优酷视频" /> <meta name="keywords" content="视频,视频分享,视频搜索,视频播放,优酷视频" /> <meta name="description" content="视频服务平台,提供视频播放,视频发布,视频搜索,视频分享" />
In addition to those explained above, this is also commonly used when making up one The attribute
X-UA-Compatible in the meta tag is a special tag for IE8, which is used to specify the IE8 browser to simulate the rendering method of a specific version of the IE browser to solve some compatibility issues.
<meta http-equiv="X-UA-Compatible" content="IE=7">
The above code tells the IE browser that IE8/9 will use the IE7 engine to render the page regardless of whether the document standard is declared with a DTD.
By looking at the meta settings of large websites, we can see that the three commonly used ones are: X-UA-Compatible, keywords, and description. We must learn to use them well.
【Editor’s Recommendation】
What does the head tag in HTML mean? An article teaches you how to use the head tag correctly
Should hackers learn PHP or python? Rational analysis of ten differences between PHP and python
The above is the detailed content of What is the function of HTML meta tag? Introduction to the use of html meta tags. For more information, please follow other related articles on the PHP Chinese website!