前端總結（未完成）

時間 2019-11-22

標籤前端總結未完成简体版

原文原文鏈接

meta 標籤的使用，以及經常使用的屬性：css

一、指示瀏覽器用哪一個html版本編寫的指令，經常使用：<!DOCTYPE html>編寫版本爲html5html

二、<meta charset="utf-8"> 頁面的編碼格式html5

三、<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
以上代碼IE=edge告訴IE使用最新的引擎渲染網頁，chrome=1則能夠激活Chrome Frame.
PS：谷歌添加一個插件：Google Chrome Frame（谷歌內嵌瀏覽器框架GCF），這個插件可讓用戶的IE瀏覽器外不變，但用戶在瀏覽網頁時，
實際上使用的是Google Chrome瀏覽器內核，並且支持IE六、七、8等多個版本的IE瀏覽器。css3

四、<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
適用於手機端，用於控制網頁的縮放web

五、<meta http-equiv="cache-control" content="no-cache"> 緩存機制chrome

六、<meta name="keywords" content=""> 和<meta name="description" content=""> keywords和description 用於搜索引擎的優化

七、<meta name="renderer" content="webkit">//默認webkit內核
<meta name="renderer" content="ie-comp">//默認IE兼容模式
<meta name="renderer" content="ie-stand">//默認IE標準模式
（不是特別清楚，說是用於360瀏覽器以及存在ie和chrome的內核模式）

八、額外：<meta name="revised" content="設計網, 6/24/2015"/> 文件的最新修改時間，方便多人操做canvas

html5 新標籤的使用瀏覽器

一、對於不支持最新h5和css3的瀏覽器，引用modernizrJs或者html5shiv（生成modernizr時注意默認勾選html5shiv）緩存

二、新標籤的使用不熟練sass

三、canvas和svg的使用問題

提升css 的性能以及命名要求：

一、儘可能把樣式寫在單獨的css文件中，head中引用，少使用style標籤以及直接寫在內聯上

二、css 能夠緩存、重用，下降維護成本；

三、不用試@import，import會影響css文件的加載速度

四、避免使用複雜的選擇器，層級越少越好（嵌套層級，儘可能不超過3個）

五、利用css繼承減小代碼量

六、注意命名、備註，提取重複樣式

七、注意書寫順序
文字系列（font、line-height、letter-spacing、color、text-align）
背景（background、border）
位置屬性（position、top、right、z-index、display、float）
大小（width、height、padding、margin）
其餘（animation、transition）

八、模塊化css：base基礎樣式、layout佈局樣式、module模塊樣式、state狀態樣式、theme皮膚樣式

九、使用字體圖標以及相關css sprites，減小界面http的請求

十、常見的命名：
頭部：header ; 內容：content/container ; 尾: footer ; 導航： nav ；側欄： sidebar
欄目：columns ；左右中：left right center ；登陸條： loginbar ；標誌： logo
廣告：banner ；頁面主體：main ；熱點： hot ；新聞：news ；下載：download
子導航：subnav ；菜單：menu ；子菜單：submenu ；搜索：search ；友情連接： friendlink
版權：copyright ；滾動：scroll ；標籤： tags ；列表:list ;信息：msg ；提示：tips
標題：title ；指南：guide ；服務：service ；加入：join ；註冊：register ；登陸： login
狀態：status ；投票：vote ；合做夥伴：partner ；主導航：mainnav ；子導航：subnav
頂導航：topnav ；左邊導航：leftnav ；右邊導航：rightnav ；邊導航：sidenav
摘要：summary

十一、css內部的分類以及順序
1）、重置（reset）和默認（base）
2）、統一處理
3）、佈局（grid）（.g-）
4）、模塊（module）（.m-）
5）、元件（unit）（.u-）
6）、功能（function）（.f-）
7）、皮膚（skin）（.s-）
8）、狀態（.z-）

sass/less的使用注意點