html复习巩固

2017-10-13

1.html 链接 name属性

name规定锚的名称，可用于创建页面中的书签（对读者不可见），我们可以利用它直接跳转至页面某个小节

用法

链接到同一页面不同位置
<a name="tips">基本的注意事项 - 有用的提示</a>

<a href="#tips">有用的提示</a>
链接到其他页面的某个小节

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

例如：用来跳出框架

a.html 主页面
 <div id="page1">  
   <iframe name="left" src="b.html" ></iframe>          
 </div>  
 <div id="page2">  
    <iframe src="c.html"></iframe>  
 </div> 

b.html 内容页
<p><a name="A1"></a>　　1、《热爱生命》</p>  
<p><a name="A2"></a>　　2、《如果生活不够慷慨》</p>
<p><a id="A3" name="A3"></a>3、《我微笑着走向生活》</p>  
<p><a name="A4"></a>　　4、《倘若才华得不到承认》</p>

c.html 导航页
<body>  
<a href="b.html#A1" target="left">1、《热爱生命》</a><br/>  
<a href="b.html#A2" target="left">2、《如果生活不够慷慨》</a><br/>  
<a href="b.html#A3" target="left">3、《我微笑着走向生活》</a><br/>  
<a href="b.html#A4" target="left">4、《倘若才华得不到承认》</a><br/>  
</body>

效果图：

注意：

如果不加 target=left 则导航页会直接出现内容，而不是内容页跳到相应锚的位置。

效果图

2.meta标签作用及属性总结

meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

http-equiv属性

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<meta http-equiv="参数" content="参数变量值">；

http-equiv属性主要有以下几种参数：

A.Expires(期限)

可以用于设定网页的到期时间，一旦网页过期，必须到服务器上重新传输。

<meta http-equiv="expires" content="Fri,12Jan200118:18:18GMT">

如果网页过期，那么存盘的cookie将被删除

<meta http-equiv="Set-Cookie" content="cookie value=xxx; expires=Friday,12-Jan-200118:18:18GMT；path=/">`

C.content-Language（显示语言的设定）

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

D.content-Type(显示字符集的设定)

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

E.Refresh(刷新)

说明：自动刷新并指向新页面。

<meta http-equiv="Refresh" content="2; URL=http://www.baidu.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)

F.Pragma(cache模式)

说明：禁止浏览器从本地计算机的缓存中访问页面内容。

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

G.Window-target(显示窗口的设定)

说明：强制页面在当前窗口以独立页面显示。

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

H.http-equiv=”imagetoolbar”

指定是否显示图片工具栏，当为false代表不显示，当为true代表显示。

<meta http-equiv="imagetoolbar" content="false"/>

J.Cache-Control指定请求和响应遵循的缓存机制。

在请求消息或响应消息中设置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消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

name属性

A. keywords(关键字)

说明：用来告诉搜索引擎你网页的关键字是什么。

<meta name="keywords" content="">

B. description(网站内容描述)

<meta name="description" content="">

C. author(作者)

<meta name="author" content="530251897@qq.com">

D. copyright(版权信息)

<meta name="copyright" content="信息参数">

E. revisit-after(网站重访时间)

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

F. generator(网站生成软件)

<meta name="copyright" content="信息参数">

G. robots(机器人向导)

说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

<meta name="robots" content="none">

具体参数如下：

信息参数为all：文件将被检索，且页面上的链接可以被查询；

信息参数为none：文件将不被检索，且页面上的链接不可以被查询；

信息参数为index：文件将被检索；

信息参数为follow：页面上的链接可以被查询；

信息参数为noindex：文件将不被检索，但页面上的链接可以被查询；

信息参数为nofollow：文件将被检索，但页面上的链接不可以被查询；

哈哈，至此，网站中的meta元素终于搞明白了，妈妈再也不用担心我的html头部啦！