**關(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提供的伴网。
頁面被加載時(shí)深滚，link會(huì)同時(shí)被加載，而@import引用的css會(huì)等到頁面加載結(jié)束后加載烙肺。
link是html標(biāo)簽饮焦，因此沒有兼容性眼虱，而@import只有IE5以上才能識別。
link方式樣式的權(quán)重高于@import的宴卖。
使用import時(shí)需要注意的地方：該規(guī)則必須在樣式表頭部最先聲明。并且其后的分號是必需的邻悬，如果省略了此分號症昏，外部樣式表將無法正確導(dǎo)入，并會(huì)生成錯(cuò)誤信息.
以下這幾種文件路徑分別用在什么地方父丰，代表什么意思?
css/a.css 和 ./css/a.css
以上兩者用在當(dāng)前路徑,且都表示:指向當(dāng)前文目錄的css文件里的a.css文件
b.css :
表示當(dāng)前目錄下的b.css文件
../imgs/a.png
表示上一個(gè)目錄里imgs文件下的a.png圖片
/Users/hunger/project/css/a.css
用在本地,表示文件的絕對路徑
/static/css/a.css
用這個(gè)絕對路徑在服務(wù)器里找a.css文件
http://cdn.jirengu.com/kejian1/8-1.png
在瀏覽器里輸入這個(gè)地址找到8-1.png這張圖片
如果我想在js.jirengu.com上展示一個(gè)圖片肝谭，需要怎么操作?
列出5條以上html和 css 的書寫規(guī)范
html規(guī)范
- 縮進(jìn)與換行
強(qiáng)制使用4個(gè)空格做為一個(gè)縮進(jìn)層級不允許使用2個(gè)空格或tab字符)[強(qiáng)制] 使用 4個(gè)空格做為一個(gè)縮進(jìn)層級，不允許使用 2個(gè)空格 或 tab字符础米。
示例：
- 縮進(jìn)與換行
<ul>
<li>first</li>
<li>second</li>
</ul>```
建議每行不得超過120個(gè)字符
**解釋：**
過長的代碼不容易閱讀與維護(hù)分苇。但是考慮到 HTML 的特殊性添诉，不做硬性要求屁桑。
- 2.命名
必須單詞全字母小寫單詞間以-分隔class
必須單詞全字母小寫，單詞間以 -分隔栏赴。
必須代表相應(yīng)模塊或部件的內(nèi)容或功能蘑斧，不得以樣式信息進(jìn)行命名。
示例：
<div class="sidebar"></div><div class="left"></div>
- 3.
同一個(gè)頁面中须眷，不同的元素包含相同的 id竖瘾，不符合 id 的屬性含義。并且使用 document.getElementById 時(shí)可能導(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. 屬性名冒號后面添加一個(gè)空格
>了解更多:
>[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è)計(jì)頁面.實(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í)時(shí)編輯器
Network: 使用網(wǎng)絡(luò)面板了解請求和下載的資源文件并優(yōu)化網(wǎng)頁加載性能
Timeline:也稱性能面板工具欄,提供了對于在裝載你的Web應(yīng)用的過程中麦到，時(shí)間花費(fèi)情況的概覽
這些應(yīng)用包括處理DOM事件, 頁面布局渲染或者向屏幕繪制元素绿饵。Timeline可以通過事件，框架,
和實(shí)時(shí)內(nèi)存用量3個(gè)方面的數(shù)據(jù)來監(jiān)測網(wǎng)頁瓶颠，通過這些數(shù)據(jù)拟赊，我們可以方便的找出頁面中存在問題的地方
Profiles(Memory) :內(nèi)存面板:如果需要比時(shí)間軸面板提供的更多信息，可以使用“配置”面板粹淋，
例如跟蹤內(nèi)存泄漏,分析web應(yīng)用或者頁面的執(zhí)行時(shí)間以及內(nèi)存使用情況吸祟；
Application :使用資源面板檢查加載的所有資源，包括IndexedDB與Web SQL數(shù)據(jù)庫桃移，
本地和會(huì)話存儲屋匕，cookie，應(yīng)用程序緩存借杰，圖像过吻，字體和樣式表
Security :使用安全面板調(diào)試混合內(nèi)容問題，證書問題等等蔗衡。
Audits: 分析頁面加載的過程纤虽，進(jìn)而提供減少頁面加載時(shí)間、提升響應(yīng)速度的方案
[以上參考網(wǎng)址](https://developers.google.cn/web/tools/chrome-devtools/?hl=zh-cn)
---