俗話說，出來江湖混的，持善良之心，懷正義之氣，總有志同道合者共相為謀。而HTML也有這麼幾個大哥們er、小兄dei、小寶貝兒。他們一起乾大事，為服務好普羅大眾貢獻自己一份力量，接下來讓我們一起走進他們吧。 ...
（一）WEB初識
【1】瀏覽器
| 五大主流瀏覽器 | 開發團隊或瀏覽器內核簡稱 | CSS3特定屬性（新屬性加首碼） |
|---|---|---|
| Chrome | webkit | -webkit-transform |
| Safari | webkit | |
| IE | ms | |
| Firefox | moz | |
| Opera | o |
瀏覽器內核（渲染內核和js內核，前者渲染代碼，計算顯示方式，進而讀取呈現頁面；後者偏向於動態效果的展示）
【2】web標準
瀏覽器編寫的代碼統一規範，讓瀏覽器儘可能顯示一致的效果
①由此依據，內容能被更廣泛的設備訪問
②方便代碼維護，提高頁面載入速度
③網站流量的費用就降低了
④更容易被搜索引擎搜索
⑤讓web的發展前景更廣闊
（二）SEO規範
（Search Engine Optimization）搜索引擎優化
【1】瀏覽器標簽頁title 標題
控制在28個字元最佳，網站名（或產品名）-網站的介紹
【2】Keywords 關鍵字
6~8個關鍵字最佳，電商類網站可以多些
【3】Description 網站說明
字元數含空格不超過120個漢字最佳
補title、Keywords未能充分的描述
用英文逗號隔開： "關鍵字1,關鍵字2"
【4】LOGO
加個h標題，告訴搜索引擎這裡很重要--h里放個鏈接--鏈接裡加個網站名和title提示，便於搜索引擎收錄
（三）IDE
（Integrated Department Environment）集成開發環境，又叫代碼編輯工具
【1】常用
Dreamweaver
Sublime Text
WebStorm
VScode
【2】Emmet語法
- 頁面骨架：！ 按下tab鍵
- 多個子元素：ul>li*6
- 序列化：h$*6
- 內容化：h｛學生｝*6
- 帶名：.div #div
- 複製粘貼上下行：游標到對象，shift+alt+↑或↓
- 多行選擇：游標到對象，shift+alt+按下拖動游標
查詢：ctrl+h
替換：ctrl+alt+enter
（四）切圖
【1】Cutterman是個嵌入正版PhotoShop的一個快速成圖的插件，便於web前端與UI設計工作上的對接
【2】比PS更小巧的就是Framework，建議用此軟體進行精靈圖的代碼書寫
精靈圖（sprite），因諧音又叫雪碧圖，把大量小圖片集中於一張大背景圖，一般用svg格式會好點
- 優點：可應用於大量的矢量小圖標，減少伺服器請求次數，加快頁面載入速度，提升用戶體驗
- 代碼：background：url（）no-repeat position
- 切記：position是根據切圖軟體選取對象的x,y坐標而定，且多為負值
