html学习之路:简述html文档头部 <meta> 的 http-equiv 属性

🧋当输入网址打开网页时,设置html头部metahttp-equiv属性,可以帮助浏览器更加精确和正常却的显示网页内容,比如设置网页多久自动刷新,设置网页在浏览器缓存中的时限,设置多少事件跳转到指定的网页地址,应对低版本浏览器的渲染兼容问题,以什么样动态的样式去打开浏览器等等等...

首先,我们得知道一张网页即html文档最基础的代码形式和作用是怎样的

🧋一、html文档结构

html 复制代码
<!DOCTYPE html>
<!-- 网页的头部,页面的全局信息 -->
<html lang="en">
<head>
     <!-- 页面的标题 -->
	 <title>Document</title>
	 <!-- 页面的元数据(形容页面的东西) -->
    <meta charset="UTF-8">
    <!-- 跟搜索排名有关 -->
	<meta name="" content="">
	<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
	<!-- 设置网页内容的显示方式 -->
    <meta http-equiv="Content-Type" Content="text/html;Charset=gb2312">
   	<!-- 引入js文件 -->
	<script></script>
	<!-- 元素内部样式 -->
	<style></style>
	<!-- 引入css文件 -->
	<link/>
</head>
<body>
    <!-- 网页的主体,页面展示的内容 -->
</body>
</html>

其次,在今天的学习中,我学到了11种关于http-equiv的属性即设置这些属性的意义,总结如下,与同行和大神们共勉和分享,如有错误的地方,多多指点,本人将不甚感激并及时修正。

🧋二、meta的http-equiv属性

1. 设定页面使用的字符集
html 复制代码
<meta http-equiv="Content-Type" Content="text/html;Charset=gb2312">
<meta http-equiv="Content-Language" Content="zh-CN">
2. 设置页面多长后,自动刷新自己
html 复制代码
<meta http-equiv="Refresh" Content="60" >
3. 设置页面多长时间后跳转到指定的url
html 复制代码
   <meta http-equiv="Refresh" Content="5" Url=http://www.baidu.com>
4. 定义页面在缓存中的期限
html 复制代码
<meta http-equiv="Expires" Content="0">
<meta http-equiv="Expires" Content="Wed,26 Feb 1997 08:21:57 GMT">
<!-- 必须使用GMT的时间格式,或直接设为0 数字表示多少时间后过期 -->
5. 禁止浏览器从本地的缓存中调阅页面内容
html 复制代码
<Prama cach模式  -->
<!-- 禁止浏览器从本地机的缓存中调阅页面内容 -->
<!--meta http-equiv="Pragma" Content="No-each">
<!-- 网页不保存在缓存中,每次访问都刷新页面,这样设定,访问者将无法脱机浏览 -->
6. 设置cookie
html 复制代码
<meta http-equiv="Set-Cookie" Content="cookievalue=xxx;expires=Wednesday">
7. 强制页面以独立页面显示,防止别人在iframe中调用
html 复制代码
<meta http-equiv="Window-target" Content="_top">
<!-- 这个属性是用来防止别人在框架里调用你的页面。 content选项:_blank  _top _self _parent -->
8. 设置网站的限制级别
html 复制代码
<meta http-equiv="Pics-label" Contect=">
<!-- 在IE的internet选项中有一项内容设置,防止浏览受限制的网站,网站的限制级别就是通过这个参数来设置的 -->
9. 页面载入和退出时的一些特效
html 复制代码
<meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)">
<meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">
<!-- 注意:blendTrans是动态滤镜的一种,产生渐隐效果。另一种动态滤镜RevealTrans也可以用于页面进入与退出效果: -->
<meta http-equiv="Page-Enter" Content="revealTrans(duration=x, transition=y)">
<meta http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)">
  <!-- Duration表示滤镜特效的持续时间(单位:秒) -->
<!-- Transition滤镜类型。表示使用哪种特效,取值为0-23。-->
<!-- 0 矩形缩小 1 矩形扩大 2 圆形缩小 3 圆形扩大 4 下到上刷新 5 上到下刷新 6 左到右刷新 7 右到左刷新 8 竖百叶窗 9 横百叶窗 10 错位横百叶窗 11 错位竖百叶窗 12 点扩散 13 左右到中间刷新  -->
<!-- 14 中间到左右刷新 15 中间到上下 16 上下到中间 17 右下到左上 18 右上到左下 19 左上到右下 20 左下到右上 21 横条 22 竖条 23 以上22种随机选择一种 -->
10. 设置xp主题
html 复制代码
<meta http-equiv="MSThemeCompatible" Content="Yes">
11. 设置ie6页面生成器
html 复制代码
<meta http-equiv="IE6″ Content="Generator">
<!-- 页面生成器generator,是ie6 -->
<!-- 类似于设置商品出厂厂商 -->
12. 设置页面中脚本的类型
html 复制代码
<meta http-equiv="Content-Script-Type" Content="text/javascript">
13. 应对浏览器不同渲染不同的兼容问题
html 复制代码
<!-- 每个电脑内置的IE版本是不一样的,版本低导致出现渲染页面时出现问题 -->
<!-- Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式渲染文档,显示内容 -->  
<meta http-equiv="X-UA-Compatible" content="IE=edge">
相关推荐
树上有只程序猿3 分钟前
后端思维之高并发处理方案
前端
张张张31222 分钟前
4.2学习总结 Java:list系列集合
java·学习
SuperW36 分钟前
linux课程学习二——缓存
学习
庸俗今天不摸鱼38 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周1 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端