免費(fèi)AI編程助手
2.3 HEAD
2018-12-23 15:38 更新
HEAD
文檔類型
為每個(gè) HTML 頁(yè)面的第一行添加標(biāo)準(zhǔn)模式（standard mode）的聲明， 這樣能夠確保在每個(gè)瀏覽器中擁有一致的表現(xiàn)。
<!DOCTYPE html>語(yǔ)言屬性
為什么使用 lang="zh-cmn-Hans" 而不是我們通常寫的 lang="zh-CN" 呢? 請(qǐng)參考知乎上的討論: 網(wǎng)頁(yè)頭部的聲明應(yīng)該是用 lang="zh" 還是 lang="zh-cn"？
<!-- 中文 -->
<html lang="zh-Hans">
<!-- 簡(jiǎn)體中文 -->
<html lang="zh-cmn-Hans">
<!-- 繁體中文 -->
<html lang="zh-cmn-Hant">
<!-- English -->
<html lang="en">字符編碼
- 以無(wú) BOM 的 utf-8 編碼作為文件格式;
- 指定字符編碼的 meta 必須是 head 的第一個(gè)直接子元素；
<html>
<head>
<meta charset="utf-8">
......
</head>
<body>
......
</body>
</html>IE 兼容模式
優(yōu)先使用最新版本的IE 和 Chrome 內(nèi)核
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">SEO 優(yōu)化
<head>
<meta charset="utf-8">
<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="author,email address">
</head>viewport
viewport: 一般指的是瀏覽器窗口內(nèi)容區(qū)的大小，不包含工具條、選項(xiàng)卡等內(nèi)容；width: 瀏覽器寬度，輸出設(shè)備中的頁(yè)面可見區(qū)域?qū)挾龋?/li>device-width: 設(shè)備分辨率寬度，輸出設(shè)備的屏幕可見寬度；initial-scale: 初始縮放比例；maximum-scale: 最大縮放比例；
為移動(dòng)端設(shè)備優(yōu)化，設(shè)置可見區(qū)域的寬度和初始縮放比例。
<meta name="viewport" content="width=device-width, initial-scale=1.0">iOS 圖標(biāo)
- apple-touch-icon 圖片自動(dòng)處理成圓角和高光等效果;
- apple-touch-icon-precomposed 禁止系統(tǒng)自動(dòng)添加效果，直接顯示設(shè)計(jì)原圖;
<!-- iPhone 和 iTouch，默認(rèn) 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">favicon
在未指定 favicon 時(shí)，大多數(shù)瀏覽器會(huì)請(qǐng)求 Web Server 根目錄下的 favicon.ico 。為了保證 favicon 可訪問(wèn)，避免404，必須遵循以下兩種方法之一：
- 在 Web Server 根目錄放置 favicon.ico 文件；
- 使用 link 指定 favicon；
<link rel="shortcut icon" href="path/to/favicon.ico">HEAD 模板
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Style Guide</title>
<meta name="description" content="不超過(guò)150個(gè)字符">
<meta name="keywords" content="">
<meta name="author" content="name, email@gmail.com">
<!-- 為移動(dòng)設(shè)備添加 viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- iOS 圖標(biāo) -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
<link rel="shortcut icon" href="path/to/favicon.ico">
</head>以上內(nèi)容是否對(duì)您有幫助：
更多建議：