1.CSS的全稱是什么?
層疊樣式表(英文全稱:Cascading Style Sheets)
2.CSS有幾種引入方式? link 和@import 有什么區(qū)別?
1.
- <big> 鏈入外部樣式表 </big>,例如:
<link href="mystyle.css" rel="stylesheet" type="text/css"/> - <big>內(nèi)部樣式表</big>,例如 :
<div style="color: #333"><div> - <big>內(nèi)嵌樣式</big>,例如:
<head>
<style type="text/css">
...此處寫(xiě)CSS樣式
</style>
</head>
- <big>導(dǎo)入外部樣式表</big>,例如:
<style type="text/css">
@import"mystyle.css"; 此處要注意.css文件的路徑
</style>
2.
區(qū)別1:link是XHTML標(biāo)簽,除了加載CSS外,還可以定義RSS等其他事務(wù);@import屬于CSS范疇,只能加載CSS。
區(qū)別2:link引用CSS時(shí),在頁(yè)面載入時(shí)同時(shí)加載;@import需要頁(yè)面網(wǎng)頁(yè)完全載入以后加載。
區(qū)別3:link是XHTML標(biāo)簽,無(wú)兼容問(wèn)題;@import是在CSS2.1提出的,低版本的瀏覽器不支持。
區(qū)別4:link支持使用Javascript控制DOM去改變樣式;而@import不支持。
3.以下這幾種文件路徑分別用在什么地方,代表什么意思?
3.1.相對(duì)路徑
路徑名 | 含義 |
---|---|
css/a.css | 當(dāng)前目錄下的css文件夾中的a.css |
./css/a.css | 當(dāng)前目錄中css文件夾中的a.css文件 |
b.css | 當(dāng)前目錄下的b.css文件 |
../imgs/a.png | 上級(jí)目錄中的imgs 文件夾中的a圖片 |
3.2.絕對(duì)路徑(本地文件的絕對(duì)地址)
路徑名 | 含義 |
---|---|
/User/hunger/project/css/a.css | 本地絕對(duì)路徑中的a.css文件 |
3.3.網(wǎng)站路徑
路徑名 | 含義 |
---|---|
/static/css/a.css | 網(wǎng)站中也可以使用相對(duì)路徑 |
http://cdn.jirengu.com/kejian1/8-1.png3 | 網(wǎng)絡(luò)中的路徑 |
4.如果我想在js.jirengu.com上展示一個(gè)圖片,需要怎么操作?
將本地圖片上傳,通過(guò)瀏覽器加載server中文件夾內(nèi)的圖片
上傳完成后,當(dāng)圖片所在文件夾與html展示頁(yè)面在同級(jí)目錄中時(shí),我們可以通過(guò)相對(duì)路徑直接調(diào)用展示
比如:
< img src=" " alt=" ">
這里的src是對(duì)應(yīng)的相對(duì)路徑
比如/images/a.png。如果是網(wǎng)絡(luò)資源:
< img src="http://cdn.jirengu.com/kejian1/8-1.png3" alt="jirengu">
可采用網(wǎng)絡(luò)路徑直接引入.。
5.列出5條以上html和 css 的書(shū)寫(xiě)規(guī)范
html
- 文檔類型聲明及編碼;
- 語(yǔ)義化html;
- 必須為含有描述性表單元素(input, textarea)添加label標(biāo)簽;
- 能以背景形式呈現(xiàn)的圖片, 盡量寫(xiě)入css樣式中;
- 給區(qū)塊代碼及重要功能(比如循環(huán))加上注釋, 方便后臺(tái)添加功能;
css
- class與id的命名要有條理性;
- 書(shū)寫(xiě)代碼前, 考慮并提高樣式重復(fù)使用率;
- 充分利用html自身屬性及樣式繼承原理減少代碼量;
- 避免兼容性屬性的使用;
- 必須為大區(qū)塊樣式添加注釋, 小區(qū)塊適量注釋;
6.截圖介紹 chrome 開(kāi)發(fā)者工具的功能區(qū)
- Elements:查找網(wǎng)頁(yè)源代碼HTML中的任一元素,手動(dòng)修改任一元素的屬性和樣式且能實(shí)時(shí)在瀏覽器里面得到反饋。
- Console:記錄開(kāi)發(fā)者開(kāi)發(fā)過(guò)程中的日志信息,且可以作為與JS進(jìn)行交互的命令行Shell。
- Sources:斷點(diǎn)調(diào)試JS。
- 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)化。
- Timeline:記錄并分析在網(wǎng)站的生命周期內(nèi)所發(fā)生的各類事件,以此可以提高網(wǎng)頁(yè)的運(yùn)行時(shí)間的性能。
- Profiles:如果你需要Timeline所能提供的更多信息時(shí),可以嘗試一下Profiles,比如記錄JS CPU執(zhí)行時(shí)間細(xì)節(jié)、顯示JS對(duì)象和相關(guān)的DOM節(jié)點(diǎn)的內(nèi)存消耗、記錄內(nèi)存的分配細(xì)節(jié)。
- Application:記錄網(wǎng)站加載的所有資源信息,包括存儲(chǔ)數(shù)據(jù)(Local Storage、Session Storage、IndexedDB、Web SQL、Cookies)、緩存數(shù)據(jù)、字體、圖片、腳本、樣式表等。
- Security:判斷當(dāng)前網(wǎng)頁(yè)是否安全。
- Audits:對(duì)當(dāng)前網(wǎng)頁(yè)進(jìn)行網(wǎng)絡(luò)利用情況、網(wǎng)頁(yè)性能方面的診斷,并給出一些優(yōu)化建議。比如列出所有沒(méi)有用到的CSS文件等