html基本知识：路径、单位、浏览器调试等
1. 样式有几种引入方式? link 和 @import有什么区别
- 三种引入方式：
外部引入css文件：
<link rel="stylesheet" type="text/css" href="demo.css" />
内部：
- head标签内：<br />
<style type="text/css"> p { color:red; } </style>
-
html标签内：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>风骨来客</title>
</head>
<body>
<h3 style="color:blue;">我是一个3级标题</h3>
</body>
</html>
link和@import有什么区别
- link可以放在文档任何位置，通常情况下放在head标签内。
@import 和link的使用方法差不多，但是 @import必须放在<style>..</style>标签内使用。
eg:
<style type="text/css"> @import url(css/demo.css); </style>
注: 末尾的；号必须写，而且为英文状态的。- 1.link属于html标签，而@import完全是css提供的一种方式。
link标签除了可以加载css外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载css了。- 2.加载顺序的差别。
link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。- 3.兼容性差别。
@import是css2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。- 4.使用dom控制样式时的差别。
当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。- 5.@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：
main.css
———————-
@import “sub1.css”;
@import “sub2.css”;
sub1.css
———————-
p {color:red;}
sub2.css
———————-
.myclass {color:blue}
这样更利于修改和扩展。
风骨提示：这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。像新浪等网站的首页或栏目首页代码，他们总会把css或js直接写在html 里，而不用外部文件，方便加载，减轻服务器压力。
2. 文件路径../main.css 、./main.css、main.css、/main.css有什么区别
../main.css:当前层级的上一个层级寻找main.css
./main.css:当前层级寻找main.css
main.css:当前层级寻找main.css
/main.css：根目录引入main.css 根目录参考资料
3. console.log是做什么用的
用来分析和调试的一个JS函数，可以在浏览器的开发工具控制台中使用，改变参数值，调试和完善页面。
参考资料
4. text-align有几个值，分别有什么作用？写截图说明区别
值 | 作用 |
--- | ---- | ---
left | 文本左对齐
right | 文本右对齐
center | 文本居中对齐
justify | 文本两边对齐
截图说明：
QQ20160816-0@2x.png
QQ20160816-1@2x.png
5. px、em、rem分别是什么？有什么区别？如何使用
|说明|
---|----
px| pixel：像素，是屏幕上显示数据的最基本的点，表示相对大小，比较常用和稳定
em| 相对长度单位，em是基于父级元素font-size的
rem| css3新增的一个相对单位，它只对于html根元素起效果(在body标签里面设置字体大小不起作用)。<br />补充：默认font-size大小是16px(如果html中没有设置的话)
6. 对chrome 审查元素的功能做个简单的截图介绍
-
鼠标双击→检查→打开控制台
D3EE2F96-91D6-45EB-B690-3980C6AC6B1C.png
CA254F7B-1D71-4202-AC83-AF22804AE97B.png
- 点击页面控制台展示对应代码→修改参数→调试预览
CF0DCF12-716B-498D-BDE8-6AE5396AED4F.png
- 切换PC 和 移动端显示预览
A1038422-4362-4885-91CA-6763049B0B3D.png
- Element：html结构，操作dom样式、结构、时间的显示面板
- Resources：本界面所加载的资源列表。还有cookie和local storage 、SESSION 等本地存储信息，在这里，我们可以自由地修改、增加、删除本地存储
- Source：出现问题时，进行js断点调试
- Console：输出你自己代码。它可以配合其他面板一起使用。点击右上角的>_剪头可以启用或者收起它。
7.如下代码，设置 p为几 rem，让h1和p的字体大小相等?
C86266B1-C051-4044-AC64-8B5224DE12B9.png
答: 6rem
6BED59FD-AA84-40BE-854F-2BC01FA4A7E3.png
浏览器的默认高度一般为16px；
为什么用62.5%作为html的默认样式? →16px62.5%=10px，设了62.5%后就有1rem = 10px
参考资料
8. 代码
1,设置body的字体为微软雅黑，字号16px， 行高1.5倍，字体颜色 #333
2,设置段落颜色#000, 首行缩进两个字体宽度，1.5倍行高
git提交到github
本文章著作权归（风骨来客qq:2361597776）和饥人谷(QQ 群: 222459918) 所有，转载须说明来源
