Skip to content

Instantly share code, notes, and snippets.

@ZSX-JOJO
Forked from yisibl/HTML-tags.md
Created August 27, 2021 02:49
Show Gist options
  • Save ZSX-JOJO/91c02d882dfe32f03ed3073effdd266d to your computer and use it in GitHub Desktop.
Save ZSX-JOJO/91c02d882dfe32f03ed3073effdd266d to your computer and use it in GitHub Desktop.
常用的 HTML 头部标签

常用 HTML 头部标签

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

<!DOCTYPE html>

更加标准的 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>
  • 优先使用IE最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name ="viewport" content ="initial-scale=1.0, maximum-scale=3, minimum-scale=1, user-scalable=no">

iOS 设备

  1. 添加到主屏时的标题

    <meta name="apple-mobile-web-app-title" content="标题">
  2. 是否启用 WebAPP 全屏模式

    <meta name="apple-mobile-web-app-capable" content="yes" /> 
  3. 设置状态栏的背景颜色

    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    "apple-mobile-web-app-capable" content="yes" 时生效

    参数:

    • default 默认值。
    • black 状态栏背景是黑色。
    • black-translucent 状态栏背景是黑色半透明。

    如果设置为 defaultblack ,网页内容从状态栏底部开始。

    如果设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。

  4. 忽略数字识自动别为电话号码

    <meta name="format-detection" content="telephone=no" />
  5. iOS 图标

    参数:

    apple-touch-icon 图片自动处理成圆角和高光等效果。

    apple-touch-icon-precomposed 禁止系统自动添加效果,直接显示设计原图。

    • iPhone 和 iTouch,默认 57x57 像素,必须有

      <link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png" />
      <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" />
    • iPad,72x72 像素,可以没有,但推荐有

      <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" />
    • Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有

      <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
      <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" />
    • Retina iPad,144x144 像素,可以没有,但推荐有

      <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
      <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" />
  6. iOS 启动画面

    官方文档:https://developer.apple.com/library/ios/qa/qa1686/_index.html

    参考文章:http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

    • iPad的启动画面是不包括状态栏区域的。

      • iPad 竖屏 768 x 1004(标准分辨率)

        <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" />
      • iPad 竖屏 1536x2008(Retina)

        <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" />
      • iPad 横屏 1024x748(标准分辨率)

        <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" />
      • iPad 横屏 2048x1496(Retina)

        <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" />
    • iPhone 和 iPod touch的启动画面是包含状态栏区域的。

      • iPhone/iPod Touch 竖屏 320x480 (标准分辨率)

        <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" />
      • iPhone/iPod Touch 竖屏 640x960 (Retina)

        <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" />
      • iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)

        <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" />

Windows 8

  • Windows 8 磁贴颜色

    <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
  • Windows 8 磁贴图标

    <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

SEO 优化

  • 页面描述

    <meta name="description" content="" /> <!-- 页面描述 -->
  • 页面关键词

    <meta name="keywords" content=""/> <!-- 页面关键词 -->
  • 页面标题

    <title>标题</title>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment