html基礎(chǔ)：空標(biāo)簽

、空標(biāo)簽概念：

沒(méi)有與之對(duì)應(yīng)的結(jié)束標(biāo)簽的標(biāo)簽

2、常見(jiàn)的空標(biāo)簽：

<meta /> //元數(shù)據(jù)
<base /> //網(wǎng)頁(yè)的基礎(chǔ)鏈接
<link /> //引入外部鏈接
<br /> //換行
<hr /> //水平線(xiàn)
<img /> //插入圖片
<area /> //圖片map中的可點(diǎn)區(qū)域
<input /> //用于搜集用戶(hù)信息

3、注意事項(xiàng)：

雖然HTML中對(duì)空標(biāo)簽是否需要加結(jié)束符號(hào)“ / ”進(jìn)行強(qiáng)制規(guī)定，但是在XHTML（XML規(guī)范的HTML版本）或XML中，對(duì)空標(biāo)簽進(jìn)行強(qiáng)制要求，指出空標(biāo)簽必須使用結(jié)束標(biāo)志，大多數(shù)人推薦使用規(guī)范的編寫(xiě)格式，并且在未來(lái)將會(huì)對(duì)空標(biāo)簽的結(jié)束符號(hào)進(jìn)行強(qiáng)制要求。

在html中，在空標(biāo)簽上使用閉標(biāo)簽是無(wú)效的，例如：</br>。這樣的情況是無(wú)效的HTML。

標(biāo)

修飾標(biāo)簽的作用是什么？
修飾標(biāo)簽包含了哪些元素？
修飾標(biāo)簽常用的元素作用（重點(diǎn)）？

修飾標(biāo)簽的作用？

突出一篇文章的重點(diǎn)區(qū)域，快速修飾文本內(nèi)容的樣式，避免全篇文章都是白紙黑字，引起視覺(jué)疲勞。

修飾過(guò)后的文章

修飾標(biāo)簽的元素

斜體

作用：文字傾斜

標(biāo)簽：i、em

區(qū)別：em是會(huì)被搜索引擎收錄

<i>我是傾斜標(biāo)簽i</i>
<em>我是傾斜標(biāo)簽em</em>

傾斜效果

粗體

作用：文字加粗

標(biāo)簽：b、strong

區(qū)別：strong是會(huì)被搜索引擎收錄

<b>我是加粗標(biāo)簽b</b>
<strong>我是加粗標(biāo)簽strong</strong>

加粗效果

上下標(biāo)

作用：對(duì)文本進(jìn)行補(bǔ)充說(shuō)明

標(biāo)簽：sup上標(biāo)sub下標(biāo)

上下標(biāo)運(yùn)用

上下標(biāo)效果

劃線(xiàn)標(biāo)

作用：對(duì)文本增強(qiáng)注意

標(biāo)簽：ins下劃線(xiàn)del刪除線(xiàn)

劃線(xiàn)標(biāo)運(yùn)用

劃線(xiàn)標(biāo)效果

顯示標(biāo)

作用：對(duì)文本進(jìn)行高亮顯示

標(biāo)簽：mark

顯示標(biāo)運(yùn)用

顯示標(biāo)效果

縮小標(biāo)

作用：對(duì)文本進(jìn)行縮小顯示

標(biāo)簽：small

縮小標(biāo)運(yùn)用

思維導(dǎo)圖

修飾標(biāo)簽

更多前端教程，敬請(qǐng)關(guān)注微信公眾號(hào)：前端旺

用圖片區(qū)域鏈接的注意事項(xiàng)

1.圖片尺寸不能變

使用<area>標(biāo)簽定義圖片區(qū)域鏈接時(shí)的coords屬性值只能是數(shù)字！

這就意味著一旦改變使用<map><area/></map>定義區(qū)域鏈接的圖片尺寸發(fā)生改變，之前定義的區(qū)域也就不能覆蓋在正確的畫(huà)面位置了。

在網(wǎng)頁(yè)制作中，如果我們把<img/>標(biāo)簽的"width"或“height”設(shè)為百分?jǐn)?shù)，隨著瀏覽器視域范圍的改變，圖片區(qū)域鏈接將會(huì)發(fā)生錯(cuò)誤。

我們來(lái)演示一下，代碼如下：

<!DOCTYPE HTML>
    <html>
        <head>     
            <title>圖片區(qū)域鏈接</title>    
            <meta charset="utf-8">    
        </head>     
        <body>
            <div style="width:100%;">
            <img  src="img/image1.jpg" usemap="#map"/>
            <map name="map" id="map">
                <area shape="poly" coords="142,62,186,175,246,236,243,298,263,323,396,338,478,313,516,246,496,224,320,158,348,142,336,129,232,108" href="https://www.zhihu.com/question/284642168" / title="殲20氣動(dòng)外形分析"/>
            </map>
            </div>    
        </body>
    </html>

這時(shí)，圖片尺寸和區(qū)域鏈接是匹配的。

如果我們修改<img/>中的width屬性，情況就會(huì)發(fā)生變化，如下：

<img width="100%" src="img/image1.jpg" usemap="#map"/>

效果如圖：

圖片放大后，區(qū)域鏈接位置不再正確匹配。

如果同時(shí)修改<img/>以及外部的<div>的“width”，也會(huì)發(fā)生類(lèi)似情況，如下

<div style="width:25%;">
            <img width="100%" src="img/image1.jpg" usemap="#map"/>

效果如圖：

超出圖片尺寸范圍后，點(diǎn)擊時(shí)，區(qū)域鏈接的外邊框也不會(huì)顯示出來(lái)。

我們當(dāng)然不希望這種情況的發(fā)生，有解決辦法嗎？

當(dāng)然有，一種是“笨”方法，一種是“聰明”方法。

先說(shuō)“聰明”方法：就是使用JavaScript，設(shè)置觸發(fā)事件，調(diào)取視窗寬度，算出視窗高寬變化比例，然后為coords屬性值乘以這個(gè)比例，就可以實(shí)時(shí)隨圖片變化改變區(qū)域鏈接范圍了。不過(guò)目前我們還不能寫(xiě)出JavaScript腳本。

“笨”方法就是盡量不在代碼中改變圖片尺寸，而是針對(duì)頁(yè)面布局的尺寸去添加一張尺寸相符的圖片。

也就是直接改變圖片尺寸后替換原圖片，或輸出為一張新圖片在頁(yè)面中使用。

這就要介紹一下如何使用Gimp去改變圖片尺寸。

2.預(yù)先計(jì)算圖片尺寸的方法

在改變圖片尺寸之前要預(yù)先計(jì)算圖片恰當(dāng)?shù)某叽纭?/p>

例如我做了一個(gè)居中顯示的頁(yè)面，但是圖片尺寸太大，不能正常顯示，如圖：

正常的話(huà)我們會(huì)使用<img/>的width屬性來(lái)設(shè)置，但是因?yàn)橛袇^(qū)域鏈接，所以還是要修改圖片的真實(shí)尺寸。

這個(gè)頁(yè)面中內(nèi)容都是寫(xiě)在一個(gè)<div>中，它的寬度是600px，我們只要讓圖片的寬度等于600px就可以正常顯示了。

我使用Gimp修改長(zhǎng)寬后，輸出了一張叫做“image1.jpg”的圖片。

我們看下效果。如圖:

我們來(lái)看一下操作過(guò)程吧。

3.使用Gimp軟件修改圖片尺寸

第一步，打開(kāi)軟件，導(dǎo)入大尺寸圖片，如圖：

大家觀(guān)察一下F20.jpg尺寸。

第二步，在菜單欄中找到“圖像”按鈕，點(diǎn)擊后，找到“縮放圖像”，如圖:

第三步，修改圖像尺寸，首先確定等比例縮放是否激活。如圖：

紅框中的圖標(biāo)就是等比例鎖定的圖標(biāo)。

將“寬度”數(shù)值修改為600。然后，點(diǎn)擊紅框中的等比例圖標(biāo)。如圖：

變成這樣：如圖：

然后點(diǎn)擊“縮放”。如圖：

最后一步就是輸出為“image1.jpg”了。如圖：

export as就是“輸出為”的意思，點(diǎn)擊后選擇存儲(chǔ)路徑和格式，如圖：

這里我們選擇jpg，如圖

點(diǎn)擊導(dǎo)出后就可以了。

完整操作過(guò)程見(jiàn)視頻：

最后我們?cè)趆tml中修改<img/>中的路徑與名稱(chēng)就可以正常顯示了。

今天的內(nèi)容結(jié)束了。

使用碎片時(shí)間，學(xué)習(xí)完整知識(shí)！關(guān)注大魚(yú)師兄，一起精研技藝。

整合營(yíng)銷(xiāo)服務(wù)商

html基礎(chǔ)：空標(biāo)簽

修飾標(biāo)簽的作用？

修飾標(biāo)簽的元素

思維導(dǎo)圖

用圖片區(qū)域鏈接的注意事項(xiàng)

目錄

您的項(xiàng)目需求