HTML的元数据元素

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文档头部的标记 和标记之间,它提供用户不可见的信息。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, no follow” 起相同作用)
    index:文件将被检索;(让robot/spider登录)
    follow:页面上的链接可以被查询;
    noindex:文件将不被检索,但页面上的链接可以被查询;(不让robot/spider登录)
    nofollow:文件将不被检索,页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)

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

    1
    <meta name="author" content="天下第一帅,wohenshuai@shauige.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