每一个标准的HTML文档都包含一个head头部分,除了声明文档类型,编码方式和文档标题,引入外部资源这些基本功能外,头还能做很多非常有用的事情,这篇文章整理了作者认可的一些最佳实践,写在这里与各位分享。
语言在html标签中通过lang属性进行明确的语言声明,将会有助于翻译,英文、简体中文和繁体中文网页所属性值如下:
htmllang="en"
htmllang="zh-Hans"
htmllang="zh-Hant"
编码请在head中第一行统一使用utf-8编码声明。
metacharset="utf-8"
Base元素尽量不使用base元素,绝对地址和URL对于开发者和用户来说都更好。
!--Bad--
basehref="/blog/"
linkhref="hello-world"rel="canonical"
!--Good--
linkhref="/blog/hello-world"rel="canonical"
Viewport设置viewport的宽度为设备宽度,默认缩放比为1(允许用户缩放),设置viewport-fit=cover以兼容iPhoneX全面屏“刘海”的显示。
metaname="viewport"content="width=device-width,initial-scale=1,viewport-fit=cover"
DNS预读取DNS预读取是一项使浏览器主动去执行域名解析的功能,其范围包括当前文档内的所有链接,这能够减少用户点击链接时的延迟。
meta