HTML head 元素

标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件
<noscript> 定义在脚本未被执行时的替代内容(文本)

1、<title>文档标题</title>

2、<base href="http://www.meng.com/images/" target="_blank">

3、<link rel="stylesheet" type="text/css" href="mystyle.css">

4、<meta> 标签- 使用实例

4、<meta>标签实例:

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

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

定义网页作者:

<meta name="author" content="meng">

每30秒中刷新当前页面:

<meta http-equiv="refresh" content="30">

注释:

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

引用
meat标签的http-equiv属性语法格式是:<meta http-equiv="参数" content="参数变量值"> ;其中http-equiv属性主要有以下几种参数:



1、Expires(期限)


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

用法:

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

注意:必须使用GMT的时间格式。

2、Pragma(cache模式)

说明:是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出

用法:

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

注意:这样设定,访问者将无法脱机浏览。

3、Refresh(刷新)

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

用法:

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

注意:其中的2是指停留2秒钟后自动刷新到URL网址。



4、Set-Cookie(cookie设定)


说明:如果网页过期,那么存盘的cookie将被删除。

用法:

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

注意:必须使用GMT的时间格式。

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

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

用法:

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

注意:用来防止别人在框架里调用自己的页面。

6、content-Type(显示字符集的设定)

说明:设定页面使用的字符集。

用法:

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

7、Pics-label(网页等级评定)

用法:

  1. <meta http-equiv="Pics-label" contect="">

说明:在IE的internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过meta属性来设置的。

8、Page_Enter、Page_Exit

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

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

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

  1. <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    随机产生一种过渡方式

9、清除缓存(再访问这个网站要重新下载!)

  1. <meta http-equiv="cache-control" content="no-cache">



10、设定网页的到期时间

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

11、关键字,给搜索引擎用的

  1. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

12.页面描述

    1. <meta http-equiv="description" content="This is my page">

HTML头部元素实例的更多相关文章

  1. HTML块元素,行内元素,类,头部元素

    总结HTML块元素,行内元素,类,头部元素 块元素: 在HTML中,块级元素的高度为其内容的高度,宽度会扩展到与父容器同宽.默认情况下,块级元素会独占一行,并且元素前后行留空. 示例:<h1&g ...

  2. HTML 头部 (head) 实例

    所有表签解释.HTML <meta> 元素元数据(metadata)是关于数据的信息. <meta> 标签提供关于 HTML 文档的元数据.元数据不会显示在页面上,但是对于机器 ...

  3. React 表单元素实例

    代码实例: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" ...

  4. Wpf 鼠标拖动元素实例

    1.Wpf中鼠标捕获和释放 //以矩形为例 //创建鼠标捕获 Mouse.Capture(rectOne); //释放鼠标捕获 rectOne.ReleaseMouseCapture(); 2.Wpf ...

  5. 记录--jquery 获取父级、子级、兄弟元素 + 实例

    需求如下: 三条数据,需点击其中一条数据在其下面展示与此数据关联的图片.主要功能可能是在点击的数据下增加显示行 思路: 把需要点击增加的数据先隐藏.点击后再将其显示出来. 知识点: jQuery.pa ...

  6. 第五章 动画 48:动画-使用transition-group元素实例列表动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. 用Javascript动态添加删除HTML元素实例 (转载)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 关于w3school的html5部分output 元素实例代码(点亲自试一试进去)的问题纠正

    修复: 将原来的 =  号修改成 <input type="button" onclick="resCalc()" value ="=" ...

  9. CSS Clip剪切元素实例

    一.实例1: .fixed { position: fixed; width: 382px; height: 100px; background: red; border: 1px solid blu ...

随机推荐

  1. loj#115. 无源汇有上下界可行流

    \(\color{#0066ff}{ 题目描述 }\) 这是一道模板题. \(n\) 个点,\(m\) 条边,每条边 \(e\) 有一个流量下界 \(\text{lower}(e)\) 和流量上界 \ ...

  2. P3879 [TJOI2010]阅读理解

    \(\color{#0066ff}{ 题目描述 }\) 英语老师留了N篇阅读理解作业,但是每篇英文短文都有很多生词需要查字典,为了节约时间,现在要做个统计,算一算某些生词都在哪几篇短文中出现过. \( ...

  3. 数据结构42:n个结点构造多少种树

    本节要讨论的是当给定 n(n>=0)个结点时,可以构建多少种形态不同的树. 如果两棵树中各个结点的位置都一一对应,可以说这两棵树相似.如果两棵树不仅相似,而且对应结点上的数据也相同,就可以说这两 ...

  4. Step by Step: 基于MFC下的COM组件开发-Helloworld

    http://blog.csdn.net/sybifei/article/details/45008745 [这篇文章有问题, 仅供参考] http://blog.csdn.net/define_us ...

  5. lintcode - 删除数字

    class Solution { public: /* * @param A: A positive integer which has N digits, A is a string * @para ...

  6. 设置input的样式

    css中的 ” 七层重叠法 ” :即网页内容先后顺序分别为:背景边框,负值z-index,display:block,浮动,display:inline-block,z-index:auto,正值z- ...

  7. Linux网络编程基础

    1. Linux网络模型 ① OSI七层模型和Linux四层模型 ② 各种协议之间的关系及在Linux模型中的位置 ③ 协议封装:各种协议处于一种层层封装的关系 (1)Ethernet (2)IP * ...

  8. vue(5)联动+tab页

    来自:https://juejin.im/post/5a0c191f6fb9a04514639419 1.联动 新增 <input v-model="msg" /> & ...

  9. my15_ mysql binlog格式从mixed修改为row格式

    由于主库繁忙,就在从库上修改binlog格式 1. 从库切日志mysql> flush logs;Query OK, 0 rows affected (0.00 sec) mysql> f ...

  10. JavaSE---NIO

    1.概述 1.1 BIO的问题: 读取输入流中的数据时,如果没有读到有效数据,该线程将被阻塞: 传统输入.输出流都是阻塞式的: 传统的输入.输出流都是通过字节移动处理: 面向流的输入.输出一次只能处理 ...