返回盒子 HI，欢迎来到 Boxbbs
登录 立即注册
苹果cms盒子»论坛 › 综合厅 › 技术交流 › 移动前端不得不了解的HTML5 head 头标签
enchong 管理员v9| 发表于 2023-4-2 10:06:44 | 显示全部楼层

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

×
HTML的头部内容特别多，有针对SEO的头部信息，也有针对移动设备的头部信息。而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性。移动端的工作已经越来越成为前端工作的重要内容，除了平常的项目开发，HTML 头部标签功能，特别是meta，link等标签的功能属性显得非常重要。这里整理了一份 <head> 部分的清单，让大家了解每个标签及相应属性的意义，写出满足自己需求的 <head> 头部标签，可以很有效的增强页面的可用性。

QQ截图20230402061449.jpg



HTML基本的头部标签


  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="x-ua-compatible" content="ie=edge">
  6. <!--移动端的页面这个可以忽略，具体可以查看本文Internet Explorer浏览器部分-->
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <!--具体可以查看本文 为移动设备添加 viewport 部分-->
  9. <!-- 以上 3 个 meta 标签 *必须* 放在 head 的最前面；其他任何的 head 内容必须在这些标签的 *后面* -->
  10. <title>页面标题</title>
  11. ...
  12. </head>
复制代码



DOCTYPE
DOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。

使用 HTML5 doctype，不区分大小写。


  1. <!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->
复制代码


charset
声明文档使用的字符编码

  1. <meta charset="utf-8">
复制代码



html5 之前网页中会这样写：
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
复制代码


这两个是等效的，具体可移步阅读：<meta charset='utf-8'> vs <meta http-equiv='Content-Type'>，所以建议使用较短的，易于记忆。

lang属性
更加标准的 lang 属性写法

简体中文

  1. <html lang="zh-cmn-Hans">
复制代码


繁体中文

  1. <html lang="zh-cmn-Hant">
复制代码




很少情况才需要加地区代码，通常是为了强调不同地区汉语使用差异，例如：


  1. <p lang="zh-cmn-Hans">
  2. <strong lang="zh-cmn-Hans-CN">菠萝</strong>和<strong lang="zh-cmn-Hant-TW">鳳梨</strong>其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为<strong lang="zh-cmn-Hans-SG">黄梨</strong>。
  3. </p>
复制代码
为什么 lang="zh-cmn-Hans" 而不是我们通常写的 lang="zh-CN" 呢，请移步阅读: 页头部的声明应该是用 lang=”zh” 还是 lang=”zh-cn”。



Meta 标签
meta标签是HTML中head头部的一个辅助性标签，它位于HTML文档头部的 <head> 和 <title> 标记之间，它提供用户不可见的信息。虽然这部分信息用户不可见，但是其作用非常强大，特别是当今的前端开发工作中，设置合适的meta标签可以大大提升网站页面的可用性。

桌面端开发中，meta标签通常用来为搜索引擎优化（SEO）及 robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己，以及设置RASC内容等级，等等。

移动端开发中，meta标签除了桌面端中的功能设置外，还包括，比如viewport设置，添加到主屏幕图标，标签页颜色等等实用设置。具体可以看后面详细的介绍。

meta标签分类
meta标签根据属性的不同，可分为两大部分：http-equiv 和 name 属性。

http-equiv：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助浏览器正确地显示网页内容。
name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于浏览器，搜索引擎等机器人识别，等等。

推荐使用的meta标签

  1. <!-- 设置文档的字符编码 -->
  2. <meta charset="utf-8">
  3. <meta http-equiv="x-ua-compatible" content="ie=edge">
  4. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  5. <!-- 以上 3 个 meta 标签 *必须* 放在 head 的最前面；其他任何的 head 内容必须在这些标签的 *后面* -->

  7. <!-- 允许控制资源的过度加载 -->
  8. <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
  9. <!-- 尽早地放置在文档中 -->
  10. <!-- 仅应用于该标签下的内容 -->

  12. <!-- Web 应用的名称（仅当网站被用作为一个应用时才使用）-->
  13. <meta name="application-name" content="应用名称">

  15. <!-- 针对页面的简短描述（限制 150 字符）-->
  16. <!-- 在*某些*情况下，该描述是被用作搜索结果展示片段的一部分 -->
  17. <meta name="description" content="一个页面描述">

  19. <!-- 控制搜索引擎的抓取和索引行为 -->
  20. <meta name="robots" content="index,follow,noodp"><!-- 所有的搜索引擎 -->
  21. <meta name="googlebot" content="index,follow"><!-- 仅对 Google 有效 -->

  23. <!-- 告诉 Google 不显示网站链接的搜索框 -->
  24. <meta name="google" content="nositelinkssearchbox">

  26. <!-- 告诉 Google 不提供此页面的翻译 -->
  27. <meta name="google" content="notranslate">

  29. <!-- 验证 Google 搜索控制台的所有权 -->
  30. <meta name="google-site-verification" content="verification_token">

  32. <!-- 用来命名软件或用于构建网页（如 - WordPress、Dreamweaver）-->
  33. <meta name="generator" content="program">

  35. <!-- 关于你的网站主题的简短描述 -->
  36. <meta name="subject" content="你的网站主题">

  38. <!-- 非常简短（少于 10 个字）的描述。主要用于学术论文。-->
  39. <meta name="abstract" content="">

  41. <!-- 完整的域名或网址 -->
  42. <meta name="url" content="https://example.com/">

  44. <meta name="directory" content="submission">

  46. <!-- 基于网站内容给出一般的年龄分级 -->
  47. <meta name="rating" content="General">

  49. <!-- 允许控制 referrer 信息如何传递 -->
  50. <meta name="referrer" content="never">

  52. <!-- 禁用自动检测和格式化可能的电话号码 -->
  53. <meta name="format-detection" content="telephone=no">

  55. <!-- 通过设置为 “off” 完全退出 DNS 预取 -->
  56. <meta http-equiv="x-dns-prefetch-control" content="off">

  58. <!-- 在客户端存储 cookie，web 浏览器的客户端识别 -->
  59. <meta http-equiv="set-cookie" content="name=value; expires=date; path=url">

  61. <!-- 指定要显示在一个特定框架中的页面 -->
  62. <meta http-equiv="Window-Target" content="_value">

  64. <!-- 地理标签 -->
  65. <meta name="ICBM" content="latitude, longitude">
  66. <meta name="geo.position" content="latitude;longitude">
  67. <!-- 国家代码 (ISO 3166-1): 强制性, 州代码 (ISO 3166-2): 可选; 如 content="US" / content="US-NY" -->
  68. <meta name="geo.region" content="country[-state]">
  69. <!-- 如 content="New York City" -->
  70. <meta name="geo.placename" content="city/town">
复制代码



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


  1. <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 -->
复制代码




width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边

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 中已经删除），可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：

  1. <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
复制代码



而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。
  1. <meta name="viewport" content="width=device-width,user-scalable=yes">
复制代码



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

  1. <meta name="viewport" content="width=375">
  2. <meta name="viewport" content="width=414">
复制代码
大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。



link 标签
说到 link 标签，估计大家的第一反应和我一样，就是引入外部CSS样式文件的，不错，这是 link 标签最最常用的功能。不过它还有很多别的用处，比如这是浏览器 favicon 图标，touch图标等等。

  1. <!-- 有助于防止出现内容重复的问题 -->
  2. <link rel="canonical" href="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html">

  4. <!-- 之前用于包含 icon 链接，但已被废弃并不再使用 -->
  5. <link rel="shortlink" href="https://example.com/?p=42">

  7. <!-- 链接到当前文档的一个 AMP HTML 版本 -->
  8. <link rel="amphtml" href="https://example.com/path/to/amp-version.html">

  10. <!-- 表明一个 CSS 样式表 -->
  11. <link rel="stylesheet" href="https://example.com/styles.css">

  13. <!-- 链接到一个指定 Web 应用程序“安装”证书的 JSON 文件 -->
  14. <link rel="manifest" href="manifest.json">

  16. <!-- 链接到文档的作者 -->
  17. <link rel="author" href="humans.txt">

  19. <!-- 指向一个适用于链接内容的版权申明 -->
  20. <link rel="copyright" href="copyright.html">

  22. <!-- 给出可能的你的另一种语言的文档位置参考 -->
  23. <link rel="alternate" href="https://es.example.com/" hreflang="es">

  25. <!-- 提供了关于作者或其他人的信息 -->
  26. <link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
  27. <link rel="me" href="mailto:name@example.com">
  28. <link rel="me" href="sms:+15035550125">

  30. <!-- 链接到一个文档，包含当前文档的一个归档链接 -->
  31. <link rel="archives" href="https://example.com/2003/05/" title="May 2003">

  33. <!-- 链接到层次结构中的顶级资源 -->
  34. <link rel="index" href="https://example.com/" title="DeWitt Clinton">

  36. <!-- 给出该文档的起点 -->
  37. <link rel="start" href="https://example.com/photos/pattern_recognition_1_about/" title="Pattern Recognition 1">

  39. <!-- 引导当前文档的前述资源序列 -->
  40. <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.">

  42. <!-- 给出一个自我参考 - 当文档有多个可能的参考时非常有用 -->
  43. <link rel="self" type="application/atom+xml" href="https://example.com/atomFeed.php?page=3">

  45. <!-- 分别是在一系列文件中的第一个、下一个、上一个和最后一个 -->
  46. <link rel="first" href="https://example.com/atomFeed.php">
  47. <link rel="next" href="https://example.com/atomFeed.php?page=4">
  48. <link rel="previous" href="https://example.com/atomFeed.php?page=2">
  49. <link rel="last" href="https://example.com/atomFeed.php?page=147">

  51. <!-- 当使用第三方服务来维护 blog 时使用 -->
  52. <link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">

  54. <!-- 当另一个 WordPress 博客链接到你的 WordPress 博客或文章时形成一个自动化的评论 -->
  55. <link rel="pingback" href="https://example.com/xmlrpc.php">

  57. <!-- 当你在自己的页面上链接到一个 url 时通知它 -->
  58. <link rel="webmention" href="https://example.com/webmention">

  60. <!-- 加载一个外部的 HTML 文件到当前 HTML 文件中 -->
  61. <link rel="import" href="component.html">

  63. <!-- 打开搜索 -->
  64. <link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">

  66. <!-- Feeds -->
  67. <link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
  68. <link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">

  70. <!-- 预取，预载，预浏览 -->
  71. <link rel="dns-prefetch" href="//example.com/">
  72. <link rel="preconnect" href="https://www.example.com/">
  73. <link rel="prefetch" href="https://www.example.com/">
  74. <link rel="prerender" href="https://example.com/">
  75. <link rel="preload" href="image.png" as="image">
  76. <!-- 更多信息：https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
复制代码





回复

举报

enchong 管理员v9|  楼主| 发表于 2023-4-3 16:26:17 | 显示全部楼层
666
回复

举报

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

优质推荐
热门内容

Archiver|手机版|小黑屋|BOXBBS

GMT+8, 2024-4-30 03:02 , Processed in 0.167745 second(s), 24 queries .

Powered by Boxbbs X3.5

© 2023-2033 MacCmsBox bbs.

快速回复 返回顶部 返回列表