免費AI編程助手
2.3 HEAD
2018-12-23 15:38 更新
HEAD
文檔類型
為每個 HTML 頁面的第一行添加標準模式（standard mode）的聲明， 這樣能夠確保在每個瀏覽器中擁有一致的表現(xiàn)。
<!DOCTYPE html>語言屬性
為什么使用 lang="zh-cmn-Hans" 而不是我們通常寫的 lang="zh-CN" 呢? 請參考知乎上的討論: 網(wǎng)頁頭部的聲明應(yīng)該是用 lang="zh" 還是 lang="zh-cn"？
<!-- 中文 -->
<html lang="zh-Hans">
<!-- 簡體中文 -->
<html lang="zh-cmn-Hans">
<!-- 繁體中文 -->
<html lang="zh-cmn-Hant">
<!-- English -->
<html lang="en">字符編碼
- 以無 BOM 的 utf-8 編碼作為文件格式;
- 指定字符編碼的 meta 必須是 head 的第一個直接子元素；
<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ū)的大小，不包含工具條、選項卡等內(nèi)容；width: 瀏覽器寬度，輸出設(shè)備中的頁面可見區(qū)域?qū)挾龋?/li>device-width: 設(shè)備分辨率寬度，輸出設(shè)備的屏幕可見寬度；initial-scale: 初始縮放比例；maximum-scale: 最大縮放比例；
為移動端設(shè)備優(yōu)化，設(shè)置可見區(qū)域的寬度和初始縮放比例。
<meta name="viewport" content="width=device-width, initial-scale=1.0">iOS 圖標
- apple-touch-icon 圖片自動處理成圓角和高光等效果;
- apple-touch-icon-precomposed 禁止系統(tǒng)自動添加效果，直接顯示設(shè)計原圖;
<!-- 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">favicon
在未指定 favicon 時，大多數(shù)瀏覽器會請求 Web Server 根目錄下的 favicon.ico 。為了保證 favicon 可訪問，避免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="不超過150個字符">
<meta name="keywords" content="">
<meta name="author" content="name, email@gmail.com">
<!-- 為移動設(shè)備添加 viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- iOS 圖標 -->
<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)容是否對您有幫助：
← 2.2 語義化
更多建議：