💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
#HEAD --- ###文档类型 在页面开头使用这个简单地doctype来启用标准模式,使其在每个浏览器中尽可能一致的展现。 示例: ```html <!DOCTYPE html> ``` PS:虽然doctype不区分大小写,但是按照惯例,doctype大写。 ###语言属性 (酌情采用) 为什么使用 lang="zh-cmn-Hans" 而不是我们通常写的 lang="zh-CN" 呢? 请参考知乎上的讨论: [网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"?](http://www.zhihu.com/question/20797118) 示例: ```HTML <!-- 中文 --> <html lang="zh-Hans"> <!-- 简体中文 --> <html lang="zh-cmn-Hans"> <!-- 繁体中文 --> <html lang="zh-cmn-Hant"> <!-- English --> <html lang="en"> ``` ###字符编码 * 通过声明一个明确的字符编码,让浏览器轻松、快速的确定适合网页内容的渲染方式,通常指定为'UTF-8'。 * 指定字符编码的 meta 必须是 head 的第一个直接子元素。 示例: ```HTML <html> <head> <meta charset="utf-8"> ...... </head> <body> ...... </body> </html> ``` ###meta标签 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。 详细可查看[HTML META 标签](http://www.w3school.com.cn/tags/tag_meta.asp) 常用的meta标签如下,[详情可查看](http://fex.baidu.com/blog/2014/10/html-head-tags/): ```html <meta charset="utf-8"> <!-- 启用双核浏览器的极速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="keywords" content="your keywords"> <meta name="description" content="your description"> <meta name="author" content="your author"> 以下是移动端用的比较多的 <!-- 适应移动端 --> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection"content="telephone=no, email=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <!-- 删除苹果默认的工具栏和菜单栏 --> <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 设置苹果工具栏颜色 --> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 忽略页面中的数字识别为电话,忽略email识别 --> <meta name="format-detection" content="telphone=no, email=no" /> <!-- 启用360浏览器的极速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 针对手持设备优化,主要是针对一些老的不识别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"> <!-- /适应移动端 --> ``` ###SEO优化 H1标签和H2标签为SEO预留,所以,页面上尽量不要有H1和H2标签。 ```html <head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- SEO模块 --> <title>Style Guide</title> <meta name="keywords" content="your keywords"> <meta name="description" content="your description"> <meta name="author" content="your author"> <!-- /SEO模块 --> </head> ``` ###favicon 在未指定 favicon 时,大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问,避免404,必须遵循以下两种方法之一: * 在 Web Server 根目录放置 favicon.ico 文件; * 使用 link 指定 favicon; ```html <link rel="shortcut icon" href="path/to/favicon.ico"> ``` ###viewport * viewport: 一般指的是浏览器窗口内容区的大小,不包含工具条、选项卡等内容; * width: 浏览器宽度,输出设备中的页面可见区域宽度; * device-width: 设备分辨率宽度,输出设备的屏幕可见宽度; * initial-scale: 初始缩放比例; * maximum-scale: 最大缩放比例; 我们在移动端开发如果使用lib-flexible方案,viewport标签将由lib-flexible库自动生成。其适配原理见:[使用Flexible实现手淘H5页面的终端适配](http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html?utm_source=tuicool&utm_medium=referral);Flexible库地址:[Flexible的Github地址](https://github.com/amfe/lib-flexible) 如果没有使用lib-flexible方案,需要指定页面的viewport属性 viewport示例代码: ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` ###iOS 图标 * apple-touch-icon 图片自动处理成圆角和高光等效果; * apple-touch-icon-precomposed 禁止系统自动添加效果,直接显示设计原图; * 详情见:[WebApp之 apple-touch-icon](http://blog.sina.com.cn/s/blog_5a073f0f01014jfc.html) ```html <!-- iPhone 和 iTouch,默认 57x57 像素,必须有 --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"> <!-- iPad,72x72 像素,可以没有,但推荐有 --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" sizes="72x72"> <!-- Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有 --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114"> <!-- Retina iPad,144x144 像素,可以没有,但推荐有 --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144"> ``` ###dns-prefetch * DNS Prefetch是一种DNS预解析技术,这项技术是针对减少DNS解析所需要的请求时间而进行的web前端优化技术。 * 详情见:[控制 DNS 预读取](https://developer.mozilla.org/zh-CN/docs/Controlling_DNS_prefetching) ```html <link rel="dns-prefetch" href="//static.zhangyoubao.com"> ```