常用的 HTML 头部标签
曾几何时,我们已经不再手写 HTML 标签。Emmet、Markdown 等工具让我们「健步如飞」,但是我们真的了解这些标签了吗?
基本标签
使用 HTML5 doctype,不区分大小写。
<!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 -->
声明文档使用的字符编码
<meta charset='utf-8'> <!-- 声明文档使用的字符编码 -->
优先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 优先使用 IE 最新版本和 Chrome -->
SEO 优化
每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。详细介绍
<meta name="description" content="不超过150个字符" /> <!-- 页面描述 -->
页面关键词
<meta name="keywords" content=""/> <!-- 页面关键词 -->
定义页面标题
<title>标题</title>
定义网页作者
<meta name="author" content="name, email@gmail.com" /> <!-- 网页作者 -->
定义网页搜索引擎索引方式,robotterms是一组使用英文逗号「,」分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。详细介绍
<meta name="robots" content="index,follow" /> <!-- 搜索引擎抓取 -->
可选标签
为移动设备添加 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">
iOS 设备
1.添加到主屏后的标题(iOS 6 新增)
<meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题(iOS 新增)
2.是否启用 WebApp 全屏模式
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebApp 全屏模式 -->
3.设置状态栏的背景颜色
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
只有在设置 "apple-mobile-web-app-capable" content="yes"
时生效
content 参数:
default
默认值。black
状态栏背景是黑色。black-translucent
状态栏背景是黑色半透明。
如果设置为 default
或 black
,网页内容从状态栏底部开始。
如果设置为 black-translucent
,网页内容充满整个屏幕,顶部会被状态栏遮挡。
4.禁止数字识自动别为电话号码
<meta name="format-detection" content="telephone=no" /> <!-- 禁止数字识自动别为电话号码 -->
Android
Android Lollipop 中的 Chrome 39 增加 theme-color meta 标签,用来控制选项卡颜色。
http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android
<meta name="theme-color" content="#db5945">
Windows 8
- Windows 8 磁贴颜色
<meta name="msapplication-TileColor" content="#000"/>
- Windows 8 磁贴图标
<meta name="msapplication-TileImage" content="icon.png"/>
其他
- 添加 RSS 订阅
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
- 添加 favicon icon
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
- 禁止 Chrome 浏览器中自动提示翻译
<meta name="google" value="notranslate">
原文见:https://github.com/yisibl/blog/issues/1
常用的 HTML 头部标签的更多相关文章
- 移动端web页面开发常用的头部标签设置
在移动端web页面开发中,我们常需要设置各种头部标签以帮助浏览器更好的解析页面,将页面完美呈现,这里列出了工作中常用的各种头部标签,以备查询. viewport <meta name=" ...
- 【03】HTML head 头部分的标签说明 和 手机头部标签说明
HTML head 头部分的标签.元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性.移动互联网时代,head 头部结 ...
- HTML5头部标签中<meta>常用信息
整理一些平时常用的,方便查阅 <!-- 字体编码 --> <meta charset="utf-8" /> <!-- 关键字 --> <m ...
- 移动前端头部标签(HTML5 head meta)
移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来.本文整理一些常用的meta标签. <!DOCTYPE html&g ...
- webkit,HTML5头部标签
大家都知道在移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来.本文整理一些HTML5头部<meta>标签常用的 ...
- 移动前端头部标签(HTML5 head meta)转载
移动web页面头部书写 字数2516 阅读1128 评论0 喜欢30 HTTP 标题信息(http-equiv) 和页面描述信息(name) http-equiv:该枚举的属性定义,可以改变服务器和用 ...
- 移动前端头部标签(HTML5 meta)
在移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码 <!DOCTYPE html> 使用 HTML5 doctype,不区分大小写 <he ...
- dedecms头部标签(标题,关键词,描述标签)(借用)
先说说dedecms头部标题,关键词,描述标签的作用我相信网络上也有很多这样的信息,那为什么我还要写这个?因为这个对我们初学者来说还是比较重要的,因为做SEO就要用到这些标签.首先我写下首页头部标签我 ...
- HTML之头部标签
<header> head 元素元素包含了所有的头部标签元素 可以添加在头部区域的元素标签为: title,style,meta,link,script,noscript,base < ...
随机推荐
- The current .NET SDK does not support targeting .NET Core 2.2
The current .NET SDK does not support targeting .NET Core 2.2 1. 奇怪的错误 最近遇到了一件奇怪的事, The current .NET ...
- Ubuntu vim使用
vim安装:apt-get install vim-gtk vim使用:默认启动插入模式,或者按‘I’进入插入模式,退出插入模式按‘esc’,用冒号‘:wq’进行保存退出: 其复制和粘贴是靠鼠标右键中 ...
- Nuget:RQCode
ylbtech-Nuget:QRCode 1.返回顶部 1. https://www.nuget.org/packages?q=qrcode 2. 2.qrcode.js返回顶部 1. https:/ ...
- request实现请求转发
ServletContext可以实现请求转发,request也可以. 在forward之前输入到response缓冲区中的数据,如果已经被发送到了客户端,forward将失败,抛出异常 在forwar ...
- jmeter 开发自己的java请求 二次开发
package test; import org.apache.commons.httpclient.HttpClient; import org.apache.commons.httpclient. ...
- JS---计算两个日期之间相差多少天
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- mongodb主从复制配置
dbpath=/home/mongodb/data logpath=/home/mongodb/log/mongodb.log logappend=true port= fork=true noaut ...
- CF-816A
A. Karen and Morning time limit per test 2 seconds memory limit per test 512 megabytes input standar ...
- 微信小程序开发之拼接json数组字符串
直接上代码 : var imageitem; var imageitemstring=''; for(var i=0;i< that.data.fbimages.length;i ...
- 二十五种网页加速方法和seo优化技巧
一.使用良好的结构 可扩展 HTML (XHTML) 具有许多优势,但是其缺点也很明显.XHTML 可能使您的页面更加符合标准,但是它大量使用标记(强制性的 <start> 和 <e ...