HTML Basic I-Assignment
2016-10-09 本文已影响31人
犯迷糊的小羊
** 1. 样式的引入类型**
- 外部样式表
CSS文件在当前HTML文档之外已经生成好了，可以将CSS文件从外部引入HTML文档，当中外部引入CSS文件又可分为link与@import两种方法。
【注】
- 适用于复用性很高的样式表，但每次加载时都要调用外部文件（文件内容量较大）
- link与@import的区别
- 性质方面：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事物，@import是CSS的一种提供方式，只能加载CSS；
- 加载顺序方面：link引用CSS时，与页面同步渲染，@import需要页面完全载入后才加载；
- 兼容性方面：link是XHTNL标签，无兼容性问题，@Import是在CSS2.1提出的，低版本的浏览器不支持；
- 功能方面：link支持使用Javascript控制DOM去改变样式，@import不支持。
- 内部样式表
【注】
适用于当前页面独有的样式表，加载时也要调用外部文件（但一般文件内容较小）
- 内联样式
【注】
适用于修改特定的块级元素
2.文件路径../main.css 、./main.css、main.css有什么区别
- ../main.css表示上一层目录下的main.css文件；
- ./main.css、main.css表示当前目录下的main.css文件
3.console.log是做什么用的
- console.log实质上是在控制台console使用log方法，以输出普通信息；
- 使用console.log而不是alert，有利于直接在控制台输出调试信息，而不是在窗口弹出对话框阻断线程运行；
- 除了console.log方法之外，还包括：
- **console.info **用于输出提示性信息
- console.error用于输出错误信息
- console.warn用于输出警示信息
4.text-align:justify是什么
- text-align是html中标签的属性之一，是规定文本的对齐方式；
-
justify指的是两端对齐，那么什么是两端对齐呢？
这是一段英文左对齐的右边缘截图：
可以看到右侧是参差不起的，现在我们看看下图：
右侧完全对齐了，也就是整篇文字全部沿着左边缘和右边缘对齐显示了。
到这里，相信小伙伴们已经了解两端对齐了。
- 此外还有left、right、cente等属性值；
- 具体演示效果如下：
5.px、em、rem的联系与区别
- px/em/rem都是font-size属性值的计量单位，其中px是绝对单位，em和rem是相对单位；
- px在浏览器中默认是16px；
`X`em等于父级元素的`X`倍；-
Xrem等于HTML全局字体大小属性的Ｘ倍 - 具体演示效果如下：
【注】
使用相对单位的好处是，只要在<html>标签设定font-size,而在各个标签的字体大小属性使用相对单位，可以实现自动改变
6.chrome 审查元素的基本功能
-
进入审查元素界面后，整个视窗大致可分为：
- 1号：网页界面模块，显示网页界面；
- 2号：功能模块，对页面的各个方面处理的功能项；
- 3号：内容模块，更改具体的元素值的模块；
-
对于功能模块而言
- 橙色1号：模式选择，可使操作进入预览模式或是编辑模式；
- 橙色2号：切换设备模式，可以切换成特定分辨率的屏幕大小以便在不同设备上展示页面效果；
- 绿色1号：element表示页面的元素，进入这一功能模块，可以对页面的元素进行操作；
- 1号表示页面元素，当你点击特定元素时，在html(2号)视窗就会自动定位到相应的元素；
- 3号只讨论style标签，这里可以对web的style进行修改；
- 4号是这个特定元素的DOM;
- 绿色2号：Network是一个监控当前网页所有的http请求的面版，它主体部分展示的是每个http请求，每个字段表示着该请求的不同属性和状态
- all:表示查看所有类型的请求；
- xhr/js/css/...表示查看不同类型的请求；
- name表示请求信息的名字；
- status表示请求的状态；
- type表示请求的类型；
- Initiator表示请求源，也就是说该链接通过什么发送；
- size表示请求文件大小；
- time表示请求时间；
- timeline表示时间状态轴；
- 绿色3号：展示了本界面所加载的资源列表。还有cookie和local storage 、SESSION 等本地存储信息
- 绿色4号：显示页面的源代码，可用于断点测试；
- 绿色5号：控制台可用于测试信息的输出；
- 绿色6号：时间轴可用于监控时间
参考资料
