HTML 文档之 Head 最佳实践

论坛 › 期权论坛 › 期权     
javascript   2019-6-29 21:23   3482   0
每一个标准的 HTML 文档都包含一个
  1. [/code] 头部分，除了声明文档类型，编码方式和文档标题，引入外部资源这些基本功能外， 头还能做很多非常有用的事情，这篇文章整理了作者认可的一些最佳实践，写在这里与各位分享。
  2. [h1]语言[/h1]在 [code]html
复制代码
标签中通过
  1. lang
复制代码
属性进行明确的语言声明，将会有助于翻译，英文、简体中文和繁体中文网页所属性值如下：
    1. [/code]
    2. [*][code]
    复制代码
    1. [/code]
    2. [/list][h1]编码[/h1]请在 [code]
    复制代码
    中第一行统一使用
    1. utf-8
    复制代码
    编码声明。
      1. [/code]
      2. [/list][h1]Base 元素[/h1]尽量不使用 [code]
      复制代码
      元素，绝对地址和 URL 对于开发者和用户来说都更好。
        1. [/code]
        2. [*][code]
        复制代码
        1. [/code]
        2. [*][code]
        复制代码
        1. [/code]
        2. [*][code]
        复制代码
      [h1]Viewport[/h1]设置
      1. viewport
      复制代码
      的宽度为设备宽度，默认缩放比为 1（允许用户缩放），设置
      1. viewport-fit=cover
      复制代码
      以兼容 iPhone X 全面屏“刘海”的显示。
        1. [/code]
        2. [/list][h1]DNS 预读取[/h1]DNS 预读取是一项使浏览器主动去执行域名解析的功能，其范围包括当前文档内的所有链接，这能够减少用户点击链接时的延迟。
        3. [list=1][*][code]
        复制代码
        1. [/code]
        2. [*][code]
        复制代码
      [h1]预加载[/h1]指示浏览器预先请求当前页面所需要的关键性资源。
        1. [/code]
        2. [*][code]
        复制代码
      [h1]预请求[/h1]指示浏览器预先请求用户即将浏览页面所需要的关键性资源。
        1. [/code]
        2. [*][code]
        复制代码
      [h1]渲染偏好[/h1]对于国内各种双核浏览器，通过设置
      1. renderer
      复制代码
      头要求它们使用 webkit 内核；对于 IE 浏览器，通过设置
      1. IE=edge
      复制代码
      要求它使用最新的版本；对于百度搜索强制转码的流氓做法，通过
      1. no-transform
      复制代码
      禁止其自动转码；指示浏览器对类似电话、邮箱或地址的内容不要自作聪明的瞎识别（移动端）。
        复制代码
        复制代码
        复制代码
        复制代码
        1. [/code]
        2. [/list][h1]文档信息[/h1]HTML 文档的一些元数据，包括：作者、描述、关键词和生成工具；设置 [code]robots
        复制代码
        为
        1. index,follow
        复制代码
        指示搜索引擎爬虫该页面需要进入索引，并且页面内的所有链接都要继续跟踪；设置
        1. referrer
        复制代码
        为
        1. origin-when-cross-origin
        复制代码
        指示浏览器在进行跨域跳转时，其
        1. referrer
        复制代码
        值将统一为域名，而非具体的 URL 地址。
          1. [/code]
          2. [*][code]
          复制代码
          1. [/code]
          2. [*][code]
          复制代码
          1. [/code]
          2. [*][code]
          复制代码
        [h1]Icons[/h1]虽说所有浏览器都还支持过时的 favicon.ico 格式，但在 HTML5 时代，我们应该使用更好的 PNG icon with sizes 方案。同时为了兼容老旧浏览器，我们可以将生成好的 favicon.ico 文件放在网站的根目录下面，通常浏览器会自动请求并加载它，并不需要额外通过 link 标签引入。
          复制代码
          复制代码
          复制代码
          复制代码
          复制代码
          复制代码
          复制代码
          复制代码
          复制代码
          复制代码
          复制代码
          复制代码
          复制代码
          复制代码
          复制代码
          复制代码
          复制代码
          复制代码
          复制代码
          复制代码
        微软为了让 Metro UI 更好看，引入了
        1. browserconfig.xml
        复制代码
        文件，主要用于定制网站固定磁铁的图标和背景颜色，其格式如下所示：
          1. [/code]
          2. [*][code]
          复制代码
          1.    
          复制代码
          1.      
          复制代码
          1.         
          复制代码
          1.         
          复制代码
          1.         
          复制代码
          1.         
          复制代码
          1.         
          复制代码
          1.         #db5945
          复制代码
          1.      
          复制代码
          1.    
          复制代码
          1. [/code]
          2. [/list]favicon.ico 实际上是一个图片容器，里面至少应该包含 16x16，32x32，48x48 三个尺寸的 png 图片，我们可以使用 ImageMagick 工具在本地直接生成（生成之前需要对 png 图片进行压缩以减小尺寸）。
          3. [list=1][*][code]$ convert favicon-16.png favicon-32.png favicon-64.png favicon.ico
          复制代码
        注意：apple-mobile-web-app-status-bar-style 值默认状态栏为白色，可设置为 black（黑色） 或者 black-translucent（灰色半透明）；mask-icon 引入的 svg 文件必须只有一个图层，并且
        1. viewBox
        复制代码
        属性应该为 “0 0 16 16”。
        Twitter 卡片用于将网站内容以更加优雅漂亮的方式分享到 twitter.com 网站，从形式上说，分为：summary, summarylargeimage, app, player 四种形式，通常我们的站点只需要 summary 这种形式。
          1. [/code]
          2. [*][code]
          复制代码
          1. [/code]
          2. [*][code]
          复制代码
          1. [/code]
          2. [/list]配置上线后，你可以通过这个 Card validator 工具检查是否正确显示。
          3. [h1]Facebook Open Graph[/h1]Open Graph 是一套开放的网页标注协议，通过 meta 标签标注网页的类型，主要由 Facebook 推动，已经成为社交分享领域的事实标准。如果你希望明确告诉社交网络或搜索引擎你的网页类型，你应该添加这些 meta 标签。
          4. [list=1][*][code]
          复制代码
          1. [/code]
          2. [*][code]
          复制代码
          1. [/code]
          2. [*][code]
          复制代码
        [h1]固定链接[/h1]对于一份文档存在多个 URL 的情况，通过
        1. rel="canonical"
        复制代码
        指定唯一的固定链接。
          1. [/code]
          2. [/list]对于支持 RSS 订阅的页面，可针对 RSS 阅读器提供可订阅的源文件。
          3. [list=1][*][code]
          复制代码
        [h1]Polyfill[/h1]可以专门为老旧的 IE 浏览器引入 Polyfill 方案，举个例子，为了让 IE6-IE8 浏览器能够使用 HTML5 标签和 Media Query 特性，我们需要引入 html5shiv 和 response.js 这两个库。
          1. [/code]
          2. [/list]其他的 Polyfill 方案写法类似。
          3. [h1]打印样式表[/h1]对于可打印的页面（如文章页面），可提供针对打印机的样式表，使得网站用户可以将文章打印下来阅读。
          4. [list=1][*][code]
          复制代码
        [h1]交替样式表[/h1]定义交替样式表的时候，指定其
        1. title
        复制代码
        属性，以方便用户在浏览器中根据名称选择替代样式，交替样式表多用于多主题切换的站点。
          1. [/code]
          2. [*][code]
          复制代码
        原文：https://laozhu.me/post/html-head-best-practices/



回复
分享到 :
0 人收藏
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

4级常客
javascript

积分:121
帖子:13
精华:0
+ 关注 私信
期权论坛 期权论坛
期权网络科技版权所有
关于我们
联系我们
加入我们
反馈问题
免责声明
积分充值
统一社会信用代码
积分规则
网站地图
爱文库
下属网站
官方
新浪微博
微信公众号
◆
下载
表情包
App下载
期权论坛 期权论坛

QQ咨询|关于我们|Archiver|手机版|小黑屋|( 辽ICP备15012455号-4 ) Powered by 期权论坛 X3.2 © 2001-2016 期权工具网&期权论坛 Inc.

发布
内容

下载期权论坛手机APP