HTML的元数据元素

发表于 | 分类于 |
字数统计: 2,615 | 阅读时长 ≈ 10

HTML5分为根元素，元数据元素，脚本元素。

根元素：doctype，html
元数据元素：head,title,base,link,meta,style
脚本元素：script,noscript

根元素

  1. 文档类型声明
    <!DOCTYPE HTML> 是HTML5标准的文档类型声明，他告诉浏览器本文档是HTML文档，HTML的版本号是HTNL5.
  2. HTML是根元素，表示文档的开始，包括head和body两个子元素，如需指定语言，设置lang属性即可。
    1
    2
    3
    4
    5
    6
    7
    <html lang="zh-CN">
      <head>
        <title>html</title>
      </head>
      <body>
      </body>
    </html>

元数据

head元素下面所包含的元素有title、base、meta、link、style、script、noscript。其中title是必不可缺的。

meta

Meta标签是HTML语言中HEAD区的一个辅助性标签，它位于HTML文档头部的<head>标记 和<title>标记之间，它提供用户不可见的信息。META标签有两个重要的属性：HTTP标题信息(HTTP-EQUIV)和页面描述信息(name)。

Meta标签的name和content属性

Meta标签的name属性语法格式：＜meta name=”参数” content=”具体参数值”＞
meta元素，用来定义文档的元数据，即各种数据的数据，其中name是属性名，content是具体属性。

  1. Keywords (关键字)
    说明：告诉搜索引擎你网页的关键字是什么。
    用法：

    1
    <meta name="keywords" content="香蕉,苹果,橘子,梨">

  2. Description (网页描述)
    说明：Description用来告诉搜索引擎你的网页主要内容。
    用法：

    1
    <meta name="description" content="如何变帅，如何变更帅、变帅的一百零一种方法，变帅让世界更美好。" />

  3. Robots (机器人向导)
    说明：Robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。
    用法：

    1
    <meta name="robots" content="All|None|Index|Noindex|Follow|Nofollow">

    all：文件将被检索，且页面上的链接可以被查询；
    none：文件将不被检索，且页面上的链接不可以被查询；(和 “noindex, nofollow” 起相同作用)
    index：文件将被检索；（让robot/spider登录）
    follow：页面上的链接可以被查询；
    noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)
    nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)

  4. Author (作者)
    说明：标注网页的作者或制作组
    用法：

    1
    <meta name="author" content="天下第一帅，wohenshuai@shuaige.com">

    注意：Content可以是：你或你制作组的名字,或Email

  5. Copyright (版权)
    说明：标注版权
    用法：

    1
    <meta name="copyright" content="本网站版权归权天下所有的帅哥所有">

  6. Generator (编辑器)
    说明：编辑器的说明
    用法：

    1
    <meta name="generator" content="PCDATA|FrontPage|">

    注意：Content=”你所用编辑器”

  7. Revisit-after (重访)
    说明：通知搜索引擎多少天访问一次
    用法：

    1
    <meta name="revisit-after" content="7 days" >

meta元素的charset属性

说明： charset声明字符的编码格式
用法：

1
<meta charset="UTF-8">   //声明字符的编码格式

meta的http-equiv属性

1.
说明：在指定的时间里刷新页面（如果在时间后面添加上一个URL，则是在指定的时间之后另外再载入一个页面）
用法：

1
<meta http-equiv="refresh" content="10">

2.
说明：指定页面的优先使用样式表，对应的content属性值应该和同一文档中style元素和link元素的title属性值相同
用法：

1
<meta http-equiv="default-style" content="css1">

3.
说明：另一种指定文档编码方式的方法
用法：

1
<meta http-equiv="content-type" content="text/html charset=utf-8">

meta的lang属性

说明：meta元素的lang属性用来定义content属性值的语言，这样的目的主要是用于语音合成器可以区分出content属性值所使用的语言，从而可以读出来。
lang属性可以指定标签范围内的元素的语言种类。英语lang=”en”,中文lang=”zh”，日文lang=”ja”。
dir属性用来定义文字的方向值,ltr是默认。从左向右的文本方向。rtl从右向左的文本方向。
用法：

1
<meta name="Author" content="dreamzuora" lang="US-en" dir="LTR">

移动端的viewport属性

1
2
3
4
5
6
7
8
9
10
11
<meta name="viewport"  
content="  
    height = [pixel_value | device-height] ,  
    width = [pixel_value | device-width ] ,  
    initial-scale = float_value ,  
    minimum-scale = float_value ,  
    maximum-scale = float_value ,  
    user-scalable = [yes | no] ,  
    target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]  
"  
/>

含义如下：

width:

控制 viewport 的大小，可以指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height:

和 width 相对应，指定视窗的高度。

target-densitydpi:

一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。

下面是 target-densitydpi 属性的 取值范围

device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。
medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density.
low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
<value> – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。

为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放，你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了，页面将不会缩放。相反，页面会根据当前屏幕的像素密度进行展示。在这种情形下，你还需要将viewport的width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。

initial-scale:

初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。

maximum-scale:

最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。

user-scalable:

用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。

所有的缩放值都必须在0.01–10的范围之内。

例：

(设置屏幕宽度为设备宽度，禁止用户手动调整缩放)

1
<meta name="viewport" content="width=device-width,user-scalable=no" />

(设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放)

1
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

另外，iOS 7.1的Safari为meta标签新增minimal-ui属性，在网页加载时默认隐藏地址栏与导航栏

1
<meta name="viewport" content="minimal-ui">

此时点击顶栏区域便能切换为显示地址栏、导航栏，再点击页面主体区域则又使之隐藏。

title

作用：设置文档的标题或者名称。浏览器通常将该元素的内容显示在窗口顶部或者标签页上。每个HTML文档只能有一个且必须有一个title元素

base

设置文档的默认地址和链接的默认打开方式;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html>
<head>
    <title>base</title>
    <!--
        base - 设置一些默认值
          href - 指定当前文档的默认地址，不指定的话默认地址为当前文档的 url。文档中相对路径的解析后的绝对地址为：默认地址 + 相对路径
          target - 指定文档中链接的默认打开方式。_blank, _parent, _self, _top
    -->
    <base href="http://pic.cnblogs.com/avatar/" target="_blank" />
</head>
<body>
    <!--
        a 标签的链接打开方式为 _blank
        img 标签的图片绝对地址为 http://pic.cnblogs.com/avatar/a14540.jpg
    -->
    <a href="http://webabcd.cnblogs.com/">
        <img src="a14540.jpg" alt="baby" />
    </a>
</body>
</html>

局部属性
：href 指定link元素指向的资源的URL
：hreflang 说明所光联的资源使用的语言
：media 指定所关联的内容使用哪种设备
：rel 说明HTML文档所关联资源的关系类型
：sizes（这是HTML5新属性）指定关联图标的大小
：type 指定所关联资源的MIME类型 可以省

rel属性的可取值 :
stylesheet 载入外部样式表
help 链接倒当前文档的说明文档
author 链接倒当前文档的作者
prefetch 预先获取一个资源
icon 指定图标资源

style

作用：用来定义HTML文档的内嵌CSS样式
局部属性
：type 由于浏览器只认识css一种机制，所以该值总是 text/css 可以省略
：media 指定样式适用的媒体，即媒体查询

取值：
screen 计算机显示器屏幕
print 打印预览的时候
braill盲文设备
aural 语音合成器
tv电视机（media在使用的时候通常会配合 AND NOT ,一起来配合使用）

1
<style media="screen AND (max-width:500px)" ><style/>  /*指的是在PC端 屏幕最大宽度为500px的设备使用，媒体查询多用于响应式网页的制作*/

style元素可以出现在HTML文档的各个部分，一个文档可以包含多个style元素，在使用模板引擎生成页面的情况下这个特性很有帮助，可以用页面特有的样式为模板定义样式提供补充

参考资料

  1. https://blog.csdn.net/wangpmy/article/details/62887766
  2. https://blog.csdn.net/freshlover/article/details/25322839
  3. https://www.cnblogs.com/webabcd/archive/2011/09/15/2176955.html