HTML Basic I-Assignment

** 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全局字体大小属性的Ｘ倍
• 具体演示效果如下：

【注】
使用相对单位的好处是，只要在标签设定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号：时间轴可用于监控时间

---

• 代码作业链接

---

参考资料

• link和@import的区别深入探讨
• Chrome 控制台console的用法
• Chrome 的审查元素功能有哪些奇技淫巧？
• Chrome开发者工具不完全指南