HTML5头部标签中<meta>常用信息

最新推荐文章于 2021-06-03 07:22:48 发布
最新推荐文章于 2021-06-03 07:22:48 发布
阅读量118 收藏
点赞数
原文链接：http://www.cnblogs.com/linh93/p/6808506.html
版权

 整理一些平时常用的，方便查阅

<!-- 字体编码 -->
<meta charset="utf-8" />

<!-- 关键字 -->
<meta name="keywords" content="" />

<!-- 说明 -->
<meta name="description" content="" />

<!-- 作者 -->
<meta name="author" content="" />

<!-- 设置文档宽度、是否缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

<!-- 优先使用IE最新版本或chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<!-- 360读取到这个标签立即钱换到极速模式 -->
<meta name="renderer" content="webkit" />

<!-- 禁止百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />

<!-- UC强制竖屏 -->
<meta name="screen-orientation" content="portrait" />

<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait" />

<!-- UC强制全屏 -->
<meta name="full-scerrn" content="yes" />

<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="ture" />

<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app" />

<!-- UC应用模式 -->
<meta name="browsermode" content="application">

<!-- window phone 点亮无高光 -->
<meta name="msapplication-tap-highlight" content="no" />

<!-- 安卓设备不自动识别邮件地址 -->
<meta name="format-detection" name="email=no" />

<!-- iOS设备 -->

<!-- 添加到主屏幕的标题 -->
<meta name="apple-mobile-web-app-title" content="标题" />

<!-- 是否启用webApp全屏 -->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- 设置状态栏的背景颜色，启用webapp模式时生效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent/black/default" />
<!-- 半透明/黑色/默认白色 -->

<!-- 禁止数字识别为电话号码 -->
<meta name="format-detection" content="telephone=no" />

<!-- 智能添加广告条 -->
<meta name="apple-itunes-app" content="app-id=myappstoreID,affiliate-data=myaffiliatedata,app-argument=myurl" />

移动设备使用添加 viewport

viewport 可以让布局在移动浏览器上显示的更好。 通常会写

<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> 

<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 
http://bigc.at/ios-webapp-viewport-meta.orz -->

content 参数：

  • width viewport 宽度(数值/device-width)
  • height viewport 高度(数值/device-height)
  • initial-scale 初始缩放比例
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是否允许用户缩放(yes/no)
  • minimal-ui iOS 7.1 beta 2 中新增属性（注意：iOS8 中已经删除），可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。

<meta name="viewport" content="width=device-width,user-scalable=yes">

适配 iPhone 6 和 iPhone 6plus 则需要写：

<meta name="viewport" content="width=375">
<meta name="viewport" content="width=414">

大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。

 

更多关于头部标签<head>里的内容请查看这位http://www.cnblogs.com/xiuhongbin/p/meta.html的博客

转载于:https://www.cnblogs.com/linh93/p/6808506.html

weixin_30768175
关注
HTML常用标签-----例如＜p＞＜img＞＜li＞等
qq_56798763的博客
07-04 1016
1.HTML5头部结构 【DOCTYPE html】 声明文档类型为HTML5文件。 文档声明在HTML5文档必不可少，且必须放在文档的第一行。 【meta标签】 1.charset属性：单独使用，设置文档字符及编码格式。 写法：<meta charset="UTF-8"> 常见的中文编码格式： B-2312:国标码，简体中文 GBK：扩展的国标编码，简体中文 UTF-8:万国码 Unicode码，基本兼容各国语言文字 2.http-equiv属性：需配合c..
2.web前端开发（一）0226html基础
guozhuanchen的博客
02-26 561
一、html概述 1.html是超文本标记语言，主要就是一系列标签组成 2.使用的工具是 Visual Studio Code 3.html是搭建网页的框架、css是把html写的框架进行美化、javaScript是实现数据的交互、react或者vue是前端框架使得开发更简便 4.可以自己学习的网址 W3school 菜鸟教程 二、主要的标签以及其对应的属性 （一）进入工具 写出默认的网页 并认识基本框架 1.进入工具 打出默认的结构 先按 ！ 在按 tab键 2.对框架的认识 <!DOCTY
HTML头信息标签和标题标签
weixin_30640769的博客
11-22 206
<html> <!-- 头信息的作用 1. 可以设置网页的标题。 2. 可以通知浏览使用指定的码表解释html页面. --> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title&gt...
HTML5头部信息解释
吃瓜群众的博客
03-10 639
<!-- viewport:视口； width=device-width：表示获取设备的宽度； initial-scale=1初始化缩放级别 user-scalable：是否用于用户自动缩放 minimum-scale：最小缩放，一般设置了用户不允许缩放，就没必要设置最大最小缩放 maximum-scale：最大缩
HTML5 head头部 meta标签属性整理
Kris的博客
01-03 1560
移动前端开发中添加一些专属的HTML5头部标签，帮助浏览器更好解析HTML代码，更好地将移动web前端页面表现出来 meta是html语言head区的一个辅助性标签。meta标签的作用有：搜索引擎优化（seo），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等等等等！ meta标签的组成：共有两个属性，它们分别是name属性和h...
在html文档中什么元素包含在头部分,HTML笔试题目(附答案)HTML基础知识笔试题目(附答案)...
weixin_29256771的博客
06-03 412
1、{HTML题目}在HTML页面中制作一个图像，想要在鼠标指向这个图像时浮出一条提示信息，应该使用的参数是:( C ) (选择1项)A) POP B) SRC C) ALT D) MSG2、{HTML题目}在页面中看不见的表单元素是那种( C )(选择1项)A) B)C) D)3、(HTML题目)以下哪一个项目是用来访问web页的软件( B )(选择1项)A)Outlook Express B)...
XZ_HTML5之HTML5头部和元信息
understand_XZ的博客
09-11 396
使用元素可以定义HTML文档头，该元素可以包含如下子元素。 :该元素用于包含JavaScript脚本。 :该元素用于定义内部CSS样式。 :该元素用于链接外部CSS样式等资源。 :该元素用于定义文档标题。该元素较为常用的属性是id，作为其唯一标识。该元素只能包含文本内容，该文本内容就是该文本的标题。 :该元素用于指定该页面所有链接的基准链接。该元素必须是空元素，该元素除了可以指定id作为
HTML5头部<meta>标签的一些常用信息小结
09-27
本文将针对HTML5中头部的`<meta>`标签做一些常用信息的小结，包括字符编码设置、SEO优化、视图和浏览体验的调整等方面的知识。 1. 字符编码 字符编码告诉浏览器如何将字符编码转换为字符。对于中文网页来说，通常...
HTML5头部meta标签的一些常用信息小结
12-14
HTML5的头部`<meta>`标签是网页元数据的重要组成部分，它们提供了关于网页的各种信息，帮助浏览器正确解析和渲染页面，同时也有利于搜索引擎优化（SEO）和设备适配。以下是一些常用的`<meta>`标签及其作用： 1. **...
掌握HTML源信息标记<META>：关键属性与应用教程
- `<HEAD>`：头部部分，包含了页面的元数据和控制信息，如标题 `<TITLE>` 和可能用于搜索引擎的 `<META>` 标签。 - `<BODY>`：主体部分，包含了网页的主要内容，如文本、图像、链接等，这些内容会被浏览器实际展示...
移动端适配：
weixin_45376220的博客
09-27 368
1.viewport适配 不论设备宽度是多少，统一把布局视口设置成设计稿的宽度。假设设计稿宽度是375px。 ①.<meta name=“viewport” content=“width=375px”> 不管屏幕多大，都看作375px。width只能改变布局视口，不能改变视觉视口。 ②.<meta name=“viewport” content=“width=device-wid...
html5 新特性：文档声明和头部信息 ( !DOCTYPE 和 meta 标签)
weixin_41796631的博客
04-19 2174
Html5 推出的新内容比较多，本文我们来介绍两个重点内容，文档类型声明和头部信息 文档类型声明 ： Html4.01和 Xhtml1.0：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d...
HTML页面HEAD信息介绍
『Ａｌｌｅｎ』Blog
12-29 1522
    注：在本文的收集整理中，如有不全的地方和或有误的地方，请斧正，谢谢！    您的个人网站即使做得再精彩，在“浩瀚如海”的网络空间中，也如一叶扁舟不易为人发现，如何推广个人网站，人们首先想到的方法无外乎以下几种：　　　　●　在搜索引擎中登录自己的个人网站　　　　●　在知名网站加入你个人网站的链接　　●　在论坛中发帖子宣传你的个人网站　　META标签是HTML语言HEAD区的一个辅助性
HTML5头部meta整理
晨丶曦_的博客
04-29 1503
页面关键词<meta name="keywords" content="关键字，多个关键字用，隔开" />页面描述<meta name="description" content="150个字符以内" />搜索引擎索引方式<meta name="robots" content="index,follow" /> <!-- 以下是content里面可以有的索引值，多个索引方式用，隔开！！ all
前端面试题总结-HTML篇
qwe78999的博客
05-16 5186
HTML知识点总结 1. DOCTYPE的作用是什么？   DOCTYP是document type(文档类型)的缩写。<!DOCTYPE> 声明位于文档的最前面，处于标签之前，它不是html标签。   主要作用是：告诉浏览器以什么样的模式来解析文档。   一般指定了之后会以标准模式来进行文档解析，否则就医兼容模式进行解析。在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下，浏览器会以向后兼容的方式来模拟老式浏览器的行为，以保证一些老的网站的正确访问。 2. 标准模式与
android h5 rem插件,移动端H5页面rem缩放方案flexible.js兼容375px方案的思路
weixin_31815843的博客
05-27 704
参考：css一个新的项目复用了一些老页面，老页面是使用375px方案进行移动端适配的，meta[viewport]使用的是，而新页面使用的是flexible.js伸缩方案，动态生成meta[viewport]如何在老页面使用px布局的前提下，新页面使用rem布局，组件也使用rem布局，而且组件能够兼容老页面和新页面是本文的结果。首先会介绍375px方案和rem方案的实现原理。git375px方案3...
HTML页面头部信息
晨丶曦_的博客
04-08 2763
1.让一些搜索引擎可以搜索到你的网页：<meta name="keywords" content="搜索的关键字"> <meta name="description" content="网站描述文字">2.让一个页面过一段时间自动挑战到另一个页面<meta http-equiv="refresh" content="5"> 这个表示页面每5秒刷新一次<meta http-equiv="refre
前端---HTML5头部和元信息
Nagile-zhou博客
09-22 1126
使用&lt;head.../&gt;元素可以定义HTML文档头和元信息元素。               1.使用&lt;head.../&gt;元素可以定义HTML文档头,该元素可以包含如下子元素. &lt;script.../&gt;:该元素用于包含JavaScript脚本.关于JavaScript的介绍,在我之后的博客会有介绍. &lt;noscript.../&gt;:该元素用...
移动端H5页面rem缩放方案flexible.js兼容375px方案的思路
weixin_33738578的博客
07-17 1005
参考： 移动端高清、多屏适配方案 viewport-and-flexible.js flexible.js github 一个新的项目复用了一些老页面，老页面是使用375px方案进行移动端适配的，meta[viewport]使用的是<meta name="viewport" content="width=375, user-sca...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值