html5 head 标签
一、html lang 属性
以前我们常用的是 <html lang="zh-CN">
或简写的 <html lang="zh">
,但实际上 W3 language tags 推荐使用 zh-Hans 简体中文
、zh-Hant 繁体中文
,可以提高一致性和准确。
二、meta 标签
1.声明文档使用的字符编码
<meta charset="utf-8">
用于HTML5
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
用于HTML4
或者XHTML
或用于过时的 dom 解析器
通常我们会使用短的。实际上,在
HTML5
中,以上两种是等价的,只是短的更容易被记住。更多对比见 stackoverflow2.优先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 复制代码
3.360 使用 Google Chrome Frame
<!-- 如果没有安装 GCF(Google Chrome Frame),使用最高版本的IE内核渲染 --> <meta name="renderer" content="webkit" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> 复制代码
具体详情见 360 浏览器内核控制
<!-- 强制使用webkit渲染 --> <meta name="renderer" content="webkit"> <meta name="force-rendering" content="webkit"> 复制代码
4.百度禁止转码 在使用百度移动搜索时,百度会自动将网站进行转码,添加一些烦人的广告,如果我们不做百度广告,是可以通过
meta
标签禁止网站被转码<meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <!-- 表示页面同时适合在移动设备和PC上进行浏览 --> <meta name="applicable-device" content="pc,mobile"> 复制代码
相关网站:
- 百度移动搜索
- 起飞页网站
- 博客
5.SEO 优化
- 页面标题 title
<title>your title</title> 复制代码
- 页面关键词 keywords
<meta name="keywords" content="your keywords"> 复制代码
- 页面描述内容 description
<meta name="description" content="your description"> 复制代码
- 定义网页作者 author
<meta name="author" content="author,email address"> 复制代码
- 定义网页搜索引擎索引方式 SEO--Robots
<meta name="robots" content="index,follow"> 复制代码
6.为移动设备添加
viewport
,可以让布局在移动浏览器上显示的更好<metaname ="viewport"content ="width=device-width,initial-scale=1.0,maximum-scale=3.0,minimum-scale=1.0,user-scalable=no" > 复制代码
width=device-width
会导致 iPhone5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边注意:
minimal-ui
iOS8 中已经删除7.ios 设备
- 添加到主屏后的标题(iOS 6 新增)
<meta name="apple-mobile-web-app-title" content="标题"> 复制代码
- 是否启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏
<meta name="apple-mobile-web-app-capable" content="yes"/> 复制代码
- 设置状态栏的背景颜色
<!-- 在 "apple-mobile-web-app-capable" content="yes" 时生效 --> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 复制代码
content 参数
default 默认值。 black 状态栏背景是黑色。 black-translucent 状态栏背景是黑色半透明。如果设置为 default 或 black ,网页内容从状态栏底部开始。如果设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。 复制代码
- 禁止数字识自动别为电话号码
<meta name="format-detection" content="telephone=no" /> <!-- 电话号码、邮箱 --> <meta name="format-detection" content="telephone=no,email=no" /> 复制代码
- 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)
<metaname="apple-itunes-app"content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" > 复制代码
content 属性可以传三个参数,以逗号隔开:
app-id(必选) 填写应用在APPStrore的ID affiliate-data(可选) 是iTunes 分销联盟计划的ID 一般用不到。 app-argument(可选)点击『打开』给APP传参数 复制代码
8.关闭 chrome 浏览器下翻译插件
<meta name="google" value="notranslate" /> 复制代码
9.去除手机半透明背景
- ios 点击链接,会出现一个半透明灰色遮罩
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); 复制代码
- android 点击链接,会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样,可以做一下设置去除部分机器自带的效果
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); 复制代码
- windows phone 系统,点击标签产生的灰色半透明背景,添加
meta
标签去除
<meta name="msapplication-tap-highlight" content="no"> 复制代码
注意:部分机型可能去除不了,如果是按钮,可以避免使用
a
、input
,使用div
代替10.刷新浏览器 content -- 时间;网址
<meta http-equiv="Refresh" content="2;URL=http://www.baidu.com"> 复制代码
11.强制竖屏与全屏 landscape -- 横屏;portrait -- 竖屏
<!-- 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"> 复制代码
12.应用模式
<!-- UC应用模式:默认全屏,禁止长按菜单,禁止手势,标准排版,强制图片显示 --> <meta name="browsermode" content="application"> <!-- QQ应用模式 --> <meta name="x5-page-mode" content="app"> 复制代码
browsermode
作用:<!-- UC使用适屏模式显示 --> <meta name="layoutmode" content="fitscreen"> <!-- UC强制图片显示 --> <meta name="imagemode" content="force"> <!-- UC禁止夜间模式显示 enable|disable --> <meta name="nightmode" content="disable"> <!-- UC当页面有太多文字时禁止缩放 --> <meta name="wap-font-scale" content="no"> 复制代码
13.UC排版模式
UC 浏览器提供两种排版模式,分别是适屏模式(fitscreen)及标准模式(standard),其中适屏模式简化了一些页面的处理,使得页面内容更适合进行页面阅读、节省流量及响应更快,而标准模式则能按照标准规范对页面进行排版及渲染。
<meta name="layoutmode" content="fitscreen|standard"> 复制代码
14.cookie 设定指定时间后删除
<!-- Set-Cookie(cookie设定):如果网页过期,那么存盘的cookie将被删除 GMT格式 --> <metahttp-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/" > 复制代码
三、参考链接
- SEO--Robots
- 移动端头部 meta 大全
html5 head 标签相关推荐
- html页面视频标签,html5基础标签(html5视频标签 html5新标签用法)
点评:html5基础,包括html5视频标签和html5新标签等标签用法,大家参考使用吧 1. 声明的变化 2. 指定字符编码的变化,html5中建议使用utf-8 3. Html5中允许 没有 ...
- html5新标签使用
HTML 5 视频标签<video> <video width="320" height="240" controls="contr ...
- php中 datalist,html5 datalist标签的用法是什么?这里有datalist标签的用法实例
本篇文章主要为大家讲述了关于html5 datalist标签的用法及html5 datalist标签的用法实例.本文说了两个常用的选项框的实例供大家选择观看,下面就让我们一起来看这篇文章吧 我们先来看 ...
- 20 Java程序员面试宝典视频课程之HTML5新标签、功能
一.HTML5认识?(是什么,为什么) 答: 1.HTML5指的是包括 HTML . CSS 和 JavaScript 在内的一套技术组合. 2.HTML4陈旧不能满足日益发展的互联网需要,特别是移动 ...
- HTML语义化:HTML5新标签——template
一.前言 当我们使用String-base的模板引擎(如Handlebars.js等)时,要么就通过外部文件存放模板文本,需要时再通过XHR或script标签加载进来:要么通过<script t ...
- HTML5 Audio标签方法和函数API介绍
问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函 ...
- html5新特性 移除哪些,html5\CSS3有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?...
(1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...
- html5 meta标签属性整理
html5 meta标签属性整理 前言:不知道有没有人觉得,html的meta标签描述的头部信息特别多,有针对的SEO的头部信息,也有针对移动设备的头部信息,今日特地在网上搜集资料自己稍微对其整理一下 ...
- c 嵌入html5 win7,Html5新标签解释及用法
2011-01-28 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的 ...
- 【html 及 HTML5所有标签汇总】★★★
/****************************************************************************/ [HTML5所有标签汇总]★★★ /*** ...
最新文章
- 人工神经外网络中为什么ReLu要好过于Tanh和Sigmoid Function?
- 剑指offer:矩形覆盖
- Spring 中 Bean 的生命周期
- boost::mp11::mp_set_difference相关用法的测试程序
- sklearn 线性回归_使用sklearn库做线性回归拟合
- MySQL配置变量log-bin,重启数据库服务失败
- java算法实验标尺问题_在codeigniter项目中使用标尺库
- 安卓开发——锁定软件——输入密码后重复弹出输入密码窗口的解决方法
- NanoLog软件架构
- python elementtree 命名空间_用Python中的命名空间通过‘ElementTree’解析XML
- SQL语句详解(一)——基本增删改操作
- Security6:查看授予的权限
- VS2005 + VSS2005 的方法
- 使用Jenkins实现自动化构建!
- 好用的dns服务器工具有哪些?
- excel换行按什么键_excel中关于自动换行和强制换行那些事儿
- IDEA设置为Eclipse常用快捷键keymap
- 每周分享第 23 期
- 2019年中国自动驾驶行业报告:互联网企业与整车厂商互有优势
- 到底怎样才能学好Python
热门文章
- LeetCode(16)题解--3Sum Closest
- PHP高效的敏感词过滤方法
- 在Windows Server 2008的桌面上显示“我的电脑”“网上邻居”等图标?
- 汇编语言学习笔记-按指定的字体输出文本
- Linux下mysql 5.x得到root密码后的另外一种利用方式
- android 多种特效TextView
- [转帖]迎战AMD 7nm 64核EPYC 英特尔至强也玩起了胶水以及性价比
- C#中使用JavaScriptSerializer类实现序列化与反序列化
- SpringBoot集成多数据源
- 计算机网络spoc作业4