html 常用 meta

已于 2022-05-18 23:16:16 修改
阅读量518 收藏
点赞数
分类专栏： HTML、CSS 文章标签： 前端 ios html5
于 2016-11-01 13:47:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangpb123/article/details/52995175
版权 

meta是文档级元数据元素，一般放在整个html页面的head部分。

name 属性

name 和 content 一起使用，前者表示要表示的元数据的名称，后者是元数据的值。

http-equiv 属性

http-equiv 也是和 content 一起使用，前者表示要表示的元数据的名称，后者是元数据的值。

http-equiv 所有允许的值都是特定 HTTP 头部的名称。

<head>
    <!-- 声明文档使用的字符编码 -->
    <meta charset='utf-8'>
    <!-- 页面内容的描述 -->
    <meta name="description" content="不超过150个字符"/>
    <!-- 页面关键词，使用逗号分隔。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类 -->
    <meta name="keywords" content=""/>
    <!-- 网页作者 -->
    <meta name="author" content="name, email@gmail.com"/>
    <!-- 搜索引擎抓取行为 -->
    <meta name="robots" content="index,follow"/>
    <!-- 为移动设备添加 viewport。width 用来设置 viewport 的宽度为设备宽度 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
	<meta name="format-detection" content="telphone=no, email=no"/>
    <!-- 指定双核浏览器的渲染方式： webkit，默认webkit内核；ie-comp，默认IE兼容模式；ie-stand，默认IE标准模式-->
 	<meta name="renderer" content="webkit|ie-comp|ie-stand">

    <!-- IE浏览器适配：
        IE=edge告诉浏览器，以当前浏览器支持的最新版本来渲染。
        chrome=1告诉浏览器，如果当前IE浏览器安装了Google Chrome Frame插件，就以chrome内核来渲染页面。 
        像上图这种两者都存在的情况：如果有chrome插件，就以chrome内核渲染，如果没有，就以当前浏览器支持的最高版本渲染。
        该属性支持的范围是 IE8-IE11。
        如果在http头部也设置了这个属性，并且和meta中设置的有冲突，那么哪一个优先呢？答案是：开发者偏好（meta元素）优先于Web服务器设置（HTTP头）。
    -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<!-- 一般来说，HTML页面中的a标签会自动启用DNS提前解析来提升网站性能，但是在使用https协议的网站中失效了，我们可以设置：  -->
    <meta http-equiv="x-dns-prefetch-control" content="on"/>
    <!-- 设置语言  -->
  	<meta http-equiv="Content-Language" Content="zh-cn" /> 
	<!-- 设置重定向（15秒后页面自动跳转到百度）  -->
  	<meta http-equiv="Refresh" Content="15; Url=http://www.baidu.com" /> 
	<!-- 设置网页到期时间（一旦网页过期，必须到服务器上重新下载）   -->
 	<meta http-equiv="Expires" Content="Web, 26 Jun 2015 18:21:57 GMT" /> 
	<!-- 不使用缓存（禁止浏览器从本地计算机的缓存中访问页面内容）  -->
 	<meta http-equiv="Pragma" Content="No-cach" /> 
	<!-- 不让百度转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <!-- 添加 RSS 订阅 -->
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
    <!-- Set-Cookie(cookie设定,如果网页过期，那么存盘的cookie将被删除) -->
    <meta http-equiv="Set-Cookie" content="cookie value=xxx; expires=Friday,12-Jan-200118:18:18GMT；path=/"> 
	
	<!-- iOS 设备 begin -->
	<!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-title" content="标题">
    <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"/>
    <!-- 设置苹果工具栏颜色 -->
	<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait"/>
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait"/>
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes"/>
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true"/>
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application"/>
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app"/>
	<!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no"/>

    <!-- iOS 图标 begin -->
    <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
	<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
    <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
    <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
    <!-- iOS 图标 end -->

    <!-- iOS 启动画面 begin -->
    <!-- iPad 竖屏 768 x 1004（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
    <!-- iPad 竖屏 1536x2008（Retina） -->
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
    <!-- iPad 横屏 1024x748（标准分辨率） -->
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
    <!-- iPad 横屏 2048x1496（Retina） -->
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
    <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
    <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
    <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
    <!-- iOS 启动画面 end -->
    <!-- iOS 设备 end -->
</head>
 


                

        

        

    




    

      

        

            

              
                
                  huangpb0624
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
HTML常用meta大全(推荐)

				
			

			

				

					11-21
				

			

		

		

			
				
HTML中的`<meta>`标签是网页头部不可或缺的一部分，它提供了关于HTML文档的元信息，即元数据（Metadata）。元数据不直接展示给用户，但对浏览器、搜索引擎和其他Web服务至关重要。`<meta>`标签通常位于`<head>`标签...

			
		

	



                

              
                



	

		

			

				
					
HTML常用meta大全

				
			

			

				

					SunSeekerX
				

				

					12-30
					
					3212
					
				

			

		

		

			
				
HTML常用meta大全

Meta标签是HTML语言head区的一个辅助性标签，它位于HTML文档头部的head标记和title标记之间，它提供用户不可见的信息。
Meta ： 即 **元数据（Metadata）**是数据的数据信息。
元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
用我们的大白话来说，它本身是一个没什么用的标签，但是一旦在它...

			
		

	



                


  
              

                


	

		

			

				
					
<meta>标签总结

				
			

			

				

					adobe1992
				

				

					06-19
					
					839
					
				

			

		

		

			
				
前言
meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签，会给你带来意想不到的效果，meta标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等！

html的meta总结

meta标签的组成：meta标签共有两个属性，它们分别

			
		

	





	

		

			

				
					
关于Web页面中的meta

				
			

			

				

					tanqth的专栏
				

				

					12-24
					
					1万+
					
				

			

		

		

			
				
META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的< HEAD>标记和< TITLE>标记之间，它提供用户不可见的信息。虽然不可见，却也非常有用。
标签格式如下：
< meta name=“keywords” content=“XXXX”/>
对应name说明：
　　1、Keywords (关键字)
　　　说明：为搜索引擎提供的关键字列表
　　　用法：< Meta name=“Keywords” Content=“关键词1,关键词2，关键

			
		

	



		

			
		



	

		

			

				
					
作为前端，你必须要知道的meta标签知识

				
			

			

				

					我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
				

				

					04-28
					
					2494
					
				

			

		

		

			
				
前言前几天面试baidu的时候，面试官问：你都知道什么meta标签？用处是什么？尽可能多的说出来。我：嗯…… 嗯…… 我一般都自动生成… 面试官：……后来俺找资料好好学了下，再看了taobao和头条的网页才知道：meta标签用处可大得很呐！今天就来浅浅总结一下。顺便感叹一下字节这块适配做的是真的蛮好概览meta标签一般放在整个html页面的head部分，在MDN中对他这样...

			
		

	





	

		

			

				
					
meat标签

				
			

			

				

					奔跑的五花肉灬
				

				

					11-05
					
					402
					
				

			

		

		

			
				
<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->  
<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->  
<head>  
    <!-- 声明文档使用的字符编码 -->  
    &...

			
		

	





	

		

			

				
					
20.2 HTML 常用标签

				
			

			

				

					07-28
				

			

		

		

			
				
在“20.2 HTML 常用标签”这个主题中，我们将深入探讨一些HTML中不可或缺的核心标签，这些标签对于创建功能性且结构清晰的网页至关重要。  1. **文档类型声明（<!DOCTYPE html>）**：这是每个HTML文档的开头，用于...

			
		

	





	

		

			

				
					
HTML meta的大作用

				
			

			

				

					09-28
				

			

		

		

			
				
在HTML文档中，meta标签是一个非常重要的元素，它提供了关于HTML文档本身的信息，使得浏览器和搜索引擎可以更好地处理页面内容。根据给定文件中的描述和内容，我们可以了解到meta标签的两大属性：name和http-equiv，...

			
		

	





	

		

			

				
					
常用HTML meta 标签属性(网站兼容与优化需要)

				
			

			

				

					09-28
				

			

		

		

			
				
以下是常用的HTML meta标签属性及其作用：  1. **`content`** 属性：  - `content` 属性与`http-equiv`或`name`属性一起使用，定义了相关元信息的具体内容。例如，`<meta name="description" content="网页描述">`。...

			
		

	





	

		

			

				
					
基于html的常用模板

				
			

			

				

					02-18
				

			

		

		

			
				
以下是对"基于html的常用模板"这一主题的详细解释：  1. **基础结构**：HTML模板的基本组成部分包括`<!DOCTYPE html>`声明、`<html>`根元素、`<head>`元数据部分和`<body>`主体内容。`<meta>`标签用于设置字符编码、...

			
		

	





	

		

			

				
					
WebApp里的Meta标签大全

				
			

			

				

					10-10
				

			

		

		

			
				
我们前端人员经常写html, 但是老是忽略meta 所以这里关于webap里meta标签的使用定义，这种情况下使用的含义

			
		

	





	

		

			

				
					
HTML5 常用meta标签

				
			

			

				

					lanyangyang0103的专栏
				

				

					03-28
					
					726
					
				

			

		

		

			
				
<!DOCTYPE html> 写在开头，声明为html5文档

<meta charset="utf-8">声明使用utf-8编码

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> 为搜索引擎定义关键字

<meta name="description" conten...

			
		

	





	

		

			

				
					
html-meta标签常用方法

				
			

			

				

					leon的博客
				

				

					07-14
					
					824
					
				

			

		

		

			
				
meta标签简介

			
		

	





	

		

			

				
					
HTML meta 标签

					
热门推荐

				
			

			

				

					zhangankang的博客
				

				

					06-28
					
					3万+
					
				

			

		

		

			
				
！！<meta> 标签是 HTML 语言头部的一个辅助性标签，我们可以定义页面编码语言、搜索引擎优化、自动刷新并指向新的页面、控制页面缓冲、响应式视窗等！



属性
			值
			描述
		charset( H5 New)
			character_set
			定义文档的字符编码。
		content
			text
			定义与 http-equiv 或 name 属性相关...

			
		

	





	

		

			

				
					
【web前端】＜meta＞标签

					
最新发布

				
			

			

				

					weixin_65728773的博客
				

				

					03-14
					
					428
					
				

			

		

		

			
				
定义与http-equiv或者name属性相关的元信息的值。content属性提供了“名称/值”对中的值，该值可以是任何有效的字符串。meta元素可以提供有关页面的元信息（meta-information）genetator为搜索引擎提供的网页使用的编辑器。descripiton为搜索引擎提供网页描述，keyword为搜索引擎提供的网页关键字；revised为搜索引擎提供的网页修订信息。robot为搜索引擎提供机器人向导参数。author为搜索引擎提供网页作者。定义元信息的名称，其中。

			
		

	





	

		

			

				
					
前端常用meta标签的作用以及全面整理

				
			

			

				

					皮皮虾的博客
				

				

					08-11
					
					3261
					
				

			

		

		

			
				
1、定义

&lt;meta&gt; 标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

2、作用

meta里的数据是供机器解读的，告诉机器该如何解析这个页面，还有一个用途是可以添加服务器发送到浏览器的http头部内容，例如我们为页面中添加如下meta标签：


&lt;meta...

			
		

	





	

		

			

				
					
meta标签知识

				
			

			

				

					qq_54281798的博客
				

				

					05-04
					
					935
					
				

			

		

		

			
				
一、概述
meta 标签一般放在整个 html 页面的 head 部分
1、定义：

meta 是文档级元数据元素，用来表示那些不能由其它 HTML 相关元素（< base >、< link >、< script >、< style >或< title >）之一标识的任何元数据

2、元数据的类型：

如果设置了 name 属性，meta 元素提供的是文档级别的元数据，应用于整个页面
如果设置了 http-equiv 属性 meta 元素则是编译指

			
		

	





	

		

			

				
					
html常见的meta标签,HTML中常用meta标签及说明

				
			

			

				

					weixin_34168228的博客
				

				

					06-16
					
					191
					
				

			

		

		

			
				
1.charset定义文档的字符编码例如：2. name 把 content 属性关联到一个名称，其属性有name 属性content 属性描 述description中文或英文字母均可规定页面的描述。搜索引擎会把这个描述显示在搜索结果中。例如：keywords中文或英文字母均可规定一个逗号分隔的关键词列表 - 相关的网页(告诉搜索引擎页面是与什么相关的)。提示：总是规定关键词(对于搜...

			
		

	





	

		

			

				
					
html的meta标签

				
			

			

				

					09-12
				

			

		

		

			
				
1. <meta charset="字符集">：指定HTML文档的字符编码方式，常用的有UTF-8和ISO-8859-1等。  2. <meta name="viewport" content="width=device-width, initial-scale=1.0">：用于在移动设备上正确地缩放网页内容，以...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值