任务5_HTML2

课程目标

掌握样式的几种引入方式
能使用Chrome开发工具进行基本页面调试
熟悉常见文本样式
熟悉单位的使用

课程建议

代码题需要把代码提交到公共作业项目下自己名字的文件夹内，如homework/若愚/task5-1.html

当提交完作业后，可在浏览器查看代码作业预览。如：班级项目是 jrg-renwu4
，在提交作业后可在 http://book.jirengu.com/jirengu-inc/jrg-renwu4/查看

预习视频

课程视频- HTML 基础-资源路径&样式引入方式&基本调试
课程视频- HTML 基础-单位-基础样式

课程任务

问答

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

样式有三种写法——
（确切的说如果包含浏览器缺省（默认）的设置一共有四种，以下罗列其余三种写法）

• 外部样式表

link rel="stylesheet" type="text/css" href="css文件路径地址"

(其中，href为资源定位符，与src作用一致；
type="text/css"为html4中所必须的，而在html5中可忽略)

• *优势:文件可控制多个页面；易改版、便于维护；减少代码量、代码简洁规范易于分工协作；有效利用缓存机制。
• 劣势：外部引入中的href属性会给服务器造成请求的压力。*
• 内部样式表（位于标签内部）

• 这种方式的缺点是只对当前页面有效,不便于维护.不过像外部样式表那样加载外部文件需要时间如果有少量的,只在本页面使用的css时推荐这种方式.
• 内联样式表（位于标签内部）

段落

• 这种方式只对当前元素有效

***总结：大量、通用的样式用外部样式表；少量的独有的放在内部样式表。 ***

另外JS的引入方式也可以分为：

• 内部JS

• 外部JS

---

** link和@import有什么区别——**
关于标签：

• 实例

href 值为外部资源地址，这里是css的地址；
rel 定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheet；
type 规定被链接文档的 MIME 类,这里是值为text/css

• 浏览器支持

  
  
  

  能支持标签的浏览器
• 定义与用法
  标签定义文档与外部资源的关系。
  标签最常见的用途是链接样式表。
• HTML 与 XHTML 之间的差异
  在 HTML 中， 标签没有结束标签。
  在 XHTML 中， 标签必须被正确地关闭。
• 提示和注释：
  注释：link 元素是空元素，它仅包含属性。
  注释：此元素只能存在于 head 部分，不过它可出现任何次数。
• 属性
  
  

  标签属性
  
  关于@import
  实例：
  在html中

在css中

@import url(css文件路径地址);

关于两者的异同
相同点：作用一样，即都是引入外部的css样式
不同点：

• @import url（）机制是不同于link的，link是在加载页面前把css加载完毕，所以显示出来的页面从开始就是带样式效果的；而@import url（）则是读取完文件后在加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)。
• @import 是css2里面的，所以古老的ie5不支持。
• 当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。（由于这一点没学习JS还不能理解）
• link属于XHTML标签（功能不局限于导入CSS），而@import则是CSS提供的一种规则（CSS2.1以后，要考虑兼容）。
• @import url(xxx.css); 有最大次数的限制，经测试IE6的最大次数是31次。
• link的复用度更高，适用于大量的共有的样式，@import的网络请求较少， 适用于少量的独有的样式。

其实link和@import的最根本区别就是，link是一个html的一个标签，而@import是css的一个标签

总结：本质上两者使用选择区别不大，但为了软件中编辑布局网页html代码，一般使用link较多，也推荐使用link。

扩展阅读：
HTML 标签
HTML DOM Link 对象
web前端优化时为什么不建议使用css @import
css @import url加载样式应用深入分析
css中link和@import的区别分析详解
高性能网站设计：不要使用@import

2. 文件路径../main.css、./main.css、main.css有什么区别

../表示当前文件的上级文件夹,./表示当前文件所在的文件夹，故——

• ./main.css和main.css都代表当前目录的main.css文件。
• ../main.css代表上一级目录的mian.css文件。

3. console.log是做什么用的

• 什么是console.log()？

console.log是一个彪悍的输出记录功能，我可以从我自己的web页面上调用，然后以最快的方式转储尽可能多的信息到控制台上，从而能更醒目地让你意识到你的javascript下一步需要做什么。
在具备调试功能的浏览器上，window对象中会注册一个名为console的成员变量，指代调试工具中的控制台。通过调用该console对象的log()函数，可以在控制台中打印信息。比如，以下代码将在控制台中打印”Sample log”：

console.log("Sample log");

console.log()可以接受任何字符串、数字和JavaScript对象。与alert()函数类似，console.log()也可以接受换行符\n以及制表符\t。console.log()语句所打印的调试信息可以在浏览器的调试控制台中看到。

• 什么是alert()?

在JavaScript代码中，可以使用window对象的alert()函数来显示一段文本，从而进行程序的调试，或者向用户警示相关信息。代码如下：

alert("sample text");

• console.log()和alert()的异同
• 相同点
  • 两者都可以调试程序
  • 两者都可以接受变量并将其与别的字符串进行拼接
• 不同点
  • alert()函数可以用来向用户警示信息,console()不能
  • alert()有阻塞作用，不点击确定，后续代码无法继续执行,console()可在打印台输出
  • console.log()可以接受变量作为参数传递到字符串中，alert()不行

总结：对于JavaScript程序的调试，相比于alert()，使用console.log()是一种更好的方式，原因在于：alert()函数会阻断JavaScript程序的执行，从而造成副作用；而console.log()仅在控制台中打印相关信息，因此不会造成类似的顾虑

（尽管查阅相关资料，但是JS知识还没学到，并不能很好的融会贯通，需以后再慢慢消化）

扩展阅读：
Window alert() 方法
JavaScript中的alert()函数使用技巧详解
JavaScript调试技巧之console.log()详解
简介alert()与console.log()的不同

4. text-align有几个值，分别有什么作用

值	作用
left	把文本排到左边
right	把文本排到右边
center	把文本排到中间
justify	两端对齐
inherit	规定应该从父元素继承text-align属性的值

附实例：

text-align练习

5. px、em、rem分别是什么？有什么区别？如何使用

px、em、rem分别是什么？有什么区别？

• CSS有哪些单位

单位	描述
%	百分比
in	英寸
cm	厘米
mm	毫米
em	1em等于当前的字体尺寸；2em等钱字体尺寸的2倍。例如，如果某元素以12pt显示，那么2em是24pt
ex	一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt	磅 (1 pt 等于 1/72 英寸)
pc	12 点活字 (1 pc 等于 12 点)
px	像素 (计算机屏幕上的一个点)

• px、em、rem区别介绍

  • px
    px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
  • IE无法调整那些使用px作为单位的字体大小。
  • em
    em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
  • IE无法调整那些使用px作为单位的字体大小。
  • em会继承父级元素的字体大小。
    （注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
    所以我们在写CSS的时候，需要注意：
    （1）body选择器中声明Font-size=62.5%；
    （2）将你的原来的px数值除以10，然后换上em作为单位；
    （3）重新计算那些被放大的字体的em数值。避免字体大小的重复声明。）

• rem
  rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
  (注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。)

• px 与 rem 的选择？
  对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
  对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

• 使用实例

px、em及rem使用实例

6. 对chrome 审查元素的功能做个简单的截图介绍

饥人谷首页chrome审查元素

1. Elements
   允许我们从浏览器的角度看页面，也就是说我们可以看到chrome渲染页面所需要的的HTML、CSS和DOM(Document Object Model)对象。此外，还可以编辑这些内容更改页面显示效果；
2. Console
   显示各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互；
3. Sources
   主要用来调试js；
4. Network
   可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。此外，还可以查看HTTP的请求头，返回内容等；
5. Timeline
   提供了加载页面时花费时间的完整分析，所有事件，从下载资源到处理Javascript，计算CSS样式等花费的时间都展示在Timeline中；
6. Profiles
   分析web应用或者页面的执行时间以及内存使用情况；
7. Resources
   对本地缓存（IndexedDB、Web SQL、Cookie、应用程序缓存、Web Storage）中的数据进行确认及编辑；
8. Security
9. Audits
   分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案。

扩展阅读：
Chrome开发者工具使用教程

7. 如下代码，设置p为几rem，让h1和p的字体大小相等?

 
饥人谷
 
饥人谷
 

结论：
分析过程：
任意浏览器的默认字体高都是16px，所以所有未经调整的浏览器都符合: 1em=16px；
那么12px=0.75em,10px=0.625em；
为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%；
这就使em值变为 16px*62.5%=10px；
rem表现为相对于html根元素的相对大小，此时html跟元素为1em，即10px；
h1表现为60px，即6em，故p只需为6em,即6rem，即可与h1字体大小相等

---

代码:

代码地址

---

本教程版权归本人和饥人谷所有，转载须说明来源