HTML 知识点总结2
2016-11-09 本文已影响46人
osborne
1 . 样式的引入方式? link 和@import 的区别
样式有三种引入方式：
- 外部引入
<link rel="stylesheet" type="text/css" href="index.css"> - 内部样式（位于标签内部）
<style type="text/css">p{color:red;}</style> - 内联样式（HTML元素内部）
<p style="color:blue;font-size:14px;">段落</p>
link 和 @import的区别： - link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
- link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
- link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
- link支持使用Javascript控制DOM去改变样式；而@import不支持。
2 . 文件路径../main.css 、./main.css、main.css、/main.css 的区别
-
…/main.css表示上一级目录下的css文件；
-./main.css和main.css表示当前目录下的css文件；
-/main.css表示磁盘根目录（例如c:/、d:/）下的css文件。
3 . console.log是做什么用的
console 控制台
log 日志
意思是在控制台输出日志信息,控制台也叫开发者工具,是浏览器的一部分，便于开发者调试用的。
4 .text-align有几个值，分别有什么作用？为什么text-align:justify没有效果？写截图说明区别
1 .text-align有5个值，分别是：
-
left左对齐（默认）； -
right右对齐； -
center居中对齐； -
justify两端对齐； -
inherit表示从父元素继承text-align的值。
2 . text-align:justify表示两端对齐，其效果为布满整行的文字两侧均不出现空隙，空隙在每行的每个字符之中均匀分布，截图示例如下：
test-align.jpg
代码展示
如图所示，两段颜色为深绿色darkgreen的段落同属于class:“justify”,都在css样式里对text-align设置了"justify"即段落两端对齐的属性，但第一个没有占满一行内容的深绿色段落是直接显示左对齐的样式，并没有显示"justify"的效果，因为它没有占满一行内容，只有左边对齐，右边无法和任何内容对齐，但是第二段深绿色的片段占了3行内容，可以看到应用了"justify"参数后它的左右两端都是对齐的。
5 .px、em、rem分别是什么？有什么区别？如何使用
-
px表示一个像素； -
em表示相对于父元素的像素的倍数； -
rem表示相对于<html>元素定义的像素的倍数。
三者的区别在于，px是绝对单位，em和rem是相对单位；其中em是相对父元素的字体大小来进行设定，而rem是相对根元素<html>的字体大小进行设定。
在使用过程中，由于浏览器的默认字体大小为16px，为了便于计算，一般先在body选择器下声明font-size: 62.5%，即将页面默认字体大小设置为10px，这样在使用em或rem时能够极大地简便计算过程。例如需要设置body的字体大小为20px，只需要输入body {font-size:2em;}，或者body {font-size:2rem;}，不过在设置p的字体大小为15时就需要注意是p {font-size:0.75em;}或p {font-size:1.5rem;}
6 . 对chrome 审查元素的功能做个简单的截图介绍
审查元素介绍.png
Element：:查看、编辑页面上的元素，包括HTML和CSS；
Console：Javascript控制台，可以查看错误信息、打印调试信息console.log()；
Souces：可以查看到请求的资源情况，包括CSS、JS、图片等的内容，还可以设置断点调试；
Network：可以查看网页的请求情况，可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息；
Timeline：查看Javascript执行时间、页面元素渲染时间；
Profiles：性能优化用，查看CPU执行时间与内存占用；
Application：查看网页加载的所有资源信息，包括本地库，后台数据库，图片，CSS，JavaScript等；
security：查看网页的安全性；
Audits：用于优化前端页面、加速网页加载速度。
7- 代码
- 设置body的字体为微软雅黑，字号16px， 行高1.5倍，字体颜色#333
- 设置段落颜色#000, 首行缩进两个字体宽度，1.5倍行高
- 代码练习
