html调试浏览器,html基本知识：路径、单位、浏览器调试等

1. 样式有几种引入方式? link 和 @import有什么区别

三种引入方式：

外部引入css文件：

内部：

head标签内：

html标签内：

风骨来客

我是一个3级标题

link 和 @import有什么区别

link可以放在文档任何位置，通常情况下放在head标签内。

@import 和link的使用方法差不多，但是 @import必须放在标签内使用。

eg:

注: 末尾的；号必须写，而且为英文状态的。

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标签里面设置字体大小不起作用)。
补充：默认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) 所有，转载须说明来源