HTML 基礎(chǔ)教程
- HTML 基礎(chǔ)教程
- HTML是什么
- HTML 常用編輯器
- HTML 基礎(chǔ)- 5個(gè)示例
- HTML 元素
- HTML 屬性
- HTML 標(biāo)題
- HTML 段落
- HTML 文本格式化
- HTML 鏈接
- HTML 錨點(diǎn)
- html 空格符
- HTML 頭部元素
- HTML CSS
- HTML 圖像
- HTML 表格
- HTML 列表
- HTML 區(qū)塊
- HTML 布局
- HTML 表單
- HTML 框架
- HTML 顏色
- HTML 顏色名
- HTML 顏色值
- HTML 腳本
- HTML 字符實(shí)體
- HTML URL
- HTML 速查列表
- HTML 總結(jié)
- XHTML 簡(jiǎn)介
- HTML 實(shí)例大全
HTML 媒體
HTML 參考手冊(cè)
- HTML 標(biāo)簽大全(按字母查找)
- HTML 標(biāo)簽大全（功能排序）
- HTML 全局屬性
- HTML 事件
- HTML 畫(huà)布
- HTML 音頻/視頻
- HTML 有效DOCTYPES
- HTML 顏色名
- HTML 拾色器
- HTML 顏色搭配
- HTML 字符集
- HTML ASCII 參考手冊(cè)
- HTML ISO-8859-1 參考手冊(cè)
- HTML 字符實(shí)體大全
- HTML URL 編碼參考手冊(cè)
- HTML 語(yǔ)言代碼參考手冊(cè)
- HTTP 狀態(tài)消息
- HTTP 方法 GET與POST
- 鍵盤常用快捷鍵
HTML5 基礎(chǔ)教程
- HTML5 教程
- HTML5 瀏覽器支持
- HTML5 新元素
- HTML5 MathML
- HTML5 Input 類型
- HTML5 表單元素
- HTML5 表單屬性
- HTML5 語(yǔ)義元素
- HTML 5 本地?cái)?shù)據(jù)庫(kù)
- HTML5 應(yīng)用程序緩存
- HTML5 WebSocket
- HTML(5) 代碼編寫規(guī)范
HTML5 API
HTML5 媒體
HTML 圖像
我們今天看到的豐富多彩的網(wǎng)頁(yè)，都是因?yàn)橛辛藞D像的作用。過(guò)去網(wǎng)絡(luò)中全部都是純文本的網(wǎng)頁(yè)，非常單調(diào)，就知道圖像在網(wǎng)頁(yè)設(shè)計(jì)中的重要性了。在html頁(yè)面中可以插入圖像，網(wǎng)頁(yè)常用的圖像格式有jpg、png、gif等
圖像示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基礎(chǔ)教程(cainiaoplus.com)</title> </head> <body> <h2>default picture</h2> <img border="0" src="/run/html/default.jpg" alt="default" width="304" height="228"> </body> </html>測(cè)試看看 ?/?
在線示例
插入圖像
本示例演示如何在網(wǎng)頁(yè)中顯示圖像。
從不同的位置插入圖片
本示例演示如何將其他文件夾或服務(wù)器的圖片顯示到網(wǎng)頁(yè)中。
（可以在本頁(yè)底端找到更多示例。）
HTML 圖像- 圖像標(biāo)簽（ <img>）和源屬性（Src）
在 HTML 中，圖像由<img> 標(biāo)簽定義。
<img> 是空標(biāo)簽，意思是說(shuō)，它只包含屬性，并且沒(méi)有閉合標(biāo)簽。
要在頁(yè)面上顯示圖像，你需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。
定義圖像的語(yǔ)法是：
<img src="url" alt="some_text">
URL 指存儲(chǔ)圖像的位置。如果名為 "default.jpg" 的圖像位于 www.soo66.com 的 images 目錄中，那么其 URL 為 /run/html/default.jpg。
瀏覽器將圖像顯示在文檔中圖像標(biāo)簽出現(xiàn)的地方。如果你將圖像標(biāo)簽置于兩個(gè)段落之間，那么瀏覽器會(huì)首先顯示第一個(gè)段落，然后顯示圖片，最后顯示第二段。
HTML 圖像- Alt屬性
alt 屬性用來(lái)為圖像定義一串預(yù)備的可替換的文本。
替換文本屬性的值是用戶定義的。
<img src="boat.gif" alt="Big Boat">
在瀏覽器無(wú)法載入圖像時(shí)，替換文本屬性告訴讀者她們失去的信息。此時(shí)，瀏覽器將顯示這個(gè)替代性的文本而不是圖像。為頁(yè)面上的圖像都加上替換文本屬性是個(gè)好習(xí)慣，這樣有助于更好的顯示信息，并且對(duì)于那些使用純文本瀏覽器的人來(lái)說(shuō)是非常有用的。
HTML 圖像- 設(shè)置圖像的高度與寬度
height（高度） 與 width（寬度）屬性用于設(shè)置圖像的高度與寬度。
屬性值默認(rèn)單位為像素:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
提示: 指定圖像的高度和寬度是一個(gè)很好的習(xí)慣。如果圖像指定了高度寬度，頁(yè)面加載時(shí)就會(huì)保留指定的尺寸。如果沒(méi)有指定圖片的大小，加載頁(yè)面時(shí)有可能會(huì)破壞HTML頁(yè)面的整體布局。
基本的注意事項(xiàng) - 有用的提示：
注意: 假如某個(gè) HTML 文件包含十個(gè)圖像，那么為了正確顯示這個(gè)頁(yè)面，需要加載 11 個(gè)文件。加載圖片是需要時(shí)間的，所以我們的建議是：慎用圖片。
注意: 加載頁(yè)面時(shí)，要注意插入頁(yè)面圖像的路徑，如果不能正確設(shè)置圖像的位置，瀏覽器無(wú)法加載圖片，圖像標(biāo)簽就會(huì)顯示一個(gè)破碎的圖片。
更多示例
排列圖片
本示例演示如何在文字中排列圖像。
浮動(dòng)圖像
本示例演示如何使圖片浮動(dòng)至段落的左邊或右邊。
設(shè)置圖像鏈接
本示例演示如何將圖像作為一個(gè)鏈接使用。
創(chuàng)建圖像映射
本示例顯示如何創(chuàng)建帶有可供點(diǎn)擊區(qū)域的圖像地圖。其中的每個(gè)區(qū)域都是一個(gè)超級(jí)鏈接。
HTML 圖像標(biāo)簽
| 標(biāo)簽 | 描述 |
| <img> | 定義圖像 |
| <map> | 定義圖像地圖 |
| <area> | 定義圖像地圖中的可點(diǎn)擊區(qū)域 |