**关键字: **
- css
- 文件路径
- html和 css 的书写规范
- chrome 开发者工具
CSS的全称是什么?
CSS全称是 Cascading Style Sheets, 层叠样式表
CSS有几种引入方式? link 和@import 有什么区别?
内联样式
<h1 style="color: red; font-size: 20px;"></h1>
内部样式
<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>```
区别:
link属于html标签，而@import是css提供的。
页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
link方式样式的权重高于@import的。
使用import时需要注意的地方：该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息.
以下这几种文件路径分别用在什么地方，代表什么意思?
css/a.css 和 ./css/a.css
以上两者用在当前路径,且都表示:指向当前文目录的css文件里的a.css文件
b.css :
表示当前目录下的b.css文件
../imgs/a.png
表示上一个目录里imgs文件下的a.png图片
/Users/hunger/project/css/a.css
用在本地,表示文件的绝对路径
/static/css/a.css
用这个绝对路径在服务器里找a.css文件
http://cdn.jirengu.com/kejian1/8-1.png
在浏览器里输入这个地址找到8-1.png这张图片
如果我想在js.jirengu.com上展示一个图片，需要怎么操作?
列出5条以上html和 css 的书写规范
html规范
- 缩进与换行
强制使用4个空格做为一个缩进层级不允许使用2个空格或tab字符)[强制] 使用 4个空格做为一个缩进层级，不允许使用 2个空格 或 tab字符。
示例：
- 缩进与换行
<ul>
<li>first</li>
<li>second</li>
</ul>```
建议每行不得超过120个字符
**解释：**
过长的代码不容易阅读与维护。但是考虑到 HTML 的特殊性，不做硬性要求。
- 2.命名
必须单词全字母小写单词间以-分隔class
必须单词全字母小写，单词间以 -分隔。
必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。
示例：
<div class="sidebar"></div><div class="left"></div>
- 3.
同一个页面中，不同的元素包含相同的 id，不符合 id 的属性含义。并且使用 document.getElementById 时可能导致难以追查的问题。
建议单词全字母小写，单词间以 -分隔。
同项目必须保持风格一致。
- 4.
标签名必须使用小写字母。
示例：
<p>Hello StyleGuide!</p>
<P>Hello StyleGuide!</P>
- 5 .
对于无需自闭合的标签，不允许自闭合。
解释：
常见无需自闭合标签有input、br、img、hr等。
示例：
<input type="text" name="title">
<input type="text" name="title" />
- 6.
html5中规定允许省略的闭合标签不允许省略闭合标签,强制对 HTML5
中规定允许省略的闭合标签，不允许省略闭合标签。
解释：
对代码体积要求非常严苛的场景，可以例外。比如：第三方页面使用的投放系统。
示例：
<ul> <li>first</li> <li>second</li></ul>
<ul> <li>first <li>second</ul>
- 7.
标签使用必须符合标签嵌套规则。
解释：
比如 div 不得置于 p 中，tbody 必须置于 table 中。
详细的标签嵌套规则参见[HTML DTD](http://www.cs.tut.fi/~jkorpela/html5.dtd)中的 Elements
定义部分。
- 8.
HTML标签的使用应该遵循标签的语义。
解释：
下面是常见标签语义
p - 段落
h1,h2,h3,h4,h5,h6 - 层级标题
strong,em - 强调
ins - 插入
del - 删除
abbr - 缩写
code - 代码标识
cite - 引述来源作品的标题
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规范
1. 语法不区分大小写，但建议统一使用小写
2. 不使用内联的style属性定义样式
3. id和class使用有意义的单词，分隔符建议使用
4. 有可能就是用缩写
5. 属性值是0的省略单位
6. 块内容缩进
7. 属性名冒号后面添加一个空格
>了解更多:
>[css规范](https://github.com/fex-team/styleguide/blob/master/css.md)
[HTML规范](https://github.com/fex-team/styleguide/blob/master/html.md)
[JavaScript规范](https://github.com/fex-team/styleguide/blob/master/javascript.md)
## 截图介绍 chrome 开发者工具的功能区
**以上红框内由左至右解释如下:**
** Elements **:
元素面板可以自由的操作DOM和CSS来迭代布局和设计页面.实时编辑 DOM 节点,在 Styles 窗格中
查看和更改应用到任何选定元素的 CSS 规则。
Console
控制台面板: 在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell在页面上与
JavaScript交互。
Source:
在源代码面板中设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件
来使用开发者工具的实时编辑器
Network: 使用网络面板了解请求和下载的资源文件并优化网页加载性能
Timeline:也称性能面板工具栏,提供了对于在装载你的Web应用的过程中，时间花费情况的概览
这些应用包括处理DOM事件, 页面布局渲染或者向屏幕绘制元素。Timeline可以通过事件，框架,
和实时内存用量3个方面的数据来监测网页，通过这些数据，我们可以方便的找出页面中存在问题的地方
Profiles(Memory) :内存面板:如果需要比时间轴面板提供的更多信息，可以使用“配置”面板，
例如跟踪内存泄漏,分析web应用或者页面的执行时间以及内存使用情况；
Application :使用资源面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，
本地和会话存储，cookie，应用程序缓存，图像，字体和样式表
Security :使用安全面板调试混合内容问题，证书问题等等。
Audits: 分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案
[以上参考网址](https://developers.google.cn/web/tools/chrome-devtools/?hl=zh-cn)
---