注册 登录

清河洛

HTML5元数据和一些全局属性

qingheluo2016-12-16清河洛465
元数据:<meta>元素:可以定义文档中的各种元数据一、属性charset,直接指定页面编码,<meta charset="utf-8">二、指定名/值元数据对:两个属性http-equiv和name,每个属性都应该有一个对应的content与之对应。<meta http-equiv="属性" content="属性值">http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容。1、content-Type(设定页面使用的字符集)<http-equiv="content-...

元数据:<meta>元素:可以定义文档中的各种元数据

一、属性charset,直接指定页面编码,<meta charset="utf-8">

二、指定名/值元数据对:两个属性http-equiv和name,每个属性都应该有一个对应的content与之对应。

<meta http-equiv="属性" content="属性值">

http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容。

1、content-Type(设定页面使用的字符集)

<http-equiv="content-Type" content="text/html; charset=gb2312">

2、content-Language(显示语言的设定)

<http-equiv="Content-Language" content="zh-cn"/>

3、Refresh(刷新)

自动刷新并指向新页面。其中的2是指停留2秒钟后自动刷新到URL网址。

<meta http-equiv="Refresh" content="2;URL=http://www.net.cn/">

下面的代码意思是每隔2秒自动刷新页面

<meta http-equiv="Refresh" content="2">

4、Set-Cookie(cookie设定)

说明:如果网页过期,那么存盘的cookie将被删除。必须使用GMT的时间格式。

<meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT; path=/">

5、Window-target(显示窗口的设定)

说明:强制页面在当前窗口以独立页面显示。 用来防止别人在框架里调用自己的页面。

<meta http-equiv="Window-target" content="_top">

6、Expires(期限)

可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。必须使用GMT的时间格式,设置为0标识永不过期。

<meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT">

<meta http-equiv="expires" content="0">

7、Pragma(cache模式)

用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出,这样设定,访问者将无法脱机浏览。

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

8、cache-control缓存机制

<meta http-equiv="cache-control" content="值">

Cache-Control指定请求和响应遵循的缓存机制。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached,响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下 :

Public指示响应可被任何缓存区缓存

Private指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效

no-cache指示请求或响应消息不能缓存

no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。

max-age指示客户机可以接收生存期不大于指定时间(以秒为单位)的响应

min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应

max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么客户机可以接收超出超时期指定值之内的响应消息

默认为private。其作用根据不同的重新浏览方式分为以下几种情况:

(1) 打开新窗口

如果指定cache-control的值为private、no-cache、must-revalidate,那么打开新窗口访问时都会重新访问服务器。而如果指定了max-age值,那么在此值内的时间里就不会重新访问服务器,例如:

Cache-control: max-age=5

表示当访问此网页后的5秒内再次访问不会去服务器

(2) 在地址栏回车

如果值为private或must-revalidate(和网上说的不一样),则只有第一次访问时会访问服务器,以后就不再访问。如果值为no-cache,那么每次都会访问。如果值为max-age,则在过期之前不会重复访问。

(3) 按后退按扭

如果值为private、must-revalidate、max-age,则不会重访问,而如果为no-cache,则每次都重复访问

(4) 按刷新按扭

无论为何值,都会重复访问

当指定Cache-control值为“no-cache”时,访问此页面不会在Internet临时文章夹留下页面备份。

另外,通过指定“Expires”值也会影响到缓存。例如,指定Expires值为一个早已过去的时间,那么访问此网时若重复在地址栏按回车,那么每次都会重复访问:

9、Page_Enter、Page_Exit

设定进入页面时的特殊效果

<meta http-equiv="Page-Enter" contect="revealTrans(duration=1.0,transtion=12)">

设定离开页面时的特殊效果

<meta http-equiv="Page-Exit" contect="revealTrans(duration=1.0,transtion=12)">

Duration的值为网页动态过渡的时间,单位为秒。

Transition是过渡方式,它的值为0到23,分别对应24种过渡方式。如下:

0 盒状收缩         1 盒状放射

2 圆形收缩         3 圆形放射

4 由下往上         5 由上往下

6 从左至右          7 从右至左

8 垂直百叶窗         9 水平百叶窗

10 水平格状百叶窗      11垂直格状百叶窗

12 随意溶解        13从左右两端向中间展开

14从中间向左右两端展开  15从上下两端向中间展开

16从中间向上下两端展开  17 从右上角向左下角展开

18 从右下角向左上角展开  19 从左上角向右下角展开

20 从左下角向右上角展开  21 水平线状展开

22 垂直线状展开      23 随机产生一种过渡方式

10、禁止移动端转码no-siteapp和no-transform

no-siteapp是百度的标准,no-transform是共有的一个标准,但是国内百度目前对no-transform支持比较差,所以需要此功能最好是写两行,把这两个都用上

11、优先使用IE最新版本或chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

meta标签中的name

keywords:当前页面的关键字
description:当前页面的描述
author:当前页面的作者
generator:当前页面采用的什么软件制作
revised:网页文档的最后修改时间<meta name="revised" content="我的网站, 7/24/2016"/>
copyright:网站版权信息<meta name="copyright" content="本页版权XXX所有。All Rights Reserved" />
robots:告诉搜索机器人哪些页面需要索引,哪些页面不需要索引<meta name="robots" content="none"/>

    all|none|index|noindex|follow|nofollow, 默认all
    all:文件将被检索,且页面上的链接可以被查询;
    none:文件将不被检索,且页面上的链接不可以被查询;
    index:文件将被检索;
    follow:页面上的链接可以被查询;
    noindex:文件将不被检索,但页面上的链接可以被查询;
    nofollow:文件将不被检索,页面上的链接可以被查询。

viewpor:页面缩放比例设置

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

width:设置宽度,为一个正整数,或字符串"width-device"
user-scalable:是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许   
initial-scale:设置页面的初始缩放值,为一个数字,可以带小数   
minimum-scale:允许用户的最小缩放值,为一个数字,可以带小数    
maximum-scale:允许用户的最大缩放值,为一个数字,可以带小数    
height:设置高度,这个属性对我们并不重要,很少使用    
miniual-ui:单属性,ios的safari为meta新增的属性,在网页加载是隐藏顶部的地址栏和底部的导航栏    
这些属性可以同时使用,也可以单独使用或混合使用,多个属性同时使用时用逗号隔开就行了。

renderer :指定双核浏览器默认以何种方式渲染页面

<meta name="renderer" content="webkit|ie-comp|ie-stand">

webkit:使用webkit核心,一般为极速核心。ie-comp : IE兼容内核。 ie-comp :IE标准内核

html全局属性:

一、id属性

二、class属性

三、accesskey属性:快捷键操作,windows下alt+指定键,按下组合键光标会跳到该位置,前提是浏览器 alt 并不冲突。

<input type="text" name="user" accesskey="n">

四、contentEditable属性:让文本处于可编辑状态,设置 true 则可以编辑,false 则不可编辑。或者直接设置属性(单属性)。

<p contentEditable="true">这段文字可以修改

五、dir属性:让文本从左到右(ltr),还是从右到左(rtl),即左对齐和右对齐。

<p dir="rtl">文字右对齐

六、hidden属性:单属性,隐藏元素

<p hidden>该段文字不会显示

七、lang属性:局部设置语言

<p lang="en">HTML5

<p lang="zh-cn">HTML5

八、title属性

九、tabindex属性:表单中按下tab键,实现获取焦点的顺序(默认从上倒下,从左到右)。如果是-1,则不会被选中。

<input type="text" name="user" tabindex="2">

<input type="text" name="user" tabindex="1">

十、style属性

十一、data-*属性:用于存储页面或应用程序的私有定制数据。

属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符

属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。



网址导航