html基礎(chǔ)：空標簽

、空標簽概念：

沒有與之對應(yīng)的結(jié)束標簽的標簽

2、常見的空標簽：

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

3、注意事項：

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

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

標

修飾標簽的作用是什么？
修飾標簽包含了哪些元素？
修飾標簽常用的元素作用（重點）？

修飾標簽的作用？

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

修飾過后的文章

修飾標簽的元素

斜體

作用：文字傾斜

標簽：i、em

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

<i>我是傾斜標簽i</i>
<em>我是傾斜標簽em</em>

傾斜效果

粗體

作用：文字加粗

標簽：b、strong

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

<b>我是加粗標簽b</b>
<strong>我是加粗標簽strong</strong>

加粗效果

上下標

作用：對文本進行補充說明

標簽：sup上標sub下標

上下標運用

上下標效果

劃線標

作用：對文本增強注意

標簽：ins下劃線del刪除線

劃線標運用

劃線標效果

顯示標

作用：對文本進行高亮顯示

標簽：mark

顯示標運用

顯示標效果

縮小標

作用：對文本進行縮小顯示

標簽：small

縮小標運用

思維導(dǎo)圖

修飾標簽

更多前端教程，敬請關(guān)注微信公眾號：前端旺

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

1.圖片尺寸不能變

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

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

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

我們來演示一下，代碼如下：

<!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氣動外形分析"/>
            </map>
            </div>    
        </body>
    </html>

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

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

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

效果如圖：

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

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

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

效果如圖：

超出圖片尺寸范圍后，點擊時，區(qū)域鏈接的外邊框也不會顯示出來。

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

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

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

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

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

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

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

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

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

正常的話我們會使用<img/>的width屬性來設(shè)置，但是因為有區(qū)域鏈接，所以還是要修改圖片的真實尺寸。

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

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

我們看下效果。如圖:

我們來看一下操作過程吧。

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

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

大家觀察一下F20.jpg尺寸。

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

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

紅框中的圖標就是等比例鎖定的圖標。

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

變成這樣：如圖：

然后點擊“縮放”。如圖：

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

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

這里我們選擇jpg，如圖

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

完整操作過程見視頻：

最后我們在html中修改<img/>中的路徑與名稱就可以正常顯示了。

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

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

整合營銷服務(wù)商

html基礎(chǔ)：空標簽

修飾標簽的作用？

修飾標簽的元素

思維導(dǎo)圖

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

目錄

您的項目需求