HTML头部元素实例
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中的内容其实就是各个参数的变量值。
1、Expires(期限)
说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。
用法:
- <meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT">
注意:必须使用GMT的时间格式。
2、Pragma(cache模式)
说明:是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出
用法:
- <meta http-equiv="Pragma" content="no-cache">
注意:这样设定,访问者将无法脱机浏览。
3、Refresh(刷新)
说明:自动刷新并指向新页面。
用法:
- <meta http-equiv="Refresh" content="2;URL=http://www.net.cn/">
注意:其中的2是指停留2秒钟后自动刷新到URL网址。
4、Set-Cookie(cookie设定)
说明:如果网页过期,那么存盘的cookie将被删除。
用法:
- <meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT; path=/">
注意:必须使用GMT的时间格式。
5、Window-target(显示窗口的设定)
说明:强制页面在当前窗口以独立页面显示。
用法:
- <meta http-equiv="Window-target" content="_top">
注意:用来防止别人在框架里调用自己的页面。
6、content-Type(显示字符集的设定)
说明:设定页面使用的字符集。
用法:
- <meta http-equiv="content-Type" content="text/html; charset=gb2312">
7、Pics-label(网页等级评定)
用法:
- <meta http-equiv="Pics-label" contect="">
说明:在IE的internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过meta属性来设置的。
8、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 随机产生一种过渡方式
9、清除缓存(再访问这个网站要重新下载!)
- <meta http-equiv="cache-control" content="no-cache">
10、设定网页的到期时间
- <meta http-equiv="expires" content="0">
11、关键字,给搜索引擎用的
- <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
12.页面描述
- <meta http-equiv="description" content="This is my page">
HTML头部元素实例的更多相关文章
- HTML块元素,行内元素,类,头部元素
总结HTML块元素,行内元素,类,头部元素 块元素: 在HTML中,块级元素的高度为其内容的高度,宽度会扩展到与父容器同宽.默认情况下,块级元素会独占一行,并且元素前后行留空. 示例:<h1&g ...
- HTML 头部 (head) 实例
所有表签解释.HTML <meta> 元素元数据(metadata)是关于数据的信息. <meta> 标签提供关于 HTML 文档的元数据.元数据不会显示在页面上,但是对于机器 ...
- React 表单元素实例
代码实例: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" ...
- Wpf 鼠标拖动元素实例
1.Wpf中鼠标捕获和释放 //以矩形为例 //创建鼠标捕获 Mouse.Capture(rectOne); //释放鼠标捕获 rectOne.ReleaseMouseCapture(); 2.Wpf ...
- 记录--jquery 获取父级、子级、兄弟元素 + 实例
需求如下: 三条数据,需点击其中一条数据在其下面展示与此数据关联的图片.主要功能可能是在点击的数据下增加显示行 思路: 把需要点击增加的数据先隐藏.点击后再将其显示出来. 知识点: jQuery.pa ...
- 第五章 动画 48:动画-使用transition-group元素实例列表动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 用Javascript动态添加删除HTML元素实例 (转载)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 关于w3school的html5部分output 元素实例代码(点亲自试一试进去)的问题纠正
修复: 将原来的 = 号修改成 <input type="button" onclick="resCalc()" value ="=" ...
- CSS Clip剪切元素实例
一.实例1: .fixed { position: fixed; width: 382px; height: 100px; background: red; border: 1px solid blu ...
随机推荐
- loj#115. 无源汇有上下界可行流
\(\color{#0066ff}{ 题目描述 }\) 这是一道模板题. \(n\) 个点,\(m\) 条边,每条边 \(e\) 有一个流量下界 \(\text{lower}(e)\) 和流量上界 \ ...
- P3879 [TJOI2010]阅读理解
\(\color{#0066ff}{ 题目描述 }\) 英语老师留了N篇阅读理解作业,但是每篇英文短文都有很多生词需要查字典,为了节约时间,现在要做个统计,算一算某些生词都在哪几篇短文中出现过. \( ...
- 数据结构42:n个结点构造多少种树
本节要讨论的是当给定 n(n>=0)个结点时,可以构建多少种形态不同的树. 如果两棵树中各个结点的位置都一一对应,可以说这两棵树相似.如果两棵树不仅相似,而且对应结点上的数据也相同,就可以说这两 ...
- Step by Step: 基于MFC下的COM组件开发-Helloworld
http://blog.csdn.net/sybifei/article/details/45008745 [这篇文章有问题, 仅供参考] http://blog.csdn.net/define_us ...
- lintcode - 删除数字
class Solution { public: /* * @param A: A positive integer which has N digits, A is a string * @para ...
- 设置input的样式
css中的 ” 七层重叠法 ” :即网页内容先后顺序分别为:背景边框,负值z-index,display:block,浮动,display:inline-block,z-index:auto,正值z- ...
- Linux网络编程基础
1. Linux网络模型 ① OSI七层模型和Linux四层模型 ② 各种协议之间的关系及在Linux模型中的位置 ③ 协议封装:各种协议处于一种层层封装的关系 (1)Ethernet (2)IP * ...
- vue(5)联动+tab页
来自:https://juejin.im/post/5a0c191f6fb9a04514639419 1.联动 新增 <input v-model="msg" /> & ...
- my15_ mysql binlog格式从mixed修改为row格式
由于主库繁忙,就在从库上修改binlog格式 1. 从库切日志mysql> flush logs;Query OK, 0 rows affected (0.00 sec) mysql> f ...
- JavaSE---NIO
1.概述 1.1 BIO的问题: 读取输入流中的数据时,如果没有读到有效数据,该线程将被阻塞: 传统输入.输出流都是阻塞式的: 传统的输入.输出流都是通过字节移动处理: 面向流的输入.输出一次只能处理 ...