任務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屬性會給服務器造成請求的壓力。*
  • 內部樣式表（位于標簽內部）
<style type="text/css">
    p{color: red; }
</style>
  • 這種方式的缺點是只對當前頁面有效,不便于維護.不過像外部樣式表那樣加載外部文件需要時間如果有少量的,只在本頁面使用的css時推薦這種方式.
  • 內聯樣式表（位于標簽內部）
<p style="color: blue; font-size:14px;">段落</p>
  • 這種方式只對當前元素有效

***總結：大量、通用的樣式用外部樣式表；少量的獨有的放在內部樣式表。 ***

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

  • 內部JS
<script>
    console.log("hello");
</script>
  • 外部JS
<script type="text/javascript" src="js文件路徑地址"></script>

** link和@import有什么區別——**
關于<link>標簽：

  • 實例
<head>
<link rel="stylesheet" type="text/css" href="css文件路徑地址" />
</head>

href 值為外部資源地址，這里是css的地址；
rel 定義當前文檔與被鏈接文檔之間的關系,這里是外部css樣式表即stylesheet；
type 規定被鏈接文檔的 MIME 類,這里是值為text/css

  • 瀏覽器支持


    能支持<link>標簽的瀏覽器
  • 定義與用法
    <link> 標簽定義文檔與外部資源的關系。
    <link> 標簽最常見的用途是鏈接樣式表。
  • HTML 與 XHTML 之間的差異
    在 HTML 中，<link> 標簽沒有結束標簽。
    在 XHTML 中，<link> 標簽必須被正確地關閉。
  • 提示和注釋：
    注釋：link 元素是空元素，它僅包含屬性。
    注釋：此元素只能存在于 head 部分，不過它可出現任何次數。
  • 屬性
    <link>標簽屬性

    關于@import
    實例：
    在html中
<head>
<style>
@import url(css文件路徑地址);
</style>
</head>

在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 <link> 標簽
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的字體大小相等?

 <h1>饑人谷</h1> 
<p>饑人谷</p> 
<style> 
html{ 
font-size: 62.5%; 
} 
p{ 
font-size: ?rem; 
} 
h1{ 
font-size: 60px; 
} 
</style>

結論：
分析過程：
任意瀏覽器的默認字體高都是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字體大小相等

代碼:

代碼地址

本教程版權歸本人和饑人谷所有，轉載須說明來源

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1.樣式有幾種引入方式？ link 和 @import 有什么區別？ CSS有3種引入方式： 外部樣式表在 標簽里...
    Timmmmmmm閱讀 229評論 0贊 0
  • **2016/05/07 問題 樣式有幾種引入方式? 樣式的3種寫法外部樣式表 內部樣式表(位于標簽內部) bod...
    嘿菠蘿閱讀 255評論 0贊 0
  • 樣式有幾種引入方式? 外部樣式 link(鏈接)和@import（導入） 內部樣式（標簽內部） p{color:r...
    饑人谷_鋒閱讀 266評論 0贊 0
  • 1. 樣式有幾種引入方式? link 和 @import有什么區別？ 外部樣式表：指在html文件的head標簽...
    小木子2016閱讀 317評論 0贊 0
  • 你知道你是誰嗎？ 每天早上起來，照著鏡子，看著鏡中的自己，試著問一問：你是誰?你會發現你有短暫的迷...
    李素衣閱讀 212評論 0贊 0