整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
JavaScript、CSS 相比，HTML 經(jīng)過三十多年的發(fā)展，似乎逐漸走進無人問津的角落，如何才能讓 HTML 再次回到人們視野的中心。
作者 | Yaser Adel Mehraban
譯者 | 譚開朗，責編 | 屠敏
出品 | CSDN（ID：CSDNnews）
以下為譯文：
有多少次，身為開發(fā)者的你編寫了一個HTML塊而沒有意識到可能編碼得并不理想?
為什么
HTML一直處于無人問津的角落，因為JavaScript和CSS總是吸引人們的注意力。
請在腦海里先保留這種印象，因為我要用一些簡單的技巧來發(fā)揮作用，讓HTML再次回到人們視野的中心。
以下是創(chuàng)建一目了然、可維護和可擴展的代碼的一些方法，其很好的應用了HTML5的語義標記元素，并將在支持的瀏覽器中正確呈現(xiàn)。
其緣由就不贅述了，讓我們來看看具體是什么吧。
文檔類型
在index.html的頂部位置，請確保聲明了DOCTYPE。這將在所有瀏覽器中激活標準模式，并告知瀏覽器該如何編譯文檔。請記住DOCTYPE不是HTML元素。
HTML5是這樣的：
<!DOCTYPE html>注意:如果應用了框架，這已預先寫好。如果沒有，我強烈建議使用像Emmet這樣的代碼片段，它在VS代碼中可用。
想了解更多關(guān)于其他文檔類型的信息嗎?點擊這里查看參考文件：https://html.com/tags/doctype/。
可選標簽
有些標簽在HTML5中是可選的，主要是因為元素是隱式呈現(xiàn)的。信不信由你，你可以省略<html>標簽，而頁面呈現(xiàn)得也很好。
<!DOCTYPE HTML>
<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>上面是一個有效的HTML，但在某些情況下就不能這樣做了。例如標簽后面跟著注釋：
<!DOCTYPE HTML>
<!-- where is this comment in the DOM? -->
<head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>上面是無效的，因為注釋位于<thml>標簽之外，解析樹發(fā)生了更改。
結(jié)束標簽
應始終記得結(jié)束標簽，否則某些瀏覽器在呈現(xiàn)頁面時會出現(xiàn)問題。出于可讀性和其他原因，建議保留這些內(nèi)容，稍后我會詳細介紹。
<div id="example">
<img src="example.jpg" alt="example" />
<a href="#" title="test">example</a>
<p>example</p>
</div>以上都是有效的標簽，但也有一些特例，如下。
自閉合標簽是有效的，但不是必需的。這些元素包括:
<br>, <hr>, <img>, <input>, <link>, <meta>,
<area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>注意:普通元素永遠不能有自閉合標簽。
<title />上面顯然是無效的。
字符集
預先定義字符集。最好是將它放在頂部元素中。
<head>
<title>This is a super duper cool title, right ?</title>
<meta charset="utf-8">
</head>上面是無效的，標題無法正確呈現(xiàn)。正確寫法是將字符集移到頂部位置。
<head>
<meta charset="utf-8">
<title>This is a super duper cool title, right ?</title>
</head>語言
不忽略可選標簽的另一個原因是在使用屬性時。在這種情況下，我們應該定義web頁面的語言，這對于可訪問性和搜索非常重要。
<html lang="fr-CA">
...
</html>標題
永遠不要忽略標題標簽，否則可訪問性太差了。我個人就永遠不會使用這樣的網(wǎng)站,因為我剛打開它即刻在20多個頁面后就找不到了(瀏覽器選項卡不會有任何顯示)。
base標簽
這是一個非常有用的標簽，應該謹慎使用。它將設置應用程序的基本URL。一旦設置好，所有鏈接都將相對于這個基本URL，這可能會導致一些不必要的行為:
<base href="http://www.example.com/" />通過以上設置，href="#internal"將被編譯為href=http://www.example.com/#internal?；蛘遠ref="example.org"將被編譯為href="http://www.example.com/example.org"。
描述
這個meta標簽非常有用，盡管嚴格來說它不是最佳寫法。但在搜索引擎時，這是超級有用的。
<meta name="description" content="HTML best practices">這有一個帖子“搜索引擎優(yōu)化正盛行”：https://yashints.dev/blog/2019/06/11/seo-tips。
語義標簽
雖然可以使用div創(chuàng)建UX工程師的線框，但這并不意味著必須這樣做。語義HTML為頁面提供了意義，而不單純是內(nèi)容顯示。像p、section、h{1-6}、main、nav等標簽都是語義標簽。如果使用p標簽，用戶將知道這表示一段文本，瀏覽器也知道如何展示它們。
語義HTML超出了本文的范圍。但是我們應該進行檢查，就好比寫作所用的筆，而我們有鼠標。
hr不應該用于格式化
<hr>不是格式化元素，所以不要用它來格式化內(nèi)容。在HTML5中，這個標簽代表了內(nèi)容的主題分離。正確的用法是這樣的:
<p>Paragraph about puppies</p>
<p>Paragraph about puppies' favourite foods</p>
<p>Paragraph about puppies' breeds</p>
<hr>
<p>Paragraph about why I am shaving my head </p>使用title屬性時要小心
title屬性是一個功能強大的工具，它可以幫助闡明頁面上元素的操作或目的，比如工具提示。但是，它不能與圖像上的alt等其他屬性互換。
HTML 5 規(guī)范道:
目前不鼓勵依賴title屬性，因為很多用戶代理不按照規(guī)范的訪問方式來暴露該屬性（例如，使用鼠標等設備來喚出提示框，而不包括只用鍵盤或觸控鍵盤的用戶，或者現(xiàn)代手機或平板電腦）。
請閱讀有關(guān)如何正確使用此屬性的更多信息：https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute。
單引號或雙引號
我見過的許多代碼庫，他們的標記中混合了這兩種形式。這并不好，特別是當你使用一個依賴于單引號的框架時，比如php，當你在一個句子中使用單引號時，就像我現(xiàn)在做的一樣。另一個原因是保持一致，這總是好的。不要這樣寫:
<img alt="super funny meme" src='/img/meme.jpg'>而寫為：
<img alt="super funny meme" src="/img/meme.jpg">省略布爾值
當涉及到屬性的布爾值時，建議省略，因為它們不添加任何值，還會增加標記的權(quán)重。
public class MyActivity extends AppCompatActivity {
<audio autoplay="autoplay" src="podcast.mp3">
<!-- instead -->
<audio autoplay src="podcast.mp3">省略類型屬性
不需要向scriptand樣式標簽添加type屬性。某些服務(如W3C的標記驗證工具)還會出現(xiàn)驗證錯誤。
驗證標記
可以使用W3C的標記驗證等服務以確保有效的標記。
拒絕內(nèi)聯(lián)樣式
HTML中寫的是內(nèi)容，其如何展示取決于樣式。將展示形式留給CSS吧，不要使用內(nèi)聯(lián)樣式，這將有利于開發(fā)人員和瀏覽器理解你的標記。
總結(jié)
這些只是編寫標簽時要記住的冰山一角。還有很多很好的資源可以讓你深入了解，強烈建議你重復閱讀。
《GitHub HTML最佳實踐》：https://github.com/hail2u/html-best-practices
《W3C School HTML樣式指南》：https://www.w3schools.com/html/html5_syntax.asp
希望你喜歡本文，并能寫出優(yōu)雅的標簽。
原文：https://dev.to/yashints/let-s-write-html-like-a-pro-28h5
本文為 CSDN 翻譯，轉(zhuǎn)載請注明來源出處。
【END】
天小編給大家?guī)砹艘槐具m用于web前端開發(fā)各個階段的超級好書——《響應式web設計》pdf電子版。文末附獲取方式
本書堪稱學習響應式Web設計的難得佳作。它不僅全面、細致、圖文并茂地介紹了響應式設計相關(guān)的技術(shù)，比如媒體查詢、流式布局、彈性媒體和彈性字體等，還把近幾年來Web設計領域公認的最佳設計理念有機地融入到了實例當中，比如移動先行（Mobile First）、漸進增強、平穩(wěn)退化、無障礙設計等。更加難得的是，本書以設計跨屏幕的網(wǎng)頁（響應式設計）為出發(fā)點，以點帶面，把如今Web設計領域兩大標準的最新版本HTML5和CSS3也納入其中，讀者在掌握先進設計方法的同時也能掌握最新的設計技術(shù)（比如使用新的HTML5結(jié)構(gòu)化語義標記、嵌入媒體、響應式視頻，以及CSS3的新選擇器、特效、過渡、變形和動畫等），從而可以免除重復學習新標準之苦，讓自己一步跨入Web設計領域的最前沿。無論你想學習響應式Web設計，還是學習HTML5和CSS3的實際應用，本書都能滿足你的需要，是毋庸置疑的明智之選。
說到底，響應式Web設計并非一門獨立的技術(shù)，而只是現(xiàn)有技術(shù)的一個組合應用。只要有一點HTML和CSS基礎的讀者都能順利地掌握它。對于中、高級的前端設計和開發(fā)人員，翻閱本書也有助于理清自己的知識脈絡，對這個新的設計理念獲得更全面、深入的理解和把握。
目錄
第1章 HTML5、CSS3及響應式設計入門 1
1.1 為什么智能手機很重要（而老版的IE不再重要） 2
1.2 響應式設計一定是最佳選擇嗎 3
1.3 響應式網(wǎng)頁設計的定義 3
1.4 為什么要在響應式設計上停滯不前 4
1.5 響應式網(wǎng)頁設計示例 4
1.5.1 下載視口調(diào)試工具 4
1.5.2 在線創(chuàng)意源泉 11
1.6 為什么HTML5很優(yōu)秀 12
1.6.1 省時省力 12
1.6.2 新增了語義化標簽元素 13
1.7 CSS3為響應式設計和更多創(chuàng)新奠定了基礎 13
1.7.1 底線：CSS3不破壞任何東西 14
1.7.2 CSS3如何解決日常設計問題 14
1.8 看吶，不用圖片 17
1.9 HTML5和CSS3現(xiàn)在就能用嗎 20
1.10 響應式網(wǎng)頁設計不是靈丹妙藥 20
1.11 引導客戶：網(wǎng)站不必在所有瀏覽器中表現(xiàn)一致 21
1.12 小結(jié) 22
第2章 媒體查詢：支持不同的視口 23
2.1 現(xiàn)在就能使用媒體查詢 23
2.2 為什么響應式設計需要媒體查詢 24
2.2.1 媒體查詢語法 24
2.2.2 媒體查詢能檢測那些特性 26
2.2.3 用媒體查詢改造我們的設計 27
2.2.4 加載媒體查詢的最佳方法 27
2.3 我們的第一個響應式設計 27
2.3.1 我們的設計是固定寬度的，不要驚訝 28
2.3.2 響應式設計中要保證圖片盡可能精簡 32
2.3.3 小視口下的內(nèi)容剪切 33
2.4 阻止移動瀏覽器自動調(diào)整頁面大小 34
2.5 針對不同視口寬度修正設計 37
2.6 響應式設計中內(nèi)容始終優(yōu)先 38
2.7 媒體查詢只是必要條件之一 42
2.8 小結(jié) 42
第3章 擁抱流式布局 43
3.1 固定布局經(jīng)不起未來考驗 43
3.2 為什么響應式設計需要百分比布局 44
3.3 將網(wǎng)頁從固定布局修改為百分比布局 44
3.3.1 需要牢記的公式 45
3.3.2 設置百分比元素的上下文 47
3.3.3 必須時刻牢記上下文 52
3.4 用em替換px 54
3.5 彈性圖片 56
3.5.1 讓圖片隨視口縮放 56
3.5.2 為特定圖片指定特定規(guī)則 58
3.5.3 給彈性圖片設置閾值 59
3.5.4 超級全能的max-width屬性 61
3.6 為不同的屏幕尺寸提供不同的圖片 61
3.7 流動網(wǎng)格布局和媒體查詢的默契配合 66
3.8 CSS網(wǎng)格系統(tǒng) 66
3.9 小結(jié) 72
第4章 響應式設計中的HTML5 73
4.1 HTML5的哪些部分現(xiàn)在就能用 73
4.1.1 大多數(shù)網(wǎng)站可以用HTML5編寫 74
4.1.2 膩子腳本和Modernizr 74
4.2 如何編寫HTML5網(wǎng)頁 75
4.2.1 HTML5的精簡之道 76
4.2.2 HTML5標簽的合理寫法 76
4.2.3 偉大的<a>標簽萬歲 77
4.2.4 HTML的廢棄零件 77
4.3 HTML5的全新語義化元素 78
4.3.1 <section> 78
4.3.2 <nav> 79
4.3.3 <article> 79
4.3.4 <aside> 79
4.3.5 <hgroup> 79
4.3.6 <header> 81
4.3.7 <footer> 81
4.3.8 <address> 81
4.4 HTML5結(jié)構(gòu)元素的實際用法 81
4.5 HTML5的文本級語義元素 87
4.5.1 <b> 88
4.5.2 <em> 88
4.5.3 <i> 88
4.5.4 在頁面中應用文本層語義元素 88
4.6 遵循WAI-ARIA實現(xiàn)無障礙站點 90
4.7 在HTML5中嵌入媒體 93
4.8 用HTML5的方法為頁面添加視頻或音頻 93
4.8.1 提供備用的媒體源文件 95
4.8.2 針對老版本瀏覽器的備用方案 95
4.8.3 和標簽的用法基本一致 96
4.9 響應式視頻 96
4.10 離線Web應用 99
4.10.1 離線Web應用概述 99
4.10.2 讓網(wǎng)頁可離線使用 99
4.10.3 理解manifest文件 100
4.10.4 頁面被自動加載到離線緩存 101
4.10.5 版本注釋的用途 101
4.10.6 離線訪問網(wǎng)站 101
4.10.7 離線Web應用的故障診斷 102
4.11 小結(jié) 103
第5章 CSS3：選擇器、字體和顏色模式 104
5.1 CSS3給前端開發(fā)人員帶來了什么 104
5.1.1 Internet Explorer 6到8對CSS3的支持 105
5.1.2 使用CSS3設計和開發(fā)頁面 105
5.2 CSS規(guī)則解析 105
5.3 私有前綴及其用法 106
5.4 快速而有效的CSS技巧 108
5.4.1 CSS3多欄布局 108
5.4.2 文字換行 110
5.5 CSS3的新增選擇器及其用法 111
5.5.1 CSS3屬性選擇器 111
5.5.2 CSS3結(jié)構(gòu)偽類 113
5.5.3 對偽元素的修正 122
5.6 自定義網(wǎng)頁字體 123
5.6.1 @font-face規(guī)則 124
5.6.2 使用@font-face嵌入網(wǎng)頁字體 124
5.7 幫幫我，標題模糊怎么辦 127
5.8 新的CSS3顏色格式和透明度 129
5.8.1 RGB顏色 130
5.8.2 HSL顏色 131
5.8.3 針對IE6、IE7和IE8提供備用顏色值 132
5.8.4 透明通道 132
5.9 小結(jié) 134
第6章 用CSS3創(chuàng)造令人驚艷的美 135
6.1 文字陰影 136
6.1.1 HEX、HSL或RGB顏色都可以 136
6.1.2 px、em或rem都行 136
6.1.3 取消文字陰影 138
6.1.4 制作浮雕文字陰影效果 139
6.1.5 多重文字陰影 140
6.2 盒陰影 140
6.2.1 內(nèi)陰影 141
6.2.2 多重陰影 142
6.3 背景漸變 143
6.3.1 線性背景漸變 144
6.3.2 徑向背景漸變 147
6.3.3 重復漸變 149
6.4 背景漸變圖案 151
6.5 CSS3的響應性 153
6.6 組合使用CSS3屬性 155
6.7 多重背景圖片 159
6.7.1 背景圖片大小 161
6.7.2 背景圖片位置 161
6.7.3 背景屬性的縮寫語法 161
6.8 更多CSS特性 162
6.9 可縮放圖標：響應式設計中的完美選擇 162
6.10 小結(jié) 163
第7章 CSS3過渡、變形和動畫 164
7.1 什么是CSS3過渡以及如何使用它 164
7.1.1 過渡相關(guān)的屬性 166
7.1.2 響應式網(wǎng)站中的有趣過渡 168
7.2 CSS3的2D變形 169
7.3 嘗試CSS3的3D變形 174
7.3.1 分析3D變形效果 176
7.3.2 3D變形尚未成熟 178
7.4 CSS3動畫效果 179
7.5 小結(jié) 185
第8章 用HTML5和CSS3征服表單 186
8.1 HTML5表單 186
8.1.1 理解HTML5表單中的元素 188
8.1.2 placeholder 189
8.1.3 required 189
8.1.4 autofocus 190
8.1.5 autocomplete 191
8.1.6 list（及對應的datalist元素） 191
8.1.7 HTML5的新輸入類型 192
8.1.8 日期和時間輸入類型 198
8.2 如何給不支持新特性的瀏覽器打補丁 203
8.3 使用CSS3美化HTML5表單 204
8.4 小結(jié) 210
第9章 解決跨瀏覽器問題 211
9.1 漸進增強與優(yōu)雅降級 215
9.2 該不該修復老版本IE 216
9.2.1 統(tǒng)計數(shù)據(jù)（再看看世界的變化） 216
9.2.2 個人選擇 216
9.3 前端的瑞士軍刀：Modernizr 217
9.3.1 使用Modernizr輔助修正樣式問題 219
9.3.2 使用Modernizr讓老版本IE支持HTML5元素 221
9.3.3 給IE6、7、8追加min/max媒體查詢功能 222
9.3.4 使用Modernizr按需加載資源 223
9.4 必要時將導航鏈接轉(zhuǎn)換為下拉菜單 225
9.5 高分辨率設備（未來趨勢） 228
9.6 小結(jié) 231
文首發(fā)于圖靈教育微信本文作者：李松峰
農(nóng)諺：“種地不上糞，等于瞎胡混。”
跟許許多多大城市里的上班族一樣，我也是在農(nóng)村長大的。因此，毋庸諱言，我小時候拾過糞。畢竟，那時候在農(nóng)村長大的孩子，有幾個沒拾過糞呢。糞就是屎，主要是牛屎，因為個頭大，我們那里也把風吹日曬干了的牛糞叫作“牛糞坯子”。
屎，本來是廢棄物。但正如牛糞，卻是農(nóng)民種地所必需的天然肥料，是莊稼茁壯成長的營養(yǎng)來源，更是來年好收成的重要保障。俗話說：“沒有尿屎臭，哪有稻米香？”
如今，我有幸成為一名在前端領域辛勤耕種的碼農(nóng)。就在前幾天，我心血來潮，從電腦里翻出了十幾年前出版的一本CSS名著的第1版（2006年）和第2版（2009年）。翻來翻去，我不禁聯(lián)想到小時候拾糞的經(jīng)歷。說到這里，不少讀者可能還不明就里，其實如果你是一名資深前端，我只要提幾個當年火得不得了的技術(shù)你就會明白我在說什么了。
好吧，閑話少說，言歸正傳。馬上開始我們的CSS拾糞之旅吧！
不知道大部分讀者怎么樣，反正我一聽到這個詞就會有一種穿越感。十幾年前，CSS遠遠不如今天這么強大。頁面仔們想要在網(wǎng)頁中實現(xiàn)稍微前沿、酷炫一點的效果，都必須絞盡腦汁。
滑動門
“滑動門”，即Sliding Doors，是誕生于2003的一種實現(xiàn)“圓角盒子”技術(shù)。假設最終要通過CSS實現(xiàn)下圖中這樣可以伸縮適應的圓角盒子：
你會怎么做？
……等等，那可是在遙遠的2003年，當時的CSS標準里并沒有'border-radius'這么一個屬性，更沒有瀏覽器支持類似的特性。于是，一位聰明的大牛Douglas Bowman發(fā)明了“滑動門”技術(shù)。其原理如下圖所示：
圖中展示了兩個GIF圖片：top-left.gif和top-right.gif，前者頭部是一個1/4圓且比較長，后者尾部是一個1/4圓且比較短。
關(guān)鍵是使用'background-image'和'background-position'屬性，后者最終會覆蓋到前者上面。當然，要實現(xiàn)4個圓角，就必須要用到4張圖片：
配合HTML標記和CSS代碼更容易理解：
<div class="box"> <div class="box-outer"> <div class="box-inner"> <h2>Headline</h2> <p>Content</p > </div> </div> </div>
......
.box {
width: 20em;
background: #effce7 url(images/bottom-left.gif) ?
no-repeat left bottom;
}
.box-outer {
background: url(images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 5%;
}
.box-inner {
background: url(images/top-left.gif) no-repeat left top;
}
.box h2 {
background: url(images/top-right.gif) no-repeat right top;
padding-top: 5%;
}
.box h2, .box p {
padding-left: 5%;
padding-right: 5%;
}
哇哦，精彩！
可以腦補出來最終效果的同學請為自己鼓掌，同時也恭喜你成功撿起了第一塊“牛糞”。暫時還沒搞明白的小伙伴也不必氣餒，有時候撿屎本身也是個技術(shù)活兒呢～
山頂角
“山頂角”，英文是Mountaintop Corners，誕生于2004年，由另一位牛人Dan Cederholm發(fā)明。相比于“滑動門”直接用圖片本身充當圓角，“山頂角”反其道而行之：用圓角蒙版遮住背景顏色實現(xiàn)圓角，因此更為靈活。上圖：
如果一看到這張圖你就立即明白了，那恭喜你，第二塊“牛糞”成功入筐。還不明白的同學，請看以下代碼，HTML跟前面類似，同樣需要4個元素來應用4張背景圖片：
<div class="box"> <div class="box-outer"> <div class="box-inner"> <h2>Headline</h2> <p>Content</p > </div> </div> </div>
CSS也極為相似：
.box {
width: 20em;
background: #effce7 url(images/bottom-left.gif) ?
no-repeat left bottom;
}
.box-outer {
background: url(images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 5%;
}
.box-inner {
background: url(images/top-left.gif) no-repeat left top;
}
.box h2 {
background: url(images/top-right.gif) no-repeat right top;
padding-top: 5%;
}
.box h2, .box p {
padding-left: 5%;
padding-right: 5%;
}
成功撿到這塊“牛糞”的同學也不要過分興奮，“山頂角”雖然可以通過簡單修改背景顏色來改變圓角盒子的顏色，省去重新制作圖片的麻煩，但它也有不足。由于當時每個角的蒙版圖片是用位圖制作的，所以只適用于制造細微的曲線，較大弧度的圓角會顯得粗糙。
不過，瑕不掩瑜?！吧巾斀恰睙o論如何都是當時制作圓角盒子當之無愧的王牌技術(shù)，更是當時每一個頁面仔的大救星。十幾年后，當屏幕前的我們與這塊“牛糞”不期而遇時，一定也會暗自贊嘆。關(guān)鍵是，這塊簡潔巧妙的牛糞，它好撿??！
多重背景圖片
在前述兩塊重量級“牛糞”的啟發(fā)下，支持多背景圖片的'background-image'屬性終于應運而生。于是，更簡單的實現(xiàn)方案出現(xiàn)了：
.box {
background-image: url(/img/top-left.gif),
url(/img/top-right.gif),
url(/img/bottom-left.gif),
url(/img/bottom-right.gif);
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat;
background-position: top left,
top right,
bottom left,
bottom right;
}
當然，給一個元素應用多個背景并不局限于實現(xiàn)圓角盒子效果。至于還可以實現(xiàn)什么，請相信：限制你的只有你的想象力。
圓角邊框
同樣是在前兩塊“牛糞”滋養(yǎng)的沃土之上，迄今為止最為簡單強大的'border-radius'屬性也誕生了：
.box {
border-radius: 1em;
}
成功撿起兩塊“牛糞”之后，是不是很有成就感？你還想繼續(xù)撿？沒問題，走著～
想當初，不僅僅是實現(xiàn)圓角盒子需要全世界的大牛為之殫精竭慮，同樣讓他們苦思冥想的還有下拉陰影。
先看看Dunstan Orchard大牛的杰作。其核心思想就是給元素背景上應用一大張陰影圖，然后通過負外邊距把陰影部分顯露出來。
如圖所示，這是一張800px?800px的陰影圖shadow.gif，其右下角放大后看可以看到5像素的陰影。以下是要應用陰影效果的HTML：
<div class="img-wrapper"> < img src="dunstan.jpg" width="300"? height="300" alt="Dunstan Orchard" /> </div>
顯然，這是一個容器'div'中包含一張人物圖片（dunstan.jpg）。為了讓容器'div'包裹住圖片，首先要利用'float'讓這個塊級元素收縮，從而包裹住其中的圖片：
.img-wrapper {
background: url(images/shadow.gif) no-repeat bottom right;
clear: right;
float: left;
}
但這樣背景圖片完全隱藏在了人物圖片下方，為了讓它顯露出來，還必須配合神奇的負外邊距：
.img-wrapper img {
margin: -5px 5px 5px -5px;
}
于是，立體感十足的陰影效果做成了，見下圖：
不過，這硬邊陰影看著也忒不自然了，就算是在十幾年前也是無法接受的。那好，這塊“牛糞”還要做大點。為了模擬出自然的陰影，還需要一張與剛才的陰影圖片對角的模糊蒙版：
HTML標記也要再嵌套一層'div'：
<div class="img-wrapper"> < img src="dunstan.jpg" width="300"? height="300" alt="Dunstan Orchard" /> </div>
首先，還是給最外層的容器'div'應用硬邊陰影背景，定位在右下角：
.img-wrapper {
background: url(images/shadow.gif) no-repeat right bottom;
float: left;
}
然后，給內(nèi)層的'div'應用模糊蒙版背景，定位在左上角：
.img-wrapper div {
background: url(images/mask.png) no-repeat left top;
padding: 0 5px 5px 0;
}
最后，再給圖片添加個邊框：
.img-wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
}
大功告成：
完美！
這塊大“牛糞”威力夠大，直接催生了'box-shadow'：
img {
box-shadow: 3px 3px 6px #666;
}
這里用了僅僅一個屬性，而且效果同上。冗長的HTML和CSS代碼不見了，它們?nèi)ツ膬毫?？那還用問，它們已經(jīng)化作沉甸甸的“牛糞”裝進了你我的糞筐里。恭喜你再次撿屎成功！
想當年，大牛們?yōu)榱耸褂锰厥庾煮w實現(xiàn)不一樣的視覺效果，必須先把文字轉(zhuǎn)換成圖片，因為用戶機器上已安裝的通用字體數(shù)量有限。但圖片對搜索引擎不友好，于是有牛人想出了點子?？傮w的思路是像往常一樣使用文本，讓搜索引擎可以找到，同時再通過某種方式讓它對用戶不可見，只顯示包含特殊字體效果的圖片。
比如，Todd Fahrner的Fahrner Image Replacement (FIR)。先把文本包一個'span'中：
<h2> <span>Hello World</span> </h2>
然后給標題'h2'添加背景：
h2 {
background:url(hello_world.gif) no-repeat;
width: 150px;
height: 35px;
}
最后，隱藏'span'：
span {
display: none;
}
可是，由于多數(shù)屏幕閱讀器會忽略'display:none;'的元素，從而導致嚴重的無障礙問題。所以，這個看似簡單的方案實踐中并不可行。
于是，另一位牛人Mike Rundle想出了一個兩全其美的點子：使用負文本縮進把文本拉到屏幕之外！
這下HTML還更簡單了：
<h2> Hello World </h2>
CSS：
h2 {
text-indent: -5000px;
background:url(hello_world.gif) no-repeat;
width: 150px;
height:35px;
}
這就解決了屏幕閱讀器用戶的問題。但還沒有完，新的問題又出來了。在當時網(wǎng)絡速度很慢的情況下，可能會有用戶禁用瀏覽器顯示圖片的功能，而CSS照樣起作用。這是一種極端情況，這時候用戶會既看不到文本，也看不到圖片。
追求完美的大牛們又開始行動了。Tom Gilder和Levin Alexander最終找到了既對屏幕閱讀器友好，又能在禁用圖片打開CSS的情況下讓文本對用戶可見的方案。
這個方案首先要在被替換的元素內(nèi)額外添加一個空標簽（'span'）：
<h2> <span></span>Hello World </h2>
然后，將容器設置為相對定位：
h2 {
width: 150px;
height: 35px;
position: relative;
}
'position:relative;'將容器設定為其中'span'的定位上下文。接下來，把背景應用給'span'，并采用絕對定位，而寬和高均為父元素的'100%'會讓它完全把文本蓋在下面：
h2 span {
background: url(hello_world.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
這里只有一個問題，此時的圖片必須完全不透明，否則下面的文本就會“走光”。
如前所述，這幾塊“牛糞”最終要解決的是用戶計算機上字體匱乏的問題。這些需求最終也催生了十幾年后可以廣泛使用的Web字體。
@font-face {
font-family: Vollkorn;
src: url('fonts/Vollkorn-Regular.eot#?ie') format('embedded-opentype'),
url('fonts/Vollkorn-Regular.woff2') format('woff2'),
url('fonts/Vollkorn-Regular.woff') format('woff'),
url('fonts/Vollkorn-Regular.ttf') format('truetype'),
url('fonts/Vollkorn-Regular.svg') format('svg');
}
Web字體是一個大話題，在此我們就不過多涉及了?？傊覀冊僖淮我娮C了“牛糞”的力量，同時也給我們今天的拾糞之旅畫上了一個完美的句號。
天下碼農(nóng)千千萬，大牛卻不多。大牛之所以成為大牛，通常都會給數(shù)年后的從業(yè)者留下可供撿拾的“牛糞”。今天我們的拾糞之旅，既是對CSS歷史上曾經(jīng)輝煌一時的技術(shù)的巡禮，更是對如群星般璀璨的大牛們的致敬。
這些曾經(jīng)紅極一時的技術(shù)在今天看來或許不值一提，甚至幼稚可笑。然而，“后之視今，亦猶今之視昔?！苯裉毂豁敹Y膜拜、推崇備至的技術(shù)，十幾年后再看，或許同樣不值一提，甚至幼稚可笑。但不容否認的是，恰恰是這些今天看來簡單、幼稚的“牛糞”，孕育、滋養(yǎng)了一代一代技術(shù)人，推動著技術(shù)不斷進步和突破。人類社會就是這樣一路走過來的。
朝花夕拾。從拾糞的視角看，我們不禁深思：今天的碼農(nóng)，有幾人能留下供十年后的人撿拾的“牛糞”呢？所以，今天起，給自己定個小目標，著手準備我們的明日份“牛糞”吧！
看到這里，有好奇的同學可能會問：這些“牛糞”到底來自哪本CSS名著，能否透露一下？當然可以。它們就是CSS Mastery: Advanced Web Standards Solutions （中文版《精通CSS》）的第1版和第2版。而且，這本名著的最新版也就是第3版的中文版也剛剛上市。值得一提的是，《精通CSS（第3版）》里可是滿滿的“明日份牛糞”哦，如果想開啟你的CSS“撿屎”之旅，那一定會是個不錯的體驗。
CSS暢銷經(jīng)典全面升級，充分展示現(xiàn)代CSS實踐技巧
本書是CSS經(jīng)典圖書升級版，結(jié)合CSS近年來的發(fā)展，尤其是CSS3和HTML5的特性，對內(nèi)容進行了全面改寫。本書介紹了涉及字體、網(wǎng)頁布局、響應式Web設計、表單、動畫等方面的實用技巧，并討論了如何實現(xiàn)穩(wěn)健、靈活、無障礙訪問的Web設計，以及在技術(shù)層面如何實現(xiàn)跨瀏覽器方案和后備方案。本書還介紹了一些鮮為人知的高級技巧，讓你的Web設計脫穎而出。
搶先入門升級版？戳【了解更多】到京東購買
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
