META（Metadata information）

提供有页面的元信息 例如：页面编码、刷新、跳转、针对搜索引擎和更新频道的描述和关键词

1.另外一种编码写法
<meta http-equiv="content-type" content="text/html;charset=utf-8">

这种是简写
 <meta charset="UTF-8">
<!DOCTYPE html>

<html lang="en">

<head>

    <!-- 这种是简写

    <meta charset="UTF-8"> -->

    <!-- 这种另外一种编码写法 -->

    <meta http-equiv="content-type" content="text/html;charset=utf-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

</body>

</html>
2.刷新和跳转
默认3秒刷新一次页面
 <meta http-equiv="Refresh" Content="3">
 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="Refresh" Content="3">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

</body>

</html>


默认3秒刷新一次页面，然后跳转到定义的网页


<meta http-equiv="Refresh" Content="3;Url=http://www.baidu.com">




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="Refresh" Content="3;Url=http://www.baidu.com">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

</body>

</html>




3.关键词和描述




 <meta name="keywords" content="星际争霸">




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <!-- 关键词 可以用来捉爬虫 搜索引擎用 -->

    <meta name="keywords" content="星际争霸">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <a href="http://www.baidu.com">百度</a>

</body>

</html>








IE6的痛苦


现在的网站都不支持IE6


IE8 可以兼容新版本 和旧版本




让浏览器只兼容高版本


兼容IE9


 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <a href="http://www.baidu.com">百度</a>

</body>

</html>






简写






<meta http-equiv="X-UA-Compatible" content="IE=IE9"/>






 可以兼容多个IE版本 先写高版本在前面 后面再写低版本 因为最新的版本肯定是最好的 从大到小
如果你浏览器是IE9 用最新的IE9模式


兼容IE9 IE




<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8"/>












												


											
前端 html head meta的更多相关文章
	

    
								
  1. 移动前端常用meta标签
		
    移动前端常用meta标签 移动前端head常用meta标签 原文链接:http://caibaojian.com/mobile-meta.html //code from http://caibaoj ...
    
		
    2. 
						
  2. js实现table中前端搜索(模糊查询)
		
    项目中用到js前端搜索功能,根据 姓名或姓名 进行 搜索,实现方法如下,遍历table所有行中的某列,符合条件则置tr为display:'',不满足条件置tr为display:none. 代码如下:  ...
    
		
    3. 
						
  3. ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字
		
    有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS样式和JS. 如果是webform 开发,可以用下列方法: 流程是首先从数据中或者xml读取数据 ...
    
		
    4. 
						
  4. 【前端框架系列】浅谈当前基于bootstrap框架的几种主流前端框架
		
    一  概述 当新开发一个项目或产品时,技术选型是一个不可缺少的环节,在软件架构中有着举足轻重的作用,可以这么说,技术选型的好坏直接影响项目或产品的成败优劣,因此,在进行软件架构时,一定要想好技术选型. ...
    
		
    5. 
						
  5. 利用Admin-LTE项目搭建自己前端的开发框架模板
		
    1 完整版本 1.1 下载admin-lte项目源代码 github下载地址:点击前往 三少云盘地址:点击前往 1.2 查看admin-lte精简主页源代码 页面地址:点击前往 注意:由源代码可以知道 ...
    
		
    6. 
						
  6. ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字（转载）
		
    原文地址:http://www.cnblogs.com/xbhp/p/6392225.html 有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS ...
    
		
    7. 
						
  7. APP应用前端开发
		
    1.开发手机APP前端要重视meta标签的编写: 2.注意HTML5标签在前端开发中的使用: 3.前端制作要舍弃CSS float属性(可flex布局),用绝对定位不利于页面布局的扩展: 4.APP前 ...
    
		
    8. 
						
  8. Ajax实现聊天
		
    用Ajax发送请求,查询数据库是否有自己的数据,如果有自己的数据,就返回 前端页面 <head> <meta charset="UTF-8"> <ti ...
    
		
    9. 
						
  9. JavaScript---网络编程(12)--DHTML技术演示(5)-form表单验证技术(正则)
		
    这里不进行很复杂的后台验证以及JavaScript的正则表达式,只是简单的介绍下这个技术,简单的后台接收与跳转,大概了解怎么验证的就可以.具体的技术,我后面还会继续写博客的.本人也还在学习中. 表单验 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. POJ 2923 Relocation(01背包变形, 状态压缩DP)
			
    Q: 如何判断几件物品能否被 2 辆车一次拉走? A: DP 问题. 先 dp 求解第一辆车能够装下的最大的重量, 然后计算剩下的重量之和是否小于第二辆车的 capacity, 若小于, 这 OK.  ...
    
			
    2. 
						
  2. ios 添加动画的方法
			
    转自文顶顶大神的博客:http://www.cnblogs.com/wendingding/p/3751519.html ios 开发UI中,经常会用添加动画效果的需求,下面就总结一下,添加动画的三种 ...
    
			
    3. 
						
  3. day7—直播内容（元昊老师著）
			
    *******************************class animal(object): def __init__(self): self.is_handsome=True def e ...
    
			
    4. 
						
  4. jquery 获取当前时间加180天
			
    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
    
			
    5. 
						
  5. C语言之顺序结构
			
    该章内容:这章我们学习三大结构之一:顺序结构,它是程序从上往下顺序执行,是程序运行最简单的方式.printf和scanf函数使用和特例是必考知识.本章是考试的重点章节. 学习方法:从简单的顺序结构题目 ...
    
			
    6. 
						
  6. 《C++ Primer Plus》14.4 类模板 学习笔记
			
    14.4.1 定义类模板下面以第10章的Stack类为基础来建立模板.原来的类声明如下:typedef unsigned long Item; class Stack{private:    enum ...
    
			
    7. 
						
  7. JS 添加js节点
			
    function AddScriptNode(src) { var N = document.createElement("script"); N.setAttribute(&qu ...
    
			
    8. 
						
  8. poj_3461 kmp
			
    题目大意 给定两个字符串S1, S2,求S1中包含多少个S2串.其中S1长度最大为 1000000, S2长度最大为10000. 题目分析 典型的字符串匹配问题,直接匹配显然会超时,考虑使用kmp算法 ...
    
			
    9. 
						
  9. java高级---->Thread之Exchanger的使用
			
    Exchanger可以在两个线程之间交换数据,只能是2个线程,他不支持更多的线程之间互换数据.今天我们就通过实例来学习一下Exchanger的用法. Exchanger的简单实例 Exchanger是 ...
    
			
    10. 
						
  10. fping命令测试主机存活
			
    author:headsen  chen date: 2018-10-09 20:11:22 1,测试一个范围内的主机: fping  -a  -g 192.168.1.1 192.168.1.255 ...
    
			
    11.