Hello World

# 网页头部代码规范

TIP

  • 详细解读网页的<head>标签里含有的内容
  • 包含页面的基本信息、SEO基础优化、页面Meta、其他相关规范等。

# 1、DOCTYPE 设置

强制添加

HTML 文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明

<!DOCTYPE html>

# 2、页面语言 LANG

TIP

Lang 属性的取值应该遵循互联网工程任务组–IETF（The Internet Engineering Task Force）制定的关于语言标签的文档

# 我们约定

TIP

  • 推荐使用属性值 cmn-Hans-CN（简体, 中国大陆）
  • 但是考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值
<html lang="zh-CN"></html>

# 更多地区语言参考

zh-SG 中文 (简体, 新加坡)   对应 cmn-Hans-SG 普通话 (简体, 新加坡)
zh-HK 中文 (繁体, 香港)     对应 cmn-Hant-HK 普通话 (繁体, 香港)
zh-MO 中文 (繁体, 澳门)     对应 cmn-Hant-MO 普通话 (繁体, 澳门)
zh-TW 中文 (繁体, 台湾)     对应 cmn-Hant-TW 普通话 (繁体, 台湾)

已废弃不推荐使用的 Languages Tags

以下写法已于 2009 年废弃，请勿使用（cmn、wuu、yue、gan 等已由 2005 年的 extlang 升级到 2009 年的 language）

zh-cmn, zh-cmn-Hans, zh-cmn-Hant, zh-wuu, zh-yue, zh-gan

以下写法已于 2009 年废弃

不推荐使用

zh-Hans, zh-Hans-CN, zh-Hans-SG, zh-Hans-HK, zh-Hans-MO, zh-Hans-TW,
zh-Hant, zh-Hant-CN, zh-Hant-SG, zh-Hant-HK, zh-Hant-MO, zh-Hant-TW

更多

Languages Tags 参考：W3C Language tags in HTML and XML (opens new window)

# 3、页面编码

Unicode 标准

因为 ISO-8859 中字符集大小是有限的，且在多语言环境中不兼容，所以 Unicode 联盟开发了 Unicode 标准。

  • Unicode 标准覆盖了（几乎）所有的字符、标点符号和符号。
  • Unicode 使文本的处理、存储和运输，独立于平台和语言。
  • HTML5 中默认的字符编码是 UTF-8

# 我们约定

统一使用 “UTF-8” 编码

  • 统一写成标准的 “UTF-8”，不要写成` “utf-8” 或 “utf8” 或 “UTF8”。
  • 根据 IETF 对 UTF-8 的定义 (opens new window)，其编码标准的写法是 “UTF-8”；
  • 而 UTF8 或 utf8 的写法只是出现在某些编程系统中。
<meta charset="UTF-8" />

# 4、页面 Meta 相关规范

TIP

  • meta 标签提供关于 HTML 文档的元数据
  • 元数据不会显示在页面上，但是对于机器是可读的。
  • 它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务

# ① 必要属性

属性 值 描述
content some text 定义与 http-equiv 或 name 属性相关的元信息

# ② 可选属性

属性 值 描述
http-equiv content-type / expire / refresh / set-cookie 把 content 属性关联到 HTTP 头部。
name author / description / keywords / generator / revised / others 把 content 属性关联到一个 name。
content some text 定义用于翻译 content 属性值的格式。

# ③ PC 端 Meta

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <meta name="robots" content="all" />
    <meta name="author" content="可写团队名称或代号" />
    <meta name="Copyright" content="公司品牌名" />
    <title>PC端HTML模版</title>
    <meta name="Keywords" content="关键词,关键词,关键词" />
    <meta name="description" content="页面描述" />
    <!-- DNS预解析 -->
    <link rel="dns-prefetch" href="" />
  </head>
  <body></body>
</html>

优先使用 IE 最新版本和 Chrome

根据企业实际兼容性要求进行灵活配置

<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 推荐 -->

<meta http-equiv="X-UA-Compatible" content="IE=6" />
<!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<!-- 使用IE8 -->

站点适配

主要用于 PC-手机页的对应关系。

<meta name="mobile-agent" content="format=[wml|xhtml|html5]; url=url" />
<!--
	[wml|xhtml|html5]根据手机页的协议语言，选择其中一种；
	url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。
-->

转码申明

用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下 meta

<meta http-equiv="Cache-Control" content="no-siteapp" />

# ④ 移动端 Meta

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"
    />
    <!-- 为了防止页面数字被识别为电话号码，可根据实际需要添加： -->
    <meta name="format-detection" content="telephone=no" />
    <!-- 让添加到主屏幕的网页再次打开时全屏展示，可添加：   -->
    <meta content="yes" name="mobile-web-app-capable" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta name="robots" content="all" />
    <meta name="author" content="可写团队名称或代号" />
    <meta name="Copyright" content="公司品牌名" />
    <title>移动端HTML模版</title>
    <meta name="Keywords" content="关键词,关键词,关键词" />
    <meta name="description" content="页面描述" />
    <!-- DNS预解析 -->
    <link rel="dns-prefetch" href="" />
  </head>
  <body></body>
</html>

# ⑤ 移动设备 meta 说明

<meta
  name="viewport"
  content="width=device-width,initial-scale=1.0,minimun-scale=1.0,maximum-scale=1.0,user-scalable=no"
/>
<!--这是常用的移动meta设置-->

移动端设配参数解读

  • viewport：能优化移动浏览器的显示。如果不是响应式网站，不要使用 initial-scale 或者禁用缩放。
  • width：宽度（数值 / device-width）（范围从 200 到 10,000，默认为 980 像素）
  • height：高度（数值 / device-height）（范围从 223 到 10,000）
  • initial-scale：初始的缩放比例 （范围从>0 到 10）
  • minimum-scale：允许用户缩放到的最小比例
  • maximum-scale：允许用户缩放到的最大比例
  • user-scalable：用户是否可以手动缩 (no,yes)

注意：

  • 很多人使用 initial-scale=1 到非响应式网站上，这会让网站以 100%宽度渲染，用户需要手动移动页面或者缩放。
  • 如果和 initial-scale=1 同时使用 user-scalable=no 或 maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。

# WebApp 全屏模式：伪装 app，离线应用

<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 启用 WebApp 全屏模式 -->

# 主题颜色

<meta name="theme-color" content="#87d3f2" />

# 隐藏状态栏/设置状态栏颜色

TIP

只有在开启 WebApp 全屏模式时才生效，content 的值为 default | black | black-translucent

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

# 添加到主屏后的标题

<meta name="apple-mobile-web-app-title" content="标题" />

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

<meta content="telephone=no" name="format-detection" />

# 忽略识别邮箱

<meta content="email=no" name="format-detection" />

# 其他

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true" />
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320" />
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait" />
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait" />
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes" />
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true" />
<!-- UC应用模式 -->
<meta name="browsermode" content="application" />
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app" />
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no" />
上次更新时间: 6/8/2023, 9:23:17 PM

SEO 搜索引擎网页代码优化 →

大厂最新技术学习分享群

大厂最新技术学习分享群

微信扫一扫进群，获取资料

X