在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ HTML/ HTML
工具箱
移動端優(yōu)化
HTML
基本原則
CSS
JavaScript
參考

HTML

盡量遵循 HTML 標(biāo)準(zhǔn)和語義，但是不要以犧牲實(shí)用性為代價(jià)。任何時候都要盡量使用最少的標(biāo)簽并保持最小的復(fù)雜度。

通用約定

標(biāo)簽

  • 自閉合（self-closing）標(biāo)簽，無需閉合 ( 例如： img input br hr 等 )；
  • 可選的閉合標(biāo)簽（closing tag），需閉合 ( 例如：</li> 或 </body>)；
  • 盡量減少標(biāo)簽數(shù)量；
<img src="/project/web-development/images/google.png" alt="Google">
<input type="text" name="title">

<ul>
  <li>Style</li>
  <li>Guide</li>
</ul>

<!-- Not recommended -->
<span class="avatar">
  <img src="...">
</span>

<!-- Recommended -->
<img class="avatar" src="...">

Class 與 ID

  • class 應(yīng)以功能或內(nèi)容命名，不以表現(xiàn)形式命名；
  • class 與 id 單詞字母小寫，多個單詞組成時，采用中劃線-分隔；
  • 使用唯一的 id 作為 Javascript hook，同時避免創(chuàng)建無樣式信息的 class；
<!-- Not recommended -->
<div class="j-hook left contentWrapper"></div>

<!-- Recommended -->
<div id="j-hook" class="sidebar content-wrapper"></div>

屬性順序

HTML 屬性應(yīng)該按照特定的順序出現(xiàn)以保證易讀性。

  • id
  • class
  • name
  • data-xxx
  • src, for, type, href
  • title, alt
  • aria-xxx, role
<a id="..." class="..." data-modal="toggle" href="###"></a>

<input class="form-control" type="text">

<img src="..." alt="...">

引號

屬性的定義，統(tǒng)一使用雙引號。

<!-- Not recommended -->
<span id='j-hook' class=text>Google</span>

<!-- Recommended -->
<span id="j-hook" class="text">Google</span>

b嵌套

a 不允許嵌套 div 這種約束屬于語義嵌套約束，與之區(qū)別的約束還有嚴(yán)格嵌套約束，比如 a 不允許嵌套 a。

嚴(yán)格嵌套約束在所有的瀏覽器下都不被允許；而語義嵌套約束，瀏覽器大多會容錯處理，生成的文檔樹可能相互不太一樣。

語義嵌套約束

  • <li> 用于 <ul> 或 <ol> 下；
  • <dd>，<dt> 用于 <dl> 下；
  • <thead>，<tbody>，<tfoot>，<tr>，<td> 用于<table>下；

嚴(yán)格嵌套約束

  • inline-Level 元素，僅可以包含文本或其它 inline-Level 元素；
  • <a> 里不可以嵌套交互式元素 <a>、<button>、<select>等；
  • <p>里不可以嵌套塊級元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等。

更多詳情，參考 WEB 標(biāo)準(zhǔn)系列 - HTML 元素嵌套

布爾值屬性

HTML5 規(guī)范中 disabled、checked、selected 等屬性不用設(shè)置值。

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

語義化

沒有 CSS 的 HTML 是一個語義系統(tǒng)而不是 UI 系統(tǒng)。

通常情況下，每個標(biāo)簽都是有語義的，所謂語義就是你的衣服分為外套， 褲子，裙子，內(nèi)褲等，各自有對應(yīng)的功能和含義。所以你總不能把內(nèi)褲套在脖子上吧。-- 一絲

此外語義化的 HTML 結(jié)構(gòu)，有助于機(jī)器（搜索引擎）理解，另一方面多人協(xié)作時，能迅速了解開發(fā)者意圖。

常見標(biāo)簽語義

標(biāo)簽 語義
<p> 段落
<h1><h2><h3>... 標(biāo)題
<ul> 無序列表
<ol> 有序列表
<blockquote> 大段引用
<cite> 一般引用
<b> 為樣式加粗而加粗
<storng> 為強(qiáng)調(diào)內(nèi)容而加粗
<i> 為樣式傾斜而傾斜
<em> 為強(qiáng)調(diào)內(nèi)容而傾斜
code 代碼標(biāo)識
abbr 縮寫

示例

將你構(gòu)建的頁面當(dāng)作一本書，將標(biāo)簽的語義對應(yīng)的其功能和含義；

  • 書的名稱：<h1>
  • 書的每個章節(jié)標(biāo)題: <h2>
  • 章節(jié)內(nèi)的文章標(biāo)題: <h3>
  • 小標(biāo)題 / 副標(biāo)題: <h4> <h5> <h6>
  • 章節(jié)的段落: <p>

更多語義化的內(nèi)容，參考 sofish 寫的文章這樣去寫你的 HTML。

HEAD

文檔類型

為每個 HTML 頁面的第一行添加標(biāo)準(zhǔn)模式（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 的第一個直接子元素；請參考前端觀察的博文：HTML5 Charset 能用嗎？
<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è)備中的頁面可見區(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 圖標(biāo)

  • apple-touch-icon 圖片自動處理成圓角和高光等效果；
  • apple-touch-icon-precomposed 禁止系統(tǒ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ù)瀏覽器會請求 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 圖標(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>
下一篇：參考