HTML中标签如何正确使用

时间 2019-11-11

标签 html 标签如何正确使用栏目 HTML 繁體版

原文原文链接

HTML中<meta>标签如何正确使用

　　若是咱们在浏览器中按下F12或者Ctrl+shift+J，即可以打开开发者工具，在element中便可看到<head>元素中有很多<meta>元素。对于网页而言，<meta>元素是必不可少的。咱们在建立一个html5文档时，就会发现相似于<meta charset="UTF-8">这样的标签，来规定解析文档的字符类型。那么，它还有哪些做用呢？下面，我将一探究竟！我会经过下面几个部分来说解，若是你但愿直接看后面部分的内容，能够直接点击下面的文字。javascript

<meta>标签的基本介绍
<meta>标签中的属性列举
<meta>标签中的name属性应用
<meta>标签中的http-equiv属性应用
<meta>标签中在移动端的使用

第一部分：<meta>标签的基本介绍

　　<meta>标签是HTML网页源代码中的一个重要的html标签。META便签用来描述一个HTML网页文档的属性，例如做者、日期和时间、关键词、页面刷新。除此以外，<meta>标签用于搜索引擎优化（seo）。它位于HTML文档中<head>元素内，虽然它提供的信息用户不可见，但它倒是文档最基本的元信息。html

第二部分：<meta>标签中的属性列举

　　<meta>标签中属性咱们能够分为必选的属性和可选的属性。html5

1.必选属性：content属性。该属性是为了定义与http-equiv或者name属性相关的元信息，其中的内容是为了便于搜索机器人查找信息和分类使用的。java

2.可选属性：web

name属性。该属性主要用于描述网页。name属性的值能够有：author、description、keywords、generator等等
http-equiv属性。该属性至关于http的头文件做用，能够向浏览器返回一些有用的信息，以帮助正确和精确的显示内容。http-equiv属性的值能够有content-type、expires、refresh等等。

第三部分：<meta>标签中的name属性应用

　　A keywords（关键字：告诉浏览器你的网页的关键字是什么）

　　B description（描述：告诉浏览器你的网页的主要内容是什么）

　　　　这两个属性值我放在一块儿说，是由于它们的做用很是类似。由于设置这两个值能够帮助你的主页被各大搜索引擎登录，提升网站的访问量。因而这两个属性值的设置是格外重要的。由于按照搜索引擎的工做原理，搜索引擎会首先排除机器人自动检索页面中的keywords和description，并将其加入本身的数据库，而后根据关键词的密度将网站排序数据库

咱们能够像下面这样使用：浏览器

<meta name="keywords" content="关于meta标签,网页,918之初">
<meta name="description" content="HTML中<meta>标签如何正确使用">

　　注意：keywords的content内容要限制在36个字。缓存

　　　　　 description的content内容要限制在76个字。服务器

　　值得注意的是，name必定要和content属性配合使用。app

　　C robot（机器人向导：用于高速机器人哪些页面须要索引，哪些页面不须要索引）

　　该属性的值有all、none、index、noindex、follow和nofollow。默认为all。

　　设定为all：文件将被检索，且页面上的连接能够被查询；

　　设定为none：文件将不被检索，且页面上的连接不能够被查询；

　　设定为index：文件将被检索；

　　设定为follow：页面上的连接能够被查询；

　　设定为noindex：文件将不被检索，但页面上的连接能够被查询；

　　设定为nofollow：文件将不被检索，页面上的连接能够被查询。

　　咱们能够像下面这样使用：

<meta name="robot" content="none">

　　即搜索机器人在自动检索页面时，将不会检索到这个页面。

　　D author（做者：用于告诉搜索机器人网页的做者）

<meta name="author" content="somebody">

第四部分：<meta>标签中的http-equiv属性应用

A.content-type(文档内容类型：用于设定文档的类型和字符集)

　　这是meta便签中最为常见的一中设置，在制做网页时，咱们在纯HTML代码可看到它是定义你的网页的语言，当浏览器访问到你的网页时，浏览器便会根据此来识别并进行相应的设定，不然，浏览器就会使用默认的设定方法。

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

B.expires(期限：能够用于设定网页的到期期限)

　　一旦网页过时，那么就必须在服务器上从新刷新而不能经过缓存获取网页。值得注意的是：其中设置的时间必须是GMT格式。

<meta http-equiv="expires" content="Fri,12 Jan 2001 15:15:15 GMT">

　　若是你在浏览器中设置浏览器网页先从本地缓存中的页面获取，那么当浏览时，就会只从本地缓存获取，直到meta中设置的时间到期，浏览器才会获取新页面。

C.pragma（cashe模式：便是否从缓存中访问网页内容）

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

　这行代码表示不从缓存获取页面，因而访问者将没法脱机工做。

D.refresh(刷新：等待必定时间自动刷新或跳转到其余url)

<meta http-equiv="refresh" content="1; url=https://www.baidu.com"/>

第五部分：<meta>标签中在移动端的使用

　　这几年，随着移动端的兴起，咱们对移动端愈来愈须要进行专门的网页设计，下面，我来介绍一些关于移动端布局中<meta>标签的使用。

　　1.name属性的viewport的值（移动端屏幕的缩放）

　　viewport也就是可视区域，就是出去全部工具栏、状态栏、滚动条等等咱们看网页的区域。通常咱们能够操控的属性有width、height、initial-scale、minimum-scale、maxmum-scale、user-scalable。

　　举例以下：

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

　　即：强制让文档与设备的宽度保持1:1；文档的其实比例和最大比例都是1.0。利用user-scalable=no定义用户不能够经过手动缩放，使得页面固定。

　　2.name属性的format-detection值。

　　咱们能够经过这个属性禁止自动识别电话和邮箱。举例以下：

<meta name="format-detection" content="telephone=no,email=no"/>

　　这样，是设备浏览网页时对数字不启用电话功能（注意不一样设备的解释可能不一样），忽略将页面中的数字识别为电话号码。对邮箱一样如此。

　　3.name属性的apple-mobile-web-app-capable值（网站开启对web app程序的支持）

<meta name="app-mobile-web-app-capable" content="yes"/>

　　说明：1.网站开启对web app的支持

　　　　　2.该meta能够看出内容为”苹果设备web应用程序xx“，就是说该meta是专门定义web应用的。

　　4.name属性的apple-mobile-web-app-status-bar-style值（改变顶部状态条的颜色）

<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

　说明：1.在web app应用下状态条的颜色为黑色；

　　　　　2.默认值为default(白色)，能够定义为black（黑色）和black-translucent(灰色半透明)；

　　5.name属性设置做者姓名以及联系方式

<meta name="author" contect="zzw, zhuzhenwei789@gmail.com" />

HTML中 标签如何正确使用

HTML中<meta>标签如何正确使用

第一部分：<meta>标签的基本介绍

第二部分：<meta>标签中的属性列举

第三部分：<meta>标签中的name属性应用

A keywords（关键字：告诉浏览器你的网页的关键字是什么）

B description（描述：告诉浏览器你的网页的主要内容是什么）

第四部分：<meta>标签中的http-equiv属性应用

第五部分：<meta>标签中在移动端的使用

HTML中标签如何正确使用

　　A keywords（关键字：告诉浏览器你的网页的关键字是什么）

　　B description（描述：告诉浏览器你的网页的主要内容是什么）