**關(guān)鍵字: **
- css
- 文件路徑
- html和 css 的書寫規(guī)范
- chrome 開發(fā)者工具
CSS的全稱是什么?
CSS全稱是 Cascading Style Sheets, 層疊樣式表
CSS有幾種引入方式? link 和@import 有什么區(qū)別?
內(nèi)聯(lián)樣式
<h1 style="color: red; font-size: 20px;"></h1>
內(nèi)部樣式
<style type="text/css">
h1 {
color: red;
font-size: 20px;
}
</style>
<h1>xxx</h1>```
外部樣式
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<style>
@import url("hello.css");
@import "world.css";
</style>```
區(qū)別:
link屬于html標(biāo)簽，而@import是css提供的。
頁面被加載時，link會同時被加載，而@import引用的css會等到頁面加載結(jié)束后加載。
link是html標(biāo)簽，因此沒有兼容性，而@import只有IE5以上才能識別。
link方式樣式的權(quán)重高于@import的。
使用import時需要注意的地方：該規(guī)則必須在樣式表頭部最先聲明。并且其后的分號是必需的，如果省略了此分號，外部樣式表將無法正確導(dǎo)入，并會生成錯誤信息.
以下這幾種文件路徑分別用在什么地方，代表什么意思?
css/a.css 和 ./css/a.css
以上兩者用在當(dāng)前路徑,且都表示:指向當(dāng)前文目錄的css文件里的a.css文件
b.css :
表示當(dāng)前目錄下的b.css文件
../imgs/a.png
表示上一個目錄里imgs文件下的a.png圖片
/Users/hunger/project/css/a.css
用在本地,表示文件的絕對路徑
/static/css/a.css
用這個絕對路徑在服務(wù)器里找a.css文件
http://cdn.jirengu.com/kejian1/8-1.png
在瀏覽器里輸入這個地址找到8-1.png這張圖片
如果我想在js.jirengu.com上展示一個圖片，需要怎么操作?
列出5條以上html和 css 的書寫規(guī)范
html規(guī)范
- 縮進(jìn)與換行
強(qiáng)制使用4個空格做為一個縮進(jìn)層級不允許使用2個空格或tab字符)[強(qiáng)制] 使用 4個空格做為一個縮進(jìn)層級，不允許使用 2個空格 或 tab字符。
示例：
- 縮進(jìn)與換行
<ul>
<li>first</li>
<li>second</li>
</ul>```
建議每行不得超過120個字符
**解釋：**
過長的代碼不容易閱讀與維護(hù)。但是考慮到 HTML 的特殊性，不做硬性要求。
- 2.命名
必須單詞全字母小寫單詞間以-分隔class
必須單詞全字母小寫，單詞間以 -分隔。
必須代表相應(yīng)模塊或部件的內(nèi)容或功能，不得以樣式信息進(jìn)行命名。
示例：
<div class="sidebar"></div><div class="left"></div>
- 3.
同一個頁面中，不同的元素包含相同的 id，不符合 id 的屬性含義。并且使用 document.getElementById 時可能導(dǎo)致難以追查的問題。
建議單詞全字母小寫，單詞間以 -分隔。
同項(xiàng)目必須保持風(fēng)格一致。
- 4.
標(biāo)簽名必須使用小寫字母。
示例：
<p>Hello StyleGuide!</p>
<P>Hello StyleGuide!</P>
- 5 .
對于無需自閉合的標(biāo)簽，不允許自閉合。
解釋：
常見無需自閉合標(biāo)簽有input、br、img、hr等。
示例：
<input type="text" name="title">
<input type="text" name="title" />
- 6.
html5中規(guī)定允許省略的閉合標(biāo)簽不允許省略閉合標(biāo)簽,強(qiáng)制對 HTML5
中規(guī)定允許省略的閉合標(biāo)簽，不允許省略閉合標(biāo)簽。
解釋：
對代碼體積要求非常嚴(yán)苛的場景，可以例外。比如：第三方頁面使用的投放系統(tǒng)。
示例：
<ul> <li>first</li> <li>second</li></ul>
<ul> <li>first <li>second</ul>
- 7.
標(biāo)簽使用必須符合標(biāo)簽嵌套規(guī)則。
解釋：
比如 div 不得置于 p 中，tbody 必須置于 table 中。
詳細(xì)的標(biāo)簽嵌套規(guī)則參見[HTML DTD](http://www.cs.tut.fi/~jkorpela/html5.dtd)中的 Elements
定義部分。
- 8.
HTML標(biāo)簽的使用應(yīng)該遵循標(biāo)簽的語義。
解釋：
下面是常見標(biāo)簽語義
p - 段落
h1,h2,h3,h4,h5,h6 - 層級標(biāo)題
strong,em - 強(qiáng)調(diào)
ins - 插入
del - 刪除
abbr - 縮寫
code - 代碼標(biāo)識
cite - 引述來源作品的標(biāo)題
q - 引用
blockquote - 一段或長篇引用
ul - 無序列表
ol - 有序列表
dl,dt,dd - 定義列表
示例：
<p>Esprima serves as an important
<strong>building block</strong>
for some JavaScript language tools.</p>
<div>Esprima serves as an important
<span class="strong">building block</span>
for some JavaScript language tools.</div>
## css規(guī)范
1. 語法不區(qū)分大小寫，但建議統(tǒng)一使用小寫
2. 不使用內(nèi)聯(lián)的style屬性定義樣式
3. id和class使用有意義的單詞，分隔符建議使用
4. 有可能就是用縮寫
5. 屬性值是0的省略單位
6. 塊內(nèi)容縮進(jìn)
7. 屬性名冒號后面添加一個空格
>了解更多:
>[css規(guī)范](https://github.com/fex-team/styleguide/blob/master/css.md)
[HTML規(guī)范](https://github.com/fex-team/styleguide/blob/master/html.md)
[JavaScript規(guī)范](https://github.com/fex-team/styleguide/blob/master/javascript.md)
## 截圖介紹 chrome 開發(fā)者工具的功能區(qū)
**以上紅框內(nèi)由左至右解釋如下:**
** Elements **:
元素面板可以自由的操作DOM和CSS來迭代布局和設(shè)計頁面.實(shí)時編輯 DOM 節(jié)點(diǎn),在 Styles 窗格中
查看和更改應(yīng)用到任何選定元素的 CSS 規(guī)則。
Console
控制臺面板: 在開發(fā)期間，可以使用控制臺面板記錄診斷信息，或者使用它作為 shell在頁面上與
JavaScript交互。
Source:
在源代碼面板中設(shè)置斷點(diǎn)來調(diào)試 JavaScript ，或者通過Workspaces（工作區(qū)）連接本地文件
來使用開發(fā)者工具的實(shí)時編輯器
Network: 使用網(wǎng)絡(luò)面板了解請求和下載的資源文件并優(yōu)化網(wǎng)頁加載性能
Timeline:也稱性能面板工具欄,提供了對于在裝載你的Web應(yīng)用的過程中，時間花費(fèi)情況的概覽
這些應(yīng)用包括處理DOM事件, 頁面布局渲染或者向屏幕繪制元素。Timeline可以通過事件，框架,
和實(shí)時內(nèi)存用量3個方面的數(shù)據(jù)來監(jiān)測網(wǎng)頁，通過這些數(shù)據(jù)，我們可以方便的找出頁面中存在問題的地方
Profiles(Memory) :內(nèi)存面板:如果需要比時間軸面板提供的更多信息，可以使用“配置”面板，
例如跟蹤內(nèi)存泄漏,分析web應(yīng)用或者頁面的執(zhí)行時間以及內(nèi)存使用情況；
Application :使用資源面板檢查加載的所有資源，包括IndexedDB與Web SQL數(shù)據(jù)庫，
本地和會話存儲，cookie，應(yīng)用程序緩存，圖像，字體和樣式表
Security :使用安全面板調(diào)試混合內(nèi)容問題，證書問題等等。
Audits: 分析頁面加載的過程，進(jìn)而提供減少頁面加載時間、提升響應(yīng)速度的方案
[以上參考網(wǎng)址](https://developers.google.cn/web/tools/chrome-devtools/?hl=zh-cn)
---