HTML中标签如何正确使用
若是咱们在浏览器中按下F12或者Ctrl+shift+J,即可以打开开发者工具,在element中便可看到
元素中有很多元素。对于网页而言,元素是必不可少的。咱们在建立一个html5文档时,就会发现相似于这样的标签,来规定解析文档的字符类型。那么,它还有哪些做用呢?下面,我将一探究竟!我会经过下面几个部分来说解,若是你但愿直接看后面部分的内容,能够直接点击下面的文字。javascript标签的基本介绍
标签中的属性列举
标签中的name属性应用
标签中的http-equiv属性应用
标签中在移动端的使用
第一部分:标签的基本介绍
标签是HTML网页源代码中的一个重要的html标签。META便签用来描述一个HTML网页文档的属性,例如做者、日期和时间、关键词、页面刷新。除此以外,标签用于搜索引擎优化(seo)。它位于HTML文档中
元素内,虽然它提供的信息用户不可见,但它倒是文档最基本的元信息。html第二部分:标签中的属性列举
标签中属性咱们能够分为必选的属性和可选的属性。html5
1.必选属性:content属性。该属性是为了定义与http-equiv或者name属性相关的元信息,其中的内容是为了便于搜索机器人查找信息和分类使用的。java
2.可选属性:web
name属性。该属性主要用于描述网页。name属性的值能够有:author、description、keywords、generator等等
http-equiv属性。该属性至关于http的头文件做用,能够向浏览器返回一些有用的信息,以帮助正确和精确的显示内容。http-equiv属性的值能够有content-type、expires、refresh等等。
第三部分:标签中的name属性应用
A keywords(关键字:告诉浏览器你的网页的关键字是什么)
B description(描述:告诉浏览器你的网页的主要内容是什么)
这两个属性值我放在一块儿说,是由于它们的做用很是类似。由于设置这两个值能够帮助你的主页被各大搜索引擎登录,提升网站的访问量。因而这两个属性值的设置是格外重要的。由于按照搜索引擎的工做原理,搜索引擎会首先排除机器人自动检索页面中的keywords和description,并将其加入本身的数据库,而后根据关键词的密度将网站排序数据库
咱们能够像下面这样使用:浏览器
注意:keywords的content内容要限制在36个字。缓存
description的content内容要限制在76个字。服务器
值得注意的是,name必定要和content属性配合使用。app
C robot(机器人向导:用于高速机器人哪些页面须要索引,哪些页面不须要索引)
该属性的值有all、none、index、noindex、follow和nofollow。默认为all。
设定为all:文件将被检索,且页面上的连接能够被查询;
设定为none:文件将不被检索,且页面上的连接不能够被查询;
设定为index:文件将被检索;
设定为follow:页面上的连接能够被查询;
设定为noindex:文件将不被检索,但页面上的连接能够被查询;
设定为nofollow:文件将不被检索,页面上的连接能够被查询。
咱们能够像下面这样使用:
即搜索机器人在自动检索页面时,将不会检索到这个页面。
D author(做者:用于告诉搜索机器人网页的做者)
第四部分:标签中的http-equiv属性应用
A.content-type(文档内容类型:用于设定文档的类型和字符集)
这是meta便签中最为常见的一中设置,在制做网页时,咱们在纯HTML代码可看到它是定义你的网页的语言,当浏览器访问到你的网页时,浏览器便会根据此来识别并进行相应的设定,不然,浏览器就会使用默认的设定方法。
B.expires(期限:能够用于设定网页的到期期限)
一旦网页过时,那么就必须在服务器上从新刷新而不能经过缓存获取网页。值得注意的是:其中设置的时间必须是GMT格式。
若是你在浏览器中设置浏览器网页先从本地缓存中的页面获取,那么当浏览时,就会只从本地缓存获取,直到meta中设置的时间到期,浏览器才会获取新页面。
C.pragma(cashe模式:便是否从缓存中访问网页内容)
这行代码表示不从缓存获取页面,因而访问者将没法脱机工做。
D.refresh(刷新:等待必定时间自动刷新或跳转到其余url)
第五部分:标签中在移动端的使用
这几年,随着移动端的兴起,咱们对移动端愈来愈须要进行专门的网页设计,下面,我来介绍一些关于移动端布局中标签的使用。
1.name属性的viewport的值(移动端屏幕的缩放)
viewport也就是可视区域,就是出去全部工具栏、状态栏、滚动条等等咱们看网页的区域。通常咱们能够操控的属性有width、height、initial-scale、minimum-scale、maxmum-scale、user-scalable。
举例以下:
即:强制让文档与设备的宽度保持1:1;文档的其实比例和最大比例都是1.0。利用user-scalable=no定义用户不能够经过手动缩放,使得页面固定。
2.name属性的format-detection值。
咱们能够经过这个属性禁止自动识别电话和邮箱。举例以下:
这样,是设备浏览网页时对数字不启用电话功能(注意不一样设备的解释可能不一样),忽略将页面中的数字识别为电话号码。对邮箱一样如此。
3.name属性的apple-mobile-web-app-capable值(网站开启对web app程序的支持)
说明:1.网站开启对web app的支持
2.该meta能够看出内容为”苹果设备web应用程序xx“,就是说该meta是专门定义web应用的。
4.name属性的apple-mobile-web-app-status-bar-style值(改变顶部状态条的颜色)
说明:1.在web app应用下状态条的颜色为黑色;
2.默认值为default(白色),能够定义为black(黑色)和black-translucent(灰色半透明);
5.name属性设置做者姓名以及联系方式