时间:2021-07-01 10:21:17 帮助过:10人阅读
部分的清单,让大家了解每个标签及相应属性的意义,写出满足自己需求的
头部标签,可以很有效的增强页面的可用性。
注:去年整理过移动前端不得不了解的html5 head 头标签,随着时间和浏览器厂商的升级,现在看起来似乎有些过时了。所以重新整理了一下。增加了新的内容,及过时的一些提示,同时增加了部分桌面端浏览器的一些说明。
下面是HTML基本的头部元素:
doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>页面标题title>
...
head>
其中
<meta http-equiv="x-ua-compatible" content="ie=edge">
在桌面开发的时候可以让IE浏览器以最新的模式渲染页面,具体可以查看本文Internet Explorer浏览器部分。
如果你的页面确定只在桌面浏览器中运行,那么
<meta name="viewport" content="width=device-width, initial-scale=1">
也可以省略。
DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 html
标签之前,此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。
使用 HTML5 doctype,不区分大小写。
DOCTYPE html>
声明文档使用的字符编码,
<meta charset="utf-8">
html5 之前网页中会这样写:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
这两个是等效的,具体可移步阅读: vs
,所以建议使用较短的,易于记忆。
更加标准的 lang 属性写法 http://zhi.hu/XyIa
简体中文
<html lang="zh-cmn-Hans">
繁体中文
<html lang="zh-cmn-Hant">
很少情况才需要加地区代码,通常是为了强调不同地区汉语使用差异,例如:
<p lang="zh-cmn-Hans"> <strong lang="zh-cmn-Hans-CN">菠萝strong>和<strong lang="zh-cmn-Hant-TW">鳳梨strong>其实是同一种水果。只是大陆和台湾称谓不同,且新加坡、马来西亚一带的称谓也是不同的,称之为<strong lang="zh-cmn-Hans-SG">黄梨strong>。 p>
为什么 lang="zh-cmn-Hans"
而不是我们通常写的 lang="zh-CN"
呢,请移步阅读: 页头部的声明应该是用 lang=”zh” 还是 lang=”zh-cn”。
meta标签是HTML中head头部的一个辅助性标签,它位于HTML文档头部的 和
标记之间,它提供用户不可见的信息。虽然这部分信息用户不可见,但是其作用非常强大,特别是当今的前端开发工作中,设置合适的meta标签可以大大提升网站页面的可用性。
桌面端开发中,meta标签通常用来为搜索引擎优化(SEO)及 robots定义页面主题,或者是定义用户浏览器上的cookie;它可以用于鉴别作者,设定页面格式,标注内容提要和关键字;还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级,等等。
移动端开发中,meta标签除了桌面端中的功能设置外,还包括,比如viewport设置,添加到主屏幕图标,标签页颜色等等实用设置。具体可以看后面详细的介绍。
meta标签根据属性的不同,可分为两大部分:http-equiv 和 name 属性。
http-equiv:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助浏览器正确地显示网页内容。
name属性:主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于浏览器,搜索引擎等机器人识别,等等。
<meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="Content-Security-Policy" content="default-src 'self'"> <meta name="application-name" content="应用名称"> <meta name="description" content="一个页面描述"> <meta name="robots" content="index,follow,noodp"> <meta name="googlebot" content="index,follow"> <meta name="google" content="nositelinkssearchbox"> <meta name="google" content="notranslate"> <meta name="google-site-verification" content="verification_token"> <meta name="generator" content="program"> <meta name="subject" content="你的网站主题"> <meta name="abstract" content=""> <meta name="url" content="https://example.com/"> <meta name="directory" content="submission"> <meta name="rating" content="General"> <meta name="referrer" content="never"> <meta name="format-detection" content="telephone=no"> <meta http-equiv="x-dns-prefetch-control" content="off"> <meta http-equiv="set-cookie" content="name=value; expires=date; path=url"> <meta http-equiv="Window-Target" content="_value"> <meta name="ICBM" content="latitude, longitude"> <meta name="geo.position" content="latitude;longitude"> <meta name="geo.region" content="country[-state]"> <meta name="geo.placename" content="city/town">
相关的详细说明请查看:
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 参数:
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
而如果你的网站不是响应式的,请不要使用 initial-scale 或者禁用缩放。
<meta name="viewport" content="width=device-width,user-scalable=yes">
相关链接:非响应式设计的viewport
适配 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 头部必须)
<title>your titletitle>
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<meta name="robots" content="index,follow">
相关链接:WEB1038 – 标记包含无效的值
通过百度手机打开网页时,百度可能会对你的网页进行转码,脱下你的衣服,往你的身上贴狗皮膏药的广告,为此可在 head 内添加
<meta http-equiv="Cache-Control" content="no-siteapp" />
相关链接:SiteApp 转码声明
下面是不推荐使用的 meta 属性,因为它们采用率低,或已弃用:
<meta name="language" content="en"> <meta name="keywords" content="你,关键字,在这里,不使用空格,而用逗号进行分隔"> <meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm"> <meta name="reply-to" content="email@example.com"> <meta name="author" content="name, email@example.com"> <meta name="designer" content=""> <meta name="owner" content=""> <meta name="revisit-after" content="7 days"> <meta http-equiv="refresh" content="300; url=https://example.com/"> <meta name="topic" content=""> <meta name="summary" content=""> <meta name="classification" content="business"> <meta name="identifier-URL" content="https://example.com/"> <meta name="category" content=""> <meta name="coverage" content="Worldwide"> <meta name="distribution" content="Global"> <meta http-equiv="Pics-label" content="value"> <meta http-equiv="Expires" content="0"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache">
说到 link 标签,估计大家的第一反应和我一样,就是引入外部CSS样式文件的,不错,这是 link 标签最最常用的功能。不过它还有很多别的用处,比如这是浏览器 favicon 图标,touch图标等等。
<link rel="canonical" href="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html"> <link rel="shortlink" href="https://example.com/?p=42"> <link rel="amphtml" href="https://example.com/path/to/amp-version.html"> <link rel="stylesheet" href="https://example.com/styles.css"> <link rel="manifest" href="manifest.json"> <link rel="author" href="humans.txt"> <link rel="copyright" href="copyright.html"> <link rel="alternate" href="https://es.example.com/" hreflang="es"> <link rel="me" href="https://google.com/profiles/thenextweb" type="text/html"> <link rel="me" href="mailto:name@example.com"> <link rel="me" href="sms:+15035550125"> <link rel="archives" href="https://example.com/2003/05/" title="May 2003"> <link rel="index" href="https://example.com/" title="DeWitt Clinton"> <link rel="start" href="https://example.com/photos/pattern_recognition_1_about/" title="Pattern Recognition 1"> <link rel="prev" href="https://example.com/opensearch/opensearch-and-openid-a-sure-way-to-get-my-attention/" title="OpenSearch and OpenID? A sure way to get my attention."> <link rel="self" type="application/atom+xml" href="https://example.com/atomFeed.php?page=3"> <link rel="first" href="https://example.com/atomFeed.php"> <link rel="next" href="https://example.com/atomFeed.php?page=4"> <link rel="previous" href="https://example.com/atomFeed.php?page=2"> <link rel="last" href="https://example.com/atomFeed.php?page=147"> <link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD"> <link rel="pingback" href="https://example.com/xmlrpc.php"> <link rel="webmention" href="https://example.com/webmention"> <link rel="import" href="component.html"> <link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title"> <link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS"> <link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3"> <link rel="dns-prefetch" href="//example.com/"> <link rel="preconnect" href="https://www.example.com/"> <link rel="prefetch" href="https://www.example.com/"> <link rel="prerender" href="https://example.com/"> <link rel="preload" href="image.png" as="image">
具体说明查看:https://css-tricks.com/prefetching-preloading-prebrowsing/
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
以下是不推荐使用的链接关系:
<link rel="shortcut icon" href="path/to/favicon.ico"> <link rel="subresource" href="styles.css">
具体说明查看:https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Y_2eFRh9BOs/gULYapoRBwAJ
IE 11, Chrome, Firefox, Safari, Opera支持形式设置:
<link rel="icon" href="path/to/favicon-16.png" sizes="16x16" type="image/png"> <link rel="icon" href="path/to/favicon-32.png" sizes="32x32" type="image/png"> <link rel="icon" href="path/to/favicon-48.png" sizes="48x48" type="image/png"> <link rel="icon" href="path/to/favicon-62.png" sizes="62x62" type="image/png"> <link rel="icon" href="path/to/favicon-192.png" sizes="192x192" type="image/png">
注意:对于IE 10及以下版本不支持形式设置,只通过将命名为
favicon.ico
的文件放置在网站根目录中实现。
比较详细的 favicon 介绍可参考:
QQ 浏览器(X5 内核)同样适用于微信,QQ等第三方应用页面开发。
<meta name="x5-orientation" content="portrait|landscape"> <meta name="x5-fullscreen" content="true"> <meta name="x5-page-mode" content="app">
设置 360 浏览器渲染模式:webkit
为极速内核,ie-comp
为 IE 兼容内核,ie-stand
为 IE 标准内核。
<meta name="renderer" content="webkit|ie-comp|ie-stand">
详情文档链接:浏览器内核控制Meta标签说明文档
360 浏览器就会在读取到这个标签后,立即切换对应的极速核。 另外为了保险起见再加入
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
这样写可以达到的效果是如果安装了 Google Chrome Frame,则使用 GCF 来渲染页面,如果没有安装 GCF,则使用最高版本的 IE 内核进行渲染。
portrait 为横屏,landscape 为竖屏。
<meta name="screen-orientation" content="portrait|landscape">
<meta name="full-screen" content="yes">
UC 浏览器在标准排版效果实现的基础上,提供适应屏幕的排版方式,当设置为 uc-fitscreen=yes,页面进行缩放操作时,仅放大图片和文字等元素,但不放大屏幕宽度,保持不出现水平(横向)滚动条。
<meta name="viewport" content="uc-fitscreen=no|yes">
UC 浏览器提供两种排版模式,分别是适屏模式(fitscreen)及标准模式(standard),其中适屏模式简化了一些页面的处理,使得页面内容更适合进行页面阅读、节省流量及响应更快,而标准模式则能按照标准规范对页面进行排<