HTML 簡單的&lt;map&gt; 標簽

例

帶有可點擊區(qū)域的圖像映射：

</map>

瀏覽器支持

目前大多數(shù)瀏覽器支持 <map>標簽。

標簽定義及使用說明

<map> 標簽用于客戶端圖像映射。圖像映射指帶有可點擊區(qū)域的一幅圖像。

<img>中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性（取決于瀏覽器），所以我們應同時向 <map> 添加 id 和 name 屬性。

area 元素永遠嵌套在 map 元素內部。area 元素可定義圖像映射中的區(qū)域。

HTML 4.01 與 HTML5之間的差異

注意: 在 HTML5 中, 如果 id 屬性在<map> 標簽中指定, 則你必須同樣指定 name 屬性。

HTML 與 XHTML 之間的差異

在 XHTML 中，name 屬性已經廢棄，使用 id 屬性替換它。

屬性

屬性	值	描述
name	mapname	必需。為 image-map 規(guī)定的名稱。

全局屬性

<map> 標簽支持全局屬性，查看完整屬性表 HTML全局屬性。

事件屬性

<map> 標簽支持所有 HTML事件屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

們在后臺編輯器添加內容的時候，需要上傳多張圖片，為了美化這些圖片顯示效果，想起了給圖片增加陰影和圓角，由于圖片是在后臺編輯上傳的，沒辦法直接定義樣式，后面想到兩種解決方案，分享一下。

一種解決方案就是通過寫js或jquery代碼，然后配合著正側表達式，用正側表達式查找你內容里的Img圖片，再用jquery或js代碼給img添加css代碼即可，具體的代碼如下：

        <script type="text/javascript">
            function imgTagAddStyle(htmlstr){
		//正則匹配所有img標簽
		//var regex0 = new RegExp("(i?)(\<img)([^\>]+\>)","gmi");
		//正則匹配不含style="" 或 style='' 的img標簽
		var regex1 = new RegExp("(i?)(\<img)(?!(.*?style=['\"](.*)['\"])[^\>]+\>)","gmi");
		//給不含style="" 或 style='' 的img標簽加上style=""
		htmlstr = htmlstr.replace(regex1, "$2 style=\"\"$3");
		//console.log("增加style=\"\"后的html字符串："+htmlstr);
		//正則匹配含有style的img標簽
		var regex2 = new RegExp("(i?)(\<img.*?style=['\"])([^\>]+\>)","gmi");
		//在img標簽的style里面增加css樣式(這里增加的樣式：display:block;max-width:100%;
          //height:auto;border:5px solid red;)
		htmlstr = htmlstr.replace(regex2, "$2display:block;max-width:100%;
                              height:auto;border:5px solid red;$3");
		//console.log("在img標簽的style里面增加樣式后的html字符串："+htmlstr);
		return htmlstr;
	    }
        var str0 = "<div style=\"background-color:green;width:500px;\">
        <p>are you ok?</p><img style=\"border:1px solid #ff0000;\" 
src=\"https://iph.href.lu/100x100\" alt=\"\" />hello<span>the
          <IMG src='https://iph.href.lu/100x100'></span><span style=\"font-size:20pt;\">
        我是大神</span></div>";
	console.log("原始html字符串："+str0);
	var s = imgTagAddStyle(str0);
	document.getElementById("demo").innerHTML=s;

另外一種解決方案是，直接使用CSS代碼全局樣式，具體方法是，先給外部一個class標簽，再給這個標簽下的img 全局定義一個樣式，也能解決，這種方案更簡單，更好用，具體的代碼如下：

/*內容圖片加陰影*/
.article_content img{ border-radius: 5px 5px 5px 5px;object-fit: contain;box-shadow: 
#84A1A8 0px 10px 15px;}

border-radius是給img圖片加圓角，boject-fit:對圖片進行剪切，保留原始比例,box-shadow對圖片增加陰影。

具體的效果如下圖：

歡迎關注云碼素材，交流分享! 云碼素材原創(chuàng)作品，更多精品資源下載，技術分享請關注，私信云碼素材！

、目錄

HTML 基本概念
HTML 基本結構
HTML 基本標簽

二、HTML基本概念

2.1、什么是 HTML

超文本標記語言（Hyper Text Markup Language）
描述網(wǎng)頁的語言
傳輸最簡單的文本內容
可以表達文字內容之外的語言——HTML1.0

2.2、HTML的發(fā)展

html1.0—-xhtml1.0( 過渡 )—-xhtml2.0( 放棄 )——html5

三、HTML基本結構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

四、HTML基本標簽

4.1、標簽和屬性

雙標簽：<標簽名稱></標簽名稱>
單標簽：<標簽名 />

4.2、標簽的屬性

基本格式：<標簽名屬性1=“值1” 屬性2=“值2”></標簽名>

標簽可以擁有多個屬性
屬性必須寫在開始標簽中，位于標簽名后面
屬性之間不區(qū)分順序
標簽與屬性之間、屬性與屬性之間用空格隔開
每個屬性都有默認值，省略屬性則表示使用默認值

4.2、HTML全局屬性

class：規(guī)定元素的類名
id：規(guī)定元素唯一的id
lang：設置元素中內容的語言代碼
style：規(guī)定元素的行內樣式
title：規(guī)定元素的額外信息

五、HTML事件

5.1、HTML事件—窗口事件

使用HTML事件觸發(fā)瀏覽器中的行為，比如啟動某一段JavaScript
使用于body標簽中

onblur：當窗口失去焦點時運行腳本
onfocus：當窗口獲得焦點時運行腳本
onload：當加載文檔時運行腳本

5.2、HTML事件—表單事件

form

onblur：當窗口失去焦點時運行腳本
onchange：當元素改變時運行腳本
onfocus：當窗口獲得焦點時運行腳本
onreset：當表單重置時運行腳本，HTML5不支持
onselect：當選取元素時運行腳本
onsubmit：當提交表單時運行腳本

5.3、HTML事件—鍵盤事件

鍵盤事件

onkeydown：當按下鍵時運行腳本
onkeypress：當按下并松開鍵時運行腳本
onkeyup：當松開鍵時運行腳本

5.4、HTML事件—鼠標事件

鼠標事件

onclick：當單擊鼠標時運行腳本
ondblclick：當雙擊鼠標時運行腳本
onmousedown：當按下鼠標時運行腳本
onmousemove：當鼠標指針移動時運行腳本
onmouseout：當鼠標指針移出元素時運行腳本
onmouseover：當鼠標指針移至元素之上時運行腳本
onmouseup：當松開鼠標按鈕時運行腳本

5.5、HTML事件—多媒體事件

多媒體事件

onabort：當發(fā)生中止事件時運行腳本

六、標簽

6.1、注釋標簽

標簽： < !-- 注釋內容 -- >
作用：在源文檔中插入注釋。注釋不會在瀏覽器中顯示

6.2、文檔標題標簽

標簽：
作用：

定義瀏覽器工具欄中的標題
提供頁面被收藏時的標題
顯示在搜索引擎中顯示的頁面標題

6.3、標題標簽

標簽：
—
作用：

用來定義HTML的標題
用例定義最高等級的標題
用例定義最低等級的標題

屬性：全局屬性、事件屬性

6.4、段落標簽

標簽：
作用：定義段落
屬性：全局屬性，事件屬性

6.5、容器標簽1

標簽：
作用：對行內元素進行組合，提供了一種將文本或文檔的一部分獨立出來的方式
屬性：全局屬性、事件屬性

6.7、容器標簽2

標簽：
作用：

定義了HTML文檔中一個分隔區(qū)塊或一個區(qū)域部分
經常與CSS一起使用，用于定義網(wǎng)頁布局

屬性：全局屬性、事件屬性

6.8、圖像標簽

標簽：
作用：定義HTML頁面中的圖像
屬性：

src：定義顯示圖像的URL(必選)
alt：定義圖像的替代文本(必選)
title：鼠標懸停圖像時顯示的文本
width：圖像的寬度
height：圖像的高度
border：設置圖像邊框的寬度

6.9、超鏈接標簽

標簽：
定義超鏈接，從一個頁面鏈接到另一個頁面
屬性：全局屬性、事件屬性

href：規(guī)定鏈接的目標URL

6.10、列表標簽

標簽：

<ul>
<li></li>
<li></li>
</ul>

作用：

定義無序列表
* <ul>與<li>一起使用，創(chuàng)建無序列表

屬性：全局屬性、事件屬性

6.11、列表標簽 - 有序列表

標簽：<ol><li>...</li><li>...</li></ol>
作用：

定義了一個有序列表，列表排序以數(shù)字來顯示
使用
標簽來定義列表選項

屬性：全局屬性、事件屬性

5.12、表格標簽

標簽：

表格：<table></table>
行：<tr></tr>
單元格：<td></td>

作用：定義表格
屬性：全局屬性、事件屬性

border：定義表格是否有邊框

6.13、表單域

標簽：<form></form>
創(chuàng)建用戶輸入的HTML表單
屬性：全局屬性、事件屬性

action：指定接收并處理表單信息的服務器URL地址
method：表單數(shù)據(jù)提交的方式
name：指定表單的名稱

6.14、表單標簽

標簽：
作用：定義了用戶可以在其中輸入的字段，輸入字段可以通過多種方式改變，取決于type的屬性
屬性、全局屬性、事件屬性

type：規(guī)定要顯示input標簽的元素的類型

text：單行文本（不可換行）
password：密碼輸入框
radio：單選框（配合name可以實現(xiàn)單選效果）
checkbox：復選框
button：普通按鈕
submit：提交按鈕
reset：重置按鈕
image：圖像形式的提交按鈕
file：文件域，點擊之后打開文件選擇器

name：控件名稱，name相同則表示為同一組數(shù)據(jù)
value：指定input元素的值
size：顯示大小
checked：是否被選中
maxlength：控制輸入的最大字符長度

6.15、文本標簽

標簽：
定義一個多行的文本輸入控件
屬性：全局屬性、事件屬性

cols：規(guī)定文本區(qū)域內可見的寬度
disabled：規(guī)定禁用文本區(qū)域
name：規(guī)定文本區(qū)域的名稱
readonly：規(guī)定文本區(qū)域為只讀
rows：規(guī)定文本區(qū)域內可見的行
placeholder：規(guī)定一個簡短的提示，描述文本區(qū)域內期望的輸入值

6.16、下拉菜單

標簽：…
作用：

用來創(chuàng)建下拉列表
中的標簽定義了列表中的可用選項

屬性：全局屬性、事件屬性

isabled：當屬性為true時，會禁用下拉列表
multiple：當屬性為true時，可選擇多個選項
name：定義下拉列表的名稱
size：規(guī)定下拉列表中可見選項的數(shù)目

霍格沃茲的測試管理班是專門面向測試與質量管理人員的一門課程，通過提升從業(yè)人員的團隊管理、項目管理、績效管理、溝通管理等方面的能力，使測試管理人員可以更好的帶領團隊、項目以及公司獲得更快的成長。提供 1v1 私教指導，BAT 級別的測試管理大咖量身打造職業(yè)規(guī)劃。

在線咨詢

上一篇：HTML 表格
下一篇：HTML+CSS web前端開發(fā) 文本物理屬性demo應用加粗行間距

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

HTML 簡單的&amp;lt;map&amp;gt; 標簽

、目錄