【HTML】meta 标签

【原文链接】https://www.w3schools.com/tags/tag_meta.asp

【前言】最近把500个网页除了<script>和样式的标签以外的文本内容爬取下来，然后利用Hierarchical Clustering进行了分类。...结果就像skr粑粑一样（如下图），太不准了。利用jieba分词后，提取出来的文档集让人不禁感叹，介skr什么鬼（如下文）。领导建议更精准地抓取文本内容，所以就有了这篇关于HTML中<meta> 标签的翻译。

热门
课程
网站
首页
Java
开发
数据
Web
前端
UI
设计
linux
云
计算
网络营销
电子商务
更多
课程
 
联系电话
400
711
4006
客服
QQ
1371014797
shadow
浙江
课工场
线下
服务中心
出口
2000
 
英尺
shadow
出口
©
 
2018
 
Baidu
 
 
GS
2016
2089
号
 
 
甲测
资字
1100930
 
 
京
ICP
证
030173
号
 
 
Data
 
©
 
长地
万方
中心
简介
课程
介绍
名师
风采
就业
服务
常见问题
热门
课程
more
数据
Java
数据
专业版
云
计算
web
前端
UI
设计
网络营销
电子商务
人群
分类
more
高中生
技术
至上
学历
低
不用
大学生
就业
新
选择
月薪
万
简单
转行
学习
高薪
就业
迷茫
男生
升职
加薪
永不
女生
敢打敢拼
发展
出路
在职
充电
福利待遇
工作
稳定
名师
风采
more
就业
服务
在线
咨询
报名
学习
理论
学习
实践
操作
大型项目
实训
毕业
项目
面试
指导
模拟
面试
推荐
就业
招聘会
学员
推
合作
企业
直
推
人才
外包
就业
关怀
常见问题
学
技术
前途
女生
适合
学
IT
选择
培训
机构
英语
不好
能学
云
计算
IT
行业
前景
转行
学
IT
基础
学会
浙江
课工场
线下
服务中心
咨询电话
400
711
4006
校区
地址
杭州市
拱墅区
湖州
街
沈半路
29
号
时瑞
大厦
6F

Example

形容元数据 within an HTML document:

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Definition and Usage

元数据是用于描述数据的数据.

The <meta> tag provides metadata 关于 HTML 文档. Metadata 不会显示在网页上, 但是可以被机器解析.

Meta elements are typically used to specify page description (描述), keywords (关键词), author of the document, last modified, and other metadata.

The metadata 可以被浏览器 (如何展示内容或重新加载页面), 搜索引擎 (关键字), or other web services 来使用.

HTML5 introduced a method to let web designers take control over the viewport (用户可见的网页的区域), through the <meta> tag (See "Setting The Viewport" example below).

Browser Support

Element	Chrome	IE / Edge	Firefox	Safari	Opera
<meta>	Yes	Yes	Yes	Yes	Yes

Tips and Notes

Note: <meta> tags 永远在 <head> 元素的里面.

Note: Metadata is always passed as name/value pairs.

Note: 如果定义了 name 或 http-equiv 属性，那么必须定义 content 属性。如果没有定义 name 或 http-equiv，那不能定义 content.

Setting The Viewport

HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.

The viewport is the user's visible area of a web page. 它是自适应的, and will be smaller on a mobile phone than on a computer screen.

你应该在所有网页中包含下面的 <meta> viewport 元素:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

A <meta> viewport 元素会告诉浏览器如何控制网页的 dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part 会在浏览器第一次加载页面的时候 sets the 初始缩放级别.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.

You can read more about the viewport in our Responsive Web Design - The Viewport Tutorial.

Differences Between HTML 4.01 and HTML5

HTML5 不支持 scheme 属性.

HTML5 有一个新的属性, charset, which makes it easier to define charset:

HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
HTML5: <meta charset="UTF-8">

Differences Between HTML and XHTML

In HTML the <meta> tag has no end tag.

In XHTML the <meta> tag must be properly closed.

Examples

Example 1 - 为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

Example 2 - 为网页定义描述:

<meta name="description" content="Free Web tutorials on HTML and CSS">

Example 3 - Define the author of a page:

<meta name="author" content="John Doe">

Example 4 - Refresh document every 30 seconds:

<meta http-equiv="refresh" content="30">

Example 5 - Setting the viewport to make your website look good on all devices:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Attributes

= New in HTML5.

Attribute	Value	Description
charset	character_set	Specifies the character encoding for the HTML document
content	text	给定和 http-equiv 或 name 属性相关的值
http-equiv	content-type default-style refresh	为 content 属性的 information/value 提供一个 HTTP 头
name	application-name author description generator keywords viewport	为元数据指定 name
scheme	format/URI	Not supported in HTML5. Specifies a scheme to be used to interpret the value of the content attribute

Global Attributes

The <meta> tag also supports the Global Attributes in HTML.

HTML tutorial: HTML Head

HTML DOM reference: Meta Object

Default CSS Settings

None.