HTML5中Head内标签详解(一):meta标签

2021-03-10 18:33

阅读:534

引言:

我发现自己最近有点走偏了,越来越多的将学习的精力放在编程上,而渐渐的忽略了HTML这个简单又不简单的标记语言上。相信大家应该也有这样的经历。觉得HTML这种东西很简单不需要花费太多精力就能使用,但是时间久了我发现会用是远远不够的,要知其然还要之气所以然,方能做到庖丁解牛,游刃有余,而不是被动的查文档(不是所有人都这样认为)。写了这么久HTML但是神奇的meta标签真的搞不懂,只知道用到啥百度一下,找到要用的配置就好,心里还是好奇(原谅我好奇心重)。

1.常用的header标签配置


    


Document

这种配置一般会都是编辑器自动生成的,时间长了也就习惯了。没有去细究这里面的设置到底是啥意思,到底对页面的显示到底会产生什么影响。

2.详解meta标签

元数据(Metadata)是数据的数据信息。
标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。
META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。
元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用。 -——W3C文档

总而言之标签的作用是用来告诉浏浏览器我的页面要怎么解码,怎么展示。

2.1 标签的属性
  • charset属性:这个属性是HTML5新增的属性,主要的作用是用来定义文档的字符编码,就是告诉浏览器在从服务器获取这个html文档后采用什么样的解码格式去正确的解码该文档。一般值都是UTF-8,同样的没有特殊要求的话也推荐使用UTF-8。

  • name属性:name属性的作用是用来表示其所在标签具体的作用,比如则指明该meta标签使用来定义该页面的关键字的,利于SEO。

  • content属性:用来定义name指定作用的信息,比如作用就是声明该页面的搜索关键词是学习或者工作,在搜索引擎中搜索工作或学习可以搜到该页面。

  • http-equiv属性:它的作用和name属性差不多,就是用来指定meta标签的作用,但是不同的是它会关联到HTTP头部的一些作用,也影响就是浏览器发送http请求和浏览器引擎的行为,可能这样说不太对,差不多就这意思。

2.2 charset 和 name属性值
  • charset属性的值一般为UTF-8,也可以选用其他的编码格式,推荐使用UTF-8。

  • name属性的值有:

    • application-name:顾名思义用于定义应用的名称,名字定义在content属性的值中,通过搜索引擎能搜到该应用的名字,但是只有当页面为一个webapp时才能使用

    • author:作者名字,给搜索引擎提供作者的信息

    • description:网页描述,具体内容定义在content属性的值中

    • generator:这个具体不太清楚是啥用,一般用于显示网页的制作工具,比如以前的dreamwave等

    • keywords:这个比较重要,搜索引擎根据关键词来归类网页,好的关键词描述能够使网页更加容易的被用户搜索到

    • referrer:这个属性值比较复杂主要是用来控制页面与服务器交互时发送的请求,作为页面信息安全的保障措施。具体请看这里可以参考一下

这些个属性值是w3c官方标准的属性值,但是现在浏览器上还是有一些私有的属性值






























——以上代码引用自:http://www.css88.com/archives...


评论


亲,登录后才可以留言!