任務(wù)6_HTML3

課程目標

掌握基本標簽和基本樣式的用法

學(xué)習(xí)建議

閱讀資料都是老師的原創(chuàng)文章、示例代碼、或者是精心挑選的文章。是除視頻外很好的學(xué)習(xí)資源

課程視頻

課程視頻-HTML-常見標簽
課程視頻-HTML-a鏈接|錨點
課程視頻-HTML- 表格樣式|隱藏和透明

課程任務(wù)

問答

一、line-height有什么作用?

  • line-height的定義和用法
    line-height 屬性設(shè)置行間的距離（行高）。
    注釋：不允許使用負值。
    說明：

  • 該屬性會影響行框的布局。在應(yīng)用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。

  • line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文本行內(nèi)容的頂部和底部。可以包含這些內(nèi)容的最小框就是行框。

  • 原始數(shù)字值指定了一個縮放因子，后代元素會繼承這個縮放因子而不是計算值。
    OK，那么問題來了，針對于說明1...

  • 啥叫基線
    翻閱博客認識如下：

    基線的識別

  • 涉及基線的幾個概念：
    行高：是指上下文本行的基線間的垂直距離，即圖中兩條紅線間垂直距離。
    行距：是指一行底線到下一行頂線的垂直距離，即第一行粉線和第二行綠線間的垂直距離。
    半行距：是行距的一半，即區(qū)域3垂直距離/2，區(qū)域1，2，3，4的距離之和為行高，而區(qū)域1，2，4距離之和為字體size，所以半行距也可以這么算：（行高-字體size）/2

    行高行距示意圖

    內(nèi)容區(qū)：底線和頂線包裹的區(qū)域
    行內(nèi)框：每個行內(nèi)元素會生成一個行內(nèi)框，行內(nèi)框是一個瀏覽器渲染模型中的一個概念，無法顯示出來，在沒有其他因素影響的時候（padding等），行內(nèi)框等于內(nèi)容區(qū)域，而設(shè)定行高時行內(nèi)框高度不變，半行距【（行高-字體size）/2】分別增加/減少到內(nèi)容區(qū)域的上下兩邊（深藍色區(qū)域）
    行框(line box)：行框是指本行的一個虛擬的矩形框，是瀏覽器渲染模式中的一個概念，并沒有實際顯示。行框高度等于本行內(nèi)所有元素中行內(nèi)框最大的值（以行高值最大的行內(nèi)框為基準，其他行內(nèi)框采用自己的對齊方式向基準對齊，最終計算行框的高度），當有多行內(nèi)容時，每行都會有自己的行框。
    參考下圖：
    內(nèi)容區(qū)、行內(nèi)框及行框

    而針對于說明3，可以理解為，行高雖然是可繼承的，但并不是簡單的copy父元素行高，繼承的是計算得來的值。
    例如代碼：

<div style="border:dashed 1px #0e0;line-height:150%;font-size:10px;">
                <p style="font-size:30px;">
                    1232<br/>
                </p>
            </div>

渲染結(jié)果如下：


行高的繼承說明

非但沒有變成150%，反而連100%都沒有，重疊了！這就是繼承計算的結(jié)果，如果父元素的line-height有單位（px、%）,那么繼承的值則是換算后的一個具體的px級別的值；上例p得到的是10px*150%=15px的行高，而P的字體大小為30px，所以發(fā)生了重疊。
而如果屬性值沒有單位，則瀏覽器會直接繼承這個“因子（數(shù)值）”，而非計算后的具體值，此時它的line-height會根據(jù)本身的font-size值重新計算得到新的line-height 值。所以在使用line-height時，除非你刻意否則盡量使用倍數(shù)設(shè)值。

參考文章：
CSS line-height 屬性

CSS行高——line-height

二、如何去查CSS屬性的兼容性？比如inline-block哪些瀏覽器支持？

利用網(wǎng)站：http://caniuse.com/
例如inline-block會得到以下瀏覽器及其版本的支持（圖例在右下角）

can i use

三、a 標簽的href, title, target 是什么？ title 和 alt有什么區(qū)別？如何新窗口打開鏈接?

a 標簽的href, title, target 是什么？

  • a標簽的定義與用法
    <a>標簽定義超鏈接，用于從一張頁面鏈接到另一張頁面。
    <a>元素最重要的屬性是 href 屬性，它指示鏈接的目標。
    在所有瀏覽器中，鏈接的默認外觀是：

    鏈接的默認外觀

  • 提示與注釋

  • 如果不使用 href 屬性，則不可以使用如下屬性：download, hreflang, media, rel, target 以及 type 屬性。

  • 被鏈接頁面通常顯示在當前瀏覽器窗口中，除非您規(guī)定了另一個目標（target 屬性）。

  • 請使用 CSS 來設(shè)置鏈接的樣式。

  • 關(guān)于href
    href 屬性的值可以是任何有效文檔的相對或絕對 URL，包括片段標識符和 JavaScript 代碼段。如果用戶選擇了 <a>標簽中的內(nèi)容，那么瀏覽器會嘗試檢索并顯示 href 屬性指定的 URL 所表示的文檔，或者執(zhí)行 JavaScript 表達式、方法和函數(shù)的列表。
    語法：
    <a href="*value*">
    以下是href屬性值：

    href屬性值

    以下是利用圖片作為鏈接的實例：

<a >
<img src="/i/w3school_logo_white.gif" />
</a>
  • 關(guān)于title
    title的屬性：
    使用 title 屬性，可以讓鼠標懸停在超鏈接上的時候，顯示該超鏈接的文字注釋。
    以下是實例：
    <a title = "百度的的中文站點">百度網(wǎng)站</a>
    如果希望注釋多行顯示，可以使用
    作為換行符。
中文站點">百度網(wǎng)站</a>```

- 關(guān)于target
**定義和用法：**
```<a> ```標簽的 target 屬性規(guī)定在何處打開鏈接文檔。
如果在一個``` <a> ```標簽內(nèi)包含一個 target 屬性，瀏覽器將會載入和顯示用這個標簽的 href 屬性命名的、名稱與這個目標吻合的框架或者窗口中的文檔。如果這個指定名稱或 id 的框架或者窗口不存在，瀏覽器將打開一個新的窗口，給這個窗口一個指定的標記，然后將新的文檔載入那個窗口。從此以后，超鏈接文檔就可以指向這個新的窗口。
**屬性值：**
![a標簽中的target屬性值](http://upload-images.jianshu.io/upload_images/2331515-805a729da1c3b08c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

####  title 和 alt有什么區(qū)別？
- 關(guān)于alt屬性
**定義和用法：**它規(guī)定在圖像無法顯示時的替代文本。
使用alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。這包括那些使用本來就不支持圖像顯示或者圖像顯示被關(guān)閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。
*如果你想使用額外的說明信息或者非本質(zhì)的信息請使用title屬性。*
- 關(guān)于```<a>標簽中```title屬性
**定義與用法：**
title屬性為設(shè)置該屬性的元素提供建議性的信息。
title屬性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有標簽。但是并不是必須的?？赡苓@正是為什么很多人不明白何時使用它。
title屬性有一個很好的用途，即為鏈接添加描述性文字，特別是當連接本身并不是十分清楚的表達了鏈接的目的。這樣就使得訪問者知道那些鏈接將會帶他們到什么地方，他們就不會加載一個可能完全不感興趣的頁面。另外一個潛在的應(yīng)用就是為圖像提供額外的說明信息，比如日期或者其他非本質(zhì)的信息。
- 關(guān)于alt屬性和title屬性的應(yīng)用范圍
 - alt屬性旨在描述圖片等
 - title屬性旨在為圖片等提供額外的說明信息

#### 如何新窗口打開鏈接?
利用屬性值"_blank"即可實現(xiàn)
以下為實例：

<a target="_blank">hunger</a>


**以下為練習(xí)：**
![about title and alt](http://upload-images.jianshu.io/upload_images/2331515-991cc1535d3c2ec3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**參考文章：**
[HTML``` <a> ```標簽](http://www.w3school.com.cn/tags/tag_a.asp)
[a標簽的title屬性](http://blog.csdn.net/tudas/article/details/6504494)
[HTML <a> 標簽的 target 屬性](http://www.w3school.com.cn/tags/att_a_target.asp)
[alt和title屬性的區(qū)別及應(yīng)用](http://www.yzznl.cn/archives/alt-and-title.html)

>四、display: none , visibility: hidden, opacity:0有什么作用？有什么區(qū)別？

- opacity=0
該元素隱藏起來了，但不會改變頁面布局，并且，如果該元素已經(jīng)綁定一些事件，如click事件，那么點擊該區(qū)域，也能觸發(fā)點擊事件的
- visibility=hidden
該元素隱藏起來了，但不會改變頁面布局，但是不會觸發(fā)該元素已經(jīng)綁定的事件
- display=none
把元素隱藏起來，并且會改變頁面布局，可以理解成在頁面中把該元素刪除掉一樣

>五、如何去除 a 鏈接的默認樣式？直接在 a 鏈接父容器添加顏色，能否繼承到當前 a 鏈接上？

#### 如何去除 a 鏈接的默認樣式？
可利用以下的代碼去掉下劃線及顏色
```a{
text-decoration: none;
color: red
}

以下為練習(xí)：

a鏈接練習(xí)

直接在 a 鏈接父容器添加顏色，能否繼承到當前 a 鏈接上？

根據(jù)上述練習(xí)得出，對a鏈接顏色的樣式設(shè)定必須單獨強調(diào)a，否則不會起作用

代碼

本教程版權(quán)歸本人和饑人谷所有，轉(zhuǎn)載須說明來源

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1. line-height有什么作用? line-height指定一行的行高,使用后會使文本在上下居中。 lin...
    小木子2016閱讀 454評論 0贊 0
  • 參考1.line-height12.line-height23.line-height34.line-height...
    鴻鵠飛天閱讀 1,073評論 0贊 0
  • 1.line-height有什么作用？ 所謂的行高，是指文本行基線之前的距離。在理解這句話之前先了解幾個基本知識：...
    饑人谷_任磊閱讀 554評論 0贊 1
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 14,199評論 1贊 92
  • 1.line-height有什么作用? line-height是行高的意思。具體指兩行文字基線之間的距離。line...
    墨月千樓閱讀 366評論 0贊 0

友情鏈接更多精彩內(nèi)容