1.CSS的全稱是什么?
Cascading Style Sheets 層疊樣式表，CSS是一種樣式表語(yǔ)言，用于為HTML文檔定義布局, 例如，CSS涉及字體、顏色、邊距、高 度、寬 度、背景圖像、高級(jí)定位等方面。
2.CSS有幾種引入方式? link 和@import 有什么區(qū)別?
引入方式：
1.內(nèi)聯(lián)CSS（Inline CSS）
<h1 style="color:blue;">This is a Blue Heading</h1>
2.內(nèi)部CSS（Internal CSS）在html的head中加入style標(biāo)簽
<style type="text/css">
h1 {
color: red;
font-size: 20px;
}
</style>
3.外部CSS（external CSS）在html中引入外部鏈接，要使用外部的樣式表，在<head>添加一個(gè)鏈接到它的HTML頁(yè)面的部分
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
4.導(dǎo)入CSS@import url()
<style>
@import url("hello.css");
@import "world.css";
</style>
link 和@import 區(qū)別:
- 語(yǔ)法結(jié)構(gòu)差別: link屬于HTML標(biāo)簽，只能放入html源代碼中使用，而@import是CSS提供的一種方式，只能加載CSS了。
- 加載順序的差別: link引用的CSS會(huì)在一個(gè)頁(yè)面被加載的時(shí)候（就是被瀏覽者瀏覽的時(shí)候）同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面全部被下載完再被加載。所以有時(shí)候?yàn)g覽@import加載CSS的頁(yè)面時(shí)開始會(huì)沒(méi)有樣式（就是閃爍）。
- 兼容性的差別: 由于@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識(shí)別，而link標(biāo)簽無(wú)此問(wèn)題。
- 使用dom控制樣式時(shí)的差別: 當(dāng)使用javascript控制dom去改變樣式的時(shí)候，只能使用link標(biāo)簽，因?yàn)锧import不是dom可以控制的
3.以下這幾種文件路徑分別用在什么地方，代表什么意思?
css/a.css （相對(duì)路徑，當(dāng)前目錄下css文件夾內(nèi)a.css文件）
./css/a.css (同上)
b.css （相對(duì)路徑，當(dāng)前目錄下b.css文件）
../imgs/a.png （相對(duì)路徑，上級(jí)目錄下imgs文件夾a.png文件）
/Users/clark/project/css/a.css （絕對(duì)路徑，本地絕對(duì)路徑中的a.css文件）
/static/css/a.css （網(wǎng)站路徑，在服務(wù)器上直接通過(guò)該路徑尋找相關(guān)文件）
http://cdn.jirengun.com/kejian1/8-1.png （網(wǎng)站路徑，線上的圖片地址，通過(guò)該地址可以找到圖片8-1.png。）
4.如果我想在js.baidu.com上展示一個(gè)圖片，需要怎么操作?
1.如果這個(gè)圖片本來(lái)就存在網(wǎng)絡(luò)線上，可以直接使用圖片的網(wǎng)絡(luò)絕對(duì)路徑鏈接的方式在頁(yè)面上添加url引用這張圖片
2.如果圖片在本地，可將圖片上傳到某個(gè)網(wǎng)址，生成一個(gè)線上網(wǎng)址，或?qū)D片文件存于本地服務(wù)器，開啟本地服務(wù)即可使用。
5.列出5條以上html和 css 的書寫規(guī)范
- 使用英文小寫
- 別忘記結(jié)束符
- 嵌套注意層層縮進(jìn)標(biāo)簽，縮進(jìn)使用Tab
- 使用語(yǔ)義化標(biāo)簽
- class命名使用具體的內(nèi)容，不要按會(huì)變的left/right等
- 在每個(gè) HTML 頁(yè)面的第一行添加聲明
<!DOCTYPE html> - 添加<meta>標(biāo)簽
- 使用外聯(lián)式css樣式
<link href="css.css" rel="stylesheet"> - 屬性用""包圍，用;結(jié)束
- padding/margin 等用啥寫啥，少用簡(jiǎn)寫
- css按結(jié)構(gòu)分類
- 使用注釋，方便以后或其他人理解
6.截圖介紹 chrome 開發(fā)者工具的功能區(qū)
1.Elements:查找網(wǎng)頁(yè)源代碼HTML中的任一元素,手動(dòng)修改任一元素的屬性和樣式且能實(shí)時(shí)在瀏覽器里面得到反饋。
2.Console:記錄開發(fā)者開發(fā)過(guò)程中的日志信息，且可以作為與JS進(jìn)行交互的命令行Shell。
3.Sources:斷點(diǎn)調(diào)試JS。
4.Network:從發(fā)起網(wǎng)頁(yè)頁(yè)面請(qǐng)求Request后分析HTTP請(qǐng)求后得到的各個(gè)請(qǐng)求資源信息（包括狀態(tài)、資源類型、大小、所用時(shí)間等），可以根據(jù)這個(gè)進(jìn)行網(wǎng)絡(luò)性能優(yōu)化。
5.Timeline:記錄并分析在網(wǎng)站的生命周期內(nèi)所發(fā)生的各類事件，以此可以提高網(wǎng)頁(yè)的運(yùn)行時(shí)間的性能。
6.Profiles:如果你需要Timeline所能提供的更多信息時(shí)，可以嘗試一下Profiles,比如記錄JS CPU執(zhí)行時(shí)間細(xì)節(jié)、顯示JS對(duì)象和相關(guān)的DOM節(jié)點(diǎn)的內(nèi)存消耗、記錄內(nèi)存的分配細(xì)節(jié)。
7.Application:記錄網(wǎng)站加載的所有資源信息，包括存儲(chǔ)數(shù)據(jù)（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數(shù)據(jù)、字體、圖片、腳本、樣式表等。
8.Security:判斷當(dāng)前網(wǎng)頁(yè)是否安全。
9.Audits:對(duì)當(dāng)前網(wǎng)頁(yè)進(jìn)行網(wǎng)絡(luò)利用情況、網(wǎng)頁(yè)性能方面的診斷，并給出一些優(yōu)化建議。比如列出所有沒(méi)有用到的CSS文件等。
