HTML其餘概念

（一）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座標而定，且多爲負值