`

整理 H5 meta 标签的详解

阅读更多

 持续会添加一些新的内容:

<meta charset="UTF-8">
<!--
设置 H5 的编码格式
charset 是字符集的意思
设置 UTF-8 编码
需要使用 charset 为网页提供了一种编码方式,否则页面很可能出现乱码。
UTF-8 是一种字符编码,除此之外在国内网站常用的还有GB2312和GBK。
GB2312 和 GBK 主要用于汉字编码,utf-8 是国际编码,实用性比较强。
-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--
viewport 意思是视图
width 设置视觉窗口的宽度,为一个正整数,或字符串"width-device"
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置视觉窗口的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许
-->

 

 meta中的name属性

<!--用以说明生成工具-->
<meta name="Generator" content="">     
 <!--向搜索引擎说明你的网页的关键词-->
<meta name="Keywords" content=""> 
<!-- 告诉搜索引擎你的站点的主要内容-->
<meta name="Description" content=""> 
<!-- 告诉搜索引擎你的站点的制作的作者 -->    
<meta name="Author" content="你的姓名">
<meta name="Robots" content= "all|none|index|noindex|follow|nofollow">
<!--  
设定为all:文件将被检索,且页面上的链接可以被查询;     
设定为none:文件将不被检索,且页面上的链接不可以被查询;     
设定为index:文件将被检索;     
设定为follow:页面上的链接可以被查询;     
设定为noindex:文件将不被检索,但页面上的链接可以被查询;     
设定为nofollow:文件将不被检索,页面上的链接可以被查询。
-->

 

 meta中的 http-equiv属性

<!--设置字符编码和文件格式-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--设置定时刷新-->
<meta http-equiv="Refresh" content="8;url=http://">
<!-- 告诉浏览器不要缓存页面-->
<meta http-equiv="Pragma" content="no-cache">
<!-- 告诉浏览器不要缓存页面 -->
<meta http-equiv="cache-control" content="no-cache">
<!--禁用浏览器缓存此页面-->
<meta http-equiv="expires" content="0">
<!--设置ie的文档兼容模式,设置IE7+的浏览器以IE7的兼容模式查看页面-->
<meta http-equiv="X-UA-Compatible" content="IE=7">

 

html5中更多的meta与link

<!DOCTYPE html> <!-- HTML5 doctype 不区分大小写 -->
<html lang="zh"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
 
<head>
<meta charset="UTF-8">
 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 优先使用IE最新版本和 Chrome -->
<meta name="renderer" content="webkit|ie-comp|ie-stand"> <!-- 360 浏览器内核控制 -->
<!--
content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用webkit内核,IE兼容内核,IE标准内核。
若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit"> 
若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp"> 
若页面需默认用ie标准内核,增加标签:<meta name="renderer" content="ie-stand">
-->

<!-- width=device-width 会导致 iPhone 5 添加到主屏后以 WebAPP 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
<meta name ="viewport" content ="initial-scale=1.0, maximum-scale=3, minimum-scale=1, user-scalable=no">
 
<meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏时的标题 -->
 
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebAPP 全屏模式 -->
 
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- 状态条颜色 -->
 
<meta name="format-detection" content="telephone=no" /> <!-- 屏蔽数字自动识别为电话号码 -->

<!-- favicon 图标 -->
<link type="image/x-icon" rel="icon" href="http://static.example.com/favicon.ico"/>
<link type="image/x-icon" rel="shortcut icon" href="http://static.example.com/favicon.ico"/>
<link type="image/x-icon" rel="bookmark" href="http://static.example.com/favicon.ico"/>

<!-- iOS 图标 begin -->
<!--默认 57x57 像素-->
<link rel="apple-touch-icon-precomposed" href="http://wanke.etao.com/assets/img/icon/57/apple-touch-icon-57x57-precomposed.png" />
<!--iPad 1 72x72 像素-->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://wanke.etao.com/assets/img/icon/72/apple-touch-icon-72x72-precomposed.png" />
<!--iPhone 4 114x114 像素-->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://wanke.etao.com/assets/img/icon/114/apple-touch-icon-114x114-precomposed.png" />
<!-- iOS 图标 end -->
 
<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

<!-- SEO 优化 -->
<meta name="description" content="" /> <!-- 页面描述 -->
<meta name="keywords" content=""/> <!-- 页面关键词 -->
<title>页面标题</title>

<!-- iOS 应用启动界面设置 begin -->
<!-- iPad Landscape – 1024 x 748 -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />
<!-- iPad Portrait – 768 x 1004 -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />
<!-- iPhone/iPod Touch Portrait – 320 x 480 (standard resolution) -->
<link rel="apple-touch-startup-image" href="img/splash-screen-320x480.png" />
<!-- iPhone/iPod Touch Portrait – 640 x 960 pixels (high-resolution) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />
<!-- iOS 应用启动界面设置 end -->

</head>

 

 基本的meta设置:

<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maxinum-scale=1,width=device-width">
<meta content="telephone=no" name="format-detection">
<meta name="applicable-device" content="mobile">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no,email=no">

 

<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!-- 启用webAPP全屏模式-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 隐藏状态栏或者设置状态栏的颜色-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 忽略数字自动识别为电话号码-->
<meta name="format-detection" content="telephone=no">
<!--控制缓存的失效日期 -->
<meta http-equiv="Expires" content="-1">
<!-- 禁止转码-->
<meta http-equiv="Cache-Control" content="no-cache">
<!-- 禁止缓存访问页面-->
<meta http-equiv="Pragma" content="no-cache">
<meta name="applicable-device" content="mobile">
<!-- X5内核下强制横屏或者竖屏-->
<meta name="x5-orientation" content="portrait" />
<!--X5下设置全屏-->
<meta name="x5-fullscreen" content="true" />
<!-- UC强制竖屏或横屏-->
<meta name="screen-orientation" content="portrait">
<!-- UC全屏显示-->
<meta name="full-screen" content="yes">
<!--禁止识别电话号码和邮箱-->
<meta name="format-detection" content="telephone=no, email=no" />
<!-- 页面关键词-->
<meta content="" name="keywords">
<meta name="description" content="">

 

 

 

 

 

 

 

1
0
分享到:
评论

相关推荐

    h5day1.docx

    3. **元数据标签 `&lt;meta&gt;`** - 用于定义文档的元数据,如字符集、关键词等,对于搜索引擎优化至关重要。 - 示例:`&lt;meta charset="utf-8"&gt;` 设置文档编码为UTF-8。 - `&lt;meta name="keyword" content="淘宝,网上...

    酷炫 浪漫 h5表白网页 一点一滴 制作不易

    【酷炫浪漫的H5表白网页制作详解】 在数字化的时代,用创新的方式表达情感成为了一种新潮流。本文将深入探讨如何利用HTML、CSS和JavaScript(包括jQuery)技术,制作一款“酷炫浪漫的H5表白网页”,让你的爱意在...

    H5 面试题总结

    ### H5前端面试题知识点详解 #### 一、HTML和CSS ##### 1. 测试过的浏览器及其内核 - **Chrome**: Blink 内核 - **Firefox**: Gecko 内核 - **Safari**: WebKit 内核 - **Internet Explorer (IE)**: Trident 内核 -...

    H5基础及高级

    ### H5基础及高级知识点详解 #### 一、内联元素与块元素 - **内联元素与块元素概述** - **内联元素**(Inline Element):默认情况下,这些元素只占据必要的空间,不会形成新的行。例如,`&lt;span&gt;`、`&lt;a&gt;`等都是...

    HTML5标签嵌套规则详解【必看】

    - **元数据型 (Metadata Content)**:这类元素主要用于描述文档或其他内容,如`&lt;meta&gt;`, `&lt;link&gt;`, `&lt;script&gt;`, `&lt;style&gt;`等。 - **区块型 (Sectioning Content)**:定义文档的结构区域,如`&lt;article&gt;`, `&lt;aside&gt;`...

    详解搭建一个vue-cli的移动端H5开发模板

    - 通过设置路由对象`meta`属性`keepAlive`来控制页面是否需要缓存,例如:`{path: '/', component: Home, meta: { keepAlive: true }}` **6. 页面组件封装** - 可以封装常用的组件如`toast`、`dialog`和底部导航栏...

    详解移动端h5页面根据屏幕适配的四种方案

    在移动端H5页面开发中,适配屏幕是一个重要的任务,以确保内容在不同尺寸和分辨率的设备上都能正常显示。以下将详细介绍四种常见的适配方案: ### 方法一:引入淘宝开源的可伸缩布局方案(lib-flexible) 淘宝的可...

    h5自适应五金机械企业网站html源码静态模板.zip

    7. SEO优化:一个优秀的HTML5自适应模板应考虑搜索引擎优化(SEO),例如合理使用meta标签、确保内容可爬取、优化页面加载速度等,以提高网站在搜索引擎中的排名。 8. 兼容性:由于H5技术的广泛支持,这个模板通常...

    077_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip

    在自适应响应式设计中,HTML会使用如`&lt;meta&gt;`标签的视口设置(viewport meta tag),以及媒体查询(media queries)来适应不同设备的显示。 2. CSS:负责样式和布局,通过选择器匹配HTML元素并应用样式规则,让网页...

    vue移动端的左右滑动事件详解

    本文实例为大家分享了vue移动端左右滑动事件,供大家参考,具体内容如下 &lt;!...&lt;... &lt;head&gt;...meta charset=UTF-8&gt;...meta name=viewport content=width=device-width, initial-...meta content=telephone=no name

    H352_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip

    5. SEO优化:使用语义化HTML标签,添加meta标签,优化图片大小和格式,确保搜索引擎能够理解和索引网页内容。 6. 性能优化:压缩CSS和JavaScript文件,减少HTTP请求,使用CDN加速资源加载,优化图片和视频,实现更...

    html语法概述和各个标签的说明

    ### HTML语法概述与各标签详解 #### 一、HTML语法概览 HTML(Hyper Text Markup Language),即超文本标记语言,是一种用来创建网页的标准标记语言。它通过一系列的标签来组织网页内容,使得内容能够被浏览器正确...

    HTML5常用方法

    #### 一、Meta标签详解 Meta标签主要用于定义页面的元信息,比如字符集、页面描述、关键词等,这些信息对于搜索引擎优化(SEO)至关重要。 ##### 1. Charset属性 - **用途**:设置文档的字符编码格式。 - **示例*...

    139web_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip

    该资源中的HTML5模板,不仅考虑了桌面端的展示效果,还通过meta标签实现了对不同屏幕尺寸的适配,确保在手机和平板上也能有良好的用户体验。 其次,CSS(Cascading Style Sheets)是用于控制网页样式的语言,特别是...

    H674_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip

    7. SEO友好:使用语义化HTML和合适的meta标签,有助于搜索引擎理解和索引网页内容。 8. Accessibility:遵循无障碍(WCAG)标准,确保残障人士也能轻松访问网站。 综上所述,这个压缩包中的源码应该包含了实现上述...

    368web_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip

    手机和电脑的自适应设计,意味着源码中可能包含meta标签,如`&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;`,用于确保页面在不同设备上都能正确显示。 CSS(Cascading Style Sheets)则...

    1081js_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip

    这套源码中可能包含了各种响应式的HTML标签和属性,如`&lt;meta name="viewport"&gt;`,用于设定视口宽度,确保页面在不同设备上正确缩放。 其次,CSS(层叠样式表)是控制页面外观和布局的重要工具。在移动端,CSS3的...

    H5移动端适配 Flexible方案

    1. 设置viewport元标签:通过`&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;`,确保页面宽度与设备宽度一致,并保持初始缩放比例为1。 2. 引入Flexible.js库:这个库会根据设备的dpr动态...

    红辉煌相机_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip

    为了提高搜索引擎的可见性,源码可能遵循SEO最佳实践,如添加meta标签,优化页面标题、描述,以及确保所有链接和图片都有合适的alt属性。 7. 移动优先策略: "红辉煌相机"遵循移动优先的设计原则,先为移动设备...

Global site tag (gtag.js) - Google Analytics