前端入門-html 中如何使用圖片

維網(wǎng)和其它網(wǎng)絡(luò)類型最大的區(qū)別就是它在網(wǎng)頁(yè)上可呈現(xiàn)豐富多彩的色彩和圖像，還可以播放音頻、視頻，及把圖像作為鏈接使用。

一、圖片格式

網(wǎng)絡(luò)上流行的圖片格式主要有jpg、jpeg、png、gif等，以下是這幾種格式的介紹。

1、gif格式

gif采用LZW壓縮，是以壓縮相同顏色色塊來減少圖像大小。由于LZW壓縮不會(huì)造成任何品質(zhì)的損失，且壓縮率高，支持動(dòng)畫效果，很適合互聯(lián)網(wǎng)平臺(tái)，但是它只支持256種顏色。

2、jpg或jpeg格式

以JPEG有損壓縮圖片，通常用來保存超過256色的圖片格式。JPEG壓縮過程會(huì)對(duì)一些圖像數(shù)據(jù)造成損失，這部分損失不影響圖片顯示，一般人眼是看不出來差異的。損失數(shù)據(jù)越多，圖片就越不清晰。

3、png格式

png是一種非破壞性的網(wǎng)頁(yè)圖像文件格式，它以最小的方式壓縮圖片且不造成圖片數(shù)據(jù)損失。它不僅支持像gif大部分優(yōu)點(diǎn)，還支持48 bit的色彩，跨平臺(tái)的圖像亮度控制，更多層的透明度設(shè)置。

二、使用圖片

網(wǎng)頁(yè)中通過<img>標(biāo)簽插入圖片，語(yǔ)法如下：

<img src="圖片路徑" alt="替換文本" />

具體示例：

<!DOCTYPE HTML>
<html>
<body>
<p>
一幅圖像：
<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>
<p>
一幅動(dòng)畫圖像：
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>
<p>請(qǐng)注意，插入動(dòng)畫圖像的語(yǔ)法與插入普通圖像的語(yǔ)法沒有區(qū)別。</p>
</body>
</html>

效果如下：

替換文本屬性（Alt）

alt 屬性用來為圖像定義一串預(yù)備的可替換的文本。

<img src="boat.gif" alt="Big Boat">

當(dāng)瀏覽器無法載入圖像時(shí)，替換文本屬性可告訴讀者他們失去的信息。此時(shí)，瀏覽器將顯示這個(gè)替代性的文本而不是圖像。為頁(yè)面上的圖像都加上替換文本屬性是個(gè)好習(xí)慣，這樣有助于更好地顯示信息，并且對(duì)于那些使用純文本瀏覽器的人來說是非常有用的。

圖像寬度和高度屬性

如下代碼，在網(wǎng)頁(yè)中插入一個(gè)寬度和高度都是300像素的圖片。

<img src="/i/ct_netscape.jpg" width="300px" height="300px" />

圖片超鏈接

如下代碼，在網(wǎng)頁(yè)中對(duì)一個(gè)圖片進(jìn)行超鏈接設(shè)置，點(diǎn)擊這張圖片就會(huì)跳轉(zhuǎn)到其它頁(yè)面。

<a href="頁(yè)面路徑"><img src="/i/ct_netscape.jpg" /></a>

創(chuàng)建圖像熱區(qū)鏈接

除了對(duì)整個(gè)圖片進(jìn)行超鏈接設(shè)置外，還可以將圖像劃分成不同區(qū)域進(jìn)行鏈接設(shè)置，比如一張地圖中給每個(gè)省份圖形進(jìn)行超鏈接。

圖像熱區(qū)鏈接，使用usemap 屬性通過#name指定到名叫name的map元素上，map定義了每個(gè)熱區(qū)點(diǎn)擊區(qū)域形狀、大小、坐標(biāo)等。
area標(biāo)簽的 shape 屬性有三種，rect 方形，circle 圓形，poly 多邊形。coords 屬性定義坐標(biāo)點(diǎn)位置，相對(duì)于圖片左上角位置。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
<p>點(diǎn)擊太陽(yáng)或其他行星，注意變化：</p>
<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
  <area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
  <area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>
</body>
</html>

效果可參考 https://www.w3cschool.cn/html5/html5-img.html 這里。

可以看到鼠標(biāo)在圖片上點(diǎn)擊小行星會(huì)打開對(duì)應(yīng)的圖片。

到此網(wǎng)頁(yè)中使用圖片已經(jīng)大體介紹了，自己親手寫下，會(huì)加深印象，感謝關(guān)注。

上篇：前端入門——html 超鏈接

下篇：前端入門——html 如何在網(wǎng)頁(yè)中使用視頻音頻

TML的入門

1. HTML的代碼文件

（1）打開Hbuilder開發(fā)工具，新建項(xiàng)目，點(diǎn)擊右鍵新建一個(gè)HTML文檔。

（2）在文檔中寫HTML代碼

<!DOCTYPE html>

<html>

<head>

</head>

<body>

這是產(chǎn)品頁(yè)面

</body>

</html>

溫馨提示：

常用的快捷鍵：

Ctrl+s:保存

ctrl+c:復(fù)制

ctrl+x：剪切

ctrl+v：粘貼

2. HTML的基本結(jié)構(gòu)

對(duì)于HTML文件的后綴名一般為“html”或“htm”

2.1HTML的標(biāo)簽格式

（1）什么是HTML標(biāo)簽？

HTML標(biāo)簽是有開始標(biāo)簽和結(jié)束標(biāo)簽組成

開始標(biāo)簽：是被尖括號(hào)包圍的元素名。

結(jié)束標(biāo)簽：是被尖括號(hào)包圍的斜杠和元素名

<元素>內(nèi)容 </元素>

例如：<b>好好學(xué)習(xí)天天向上</b>

注意：有些HTML標(biāo)簽是沒有結(jié)束標(biāo)簽的, <hr/>

(2)單標(biāo)簽和雙標(biāo)簽

雙標(biāo)簽：例如：<b></b>

單標(biāo)簽：<hr/> <br/>

(3) 標(biāo)簽的屬性

我是一個(gè)標(biāo)題標(biāo)簽

</h1>

3. HTML基本結(jié)構(gòu)的認(rèn)識(shí)

<!DOCTYPE html>

<html>

<head>

<!--

meta：提供網(wǎng)頁(yè)的相關(guān)信息，有利于搜索引擎收錄

charset="UTF-8"：設(shè)置網(wǎng)頁(yè)編碼方式為utf-8

name="Keywords" ：設(shè)置網(wǎng)頁(yè)關(guān)鍵字

name="viewport": 設(shè)置網(wǎng)頁(yè)視窗大小

-->

</head>

<body>

<!--

<body></body>：網(wǎng)頁(yè)的主體內(nèi)容，用戶呈現(xiàn)的內(nèi)容，比如文字，圖片，鏈接，視頻……

-->

</body>

</html>

4. HTML的注釋

5. HTML的編碼問題

常見編碼個(gè)格式：

UTF-8:國(guó)際通用的編碼格式

GBK/GB2312:中文編碼字符

HTML的編碼：<meta charset="UTF-8">

6. HTML規(guī)范

（1）html標(biāo)簽都是有尖括號(hào)包圍的標(biāo)簽，比如<b>

（2）標(biāo)簽通常是成對(duì)存在，<b></b>,<h1></h1>

（3）HTML不區(qū)分大小寫，我們建議小寫。

（4）HTML可以嵌套，但是允許交叉嵌套

正確寫法：<b> <h1>我很粗</h1> </b>

錯(cuò)誤寫法：

~~<b> <h1>我很粗 </b></h1>~~

TML的作用

HTML是用來開發(fā)網(wǎng)頁(yè)的，它是開發(fā)網(wǎng)頁(yè)的語(yǔ)言

HTML的定義

全稱HyperText Mark-up Language，超文本標(biāo)記語(yǔ)言

標(biāo)記就是標(biāo)簽

<標(biāo)簽名稱></標(biāo)簽名稱> 比如 <html></html> <h1></h1>等，標(biāo)簽大多數(shù)都是成對(duì)出現(xiàn)的。

超文本兩層含義：

因?yàn)榫W(wǎng)頁(yè)中還可以有圖片、視頻、音頻等內(nèi)容（超越文本限制）
它還可以在網(wǎng)頁(yè)中跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)，與世界各地主機(jī)的網(wǎng)頁(yè)鏈接（超鏈接文本）

HTML的基本結(jié)構(gòu)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>網(wǎng)頁(yè)標(biāo)題</title>
    </head>
    <body>
        網(wǎng)頁(yè)顯示內(nèi)容
    </body>
</html>

第一行<!DOCTYPE html>是文檔聲明
用來指定頁(yè)面所使用的html的版本, 這里聲明的是一個(gè)html5的文檔
<html>...</html>標(biāo)簽是開發(fā)人員在告訴瀏覽器
整個(gè)網(wǎng)頁(yè)是從<html>這里開始的，到</html>結(jié)束
也就是html文檔的開始和結(jié)束標(biāo)簽
<head>...</head>標(biāo)簽用于定義文檔的頭部
是負(fù)責(zé)對(duì)網(wǎng)頁(yè)進(jìn)行設(shè)置標(biāo)題、編碼格式以及引入css和js文件的
<body>...</body>標(biāo)簽是編寫網(wǎng)頁(yè)上顯示的內(nèi)容

網(wǎng)頁(yè)文件的后綴是.html, 一個(gè)html文件就是一個(gè)網(wǎng)頁(yè)，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會(huì)按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁(yè)

VS Code 安裝

VS Code全拼是 Visual Studio Code 是由微軟研發(fā)的一款免費(fèi)、開源的跨平臺(tái)代碼編輯器
目前是前端(網(wǎng)頁(yè))開發(fā)使用最多的一款軟件開發(fā)工具

下載網(wǎng)址: https://code.visualstudio.com/Download

選擇對(duì)應(yīng)的安裝包進(jìn)行下載:

安裝一切默認(rèn)

VS Code 的插件安裝

Chinese(Simplified) Language Pack for VS Code 中文漢化包
open in browser 右擊在瀏覽器打開html

常用的HTML標(biāo)簽

1 標(biāo)簽不區(qū)分大小寫，但是推薦使用小寫
2 根據(jù)標(biāo)簽的書寫形式，標(biāo)簽分為雙標(biāo)簽(閉合標(biāo)簽)和單標(biāo)簽(空標(biāo)簽) 2.1 雙標(biāo)簽是指由開始標(biāo)簽和結(jié)束標(biāo)簽組成的一對(duì)標(biāo)簽，這種標(biāo)簽允許嵌套和承載內(nèi)容，比如: div標(biāo)簽 2.2 單標(biāo)簽是一個(gè)標(biāo)簽組成，沒有標(biāo)簽內(nèi)容，比如: img標(biāo)簽

標(biāo)簽的使用形式

成對(duì)出現(xiàn)的標(biāo)簽
標(biāo)簽的嵌套
單個(gè)出現(xiàn)的標(biāo)簽
帶屬性的標(biāo)簽

列表標(biāo)簽

無序列表標(biāo)簽(ul標(biāo)簽)
有序列表標(biāo)簽(ol標(biāo)簽)

網(wǎng)頁(yè)效果

表格標(biāo)簽

<table>標(biāo)簽：表示一個(gè)表格
<tr>標(biāo)簽：表示表格中的一行
<td>標(biāo)簽：表示表格中的列
<th>標(biāo)簽：表示表格中的表頭

屬性設(shè)置
border: 1px solid black:設(shè)置邊框和顏色
border-collapse: collapse:設(shè)置邊框合并

網(wǎng)頁(yè)效果

表單標(biāo)簽

表單用于搜集不同類型的用戶輸入的數(shù)據(jù)，然后可以把用戶數(shù)據(jù)提交到web服務(wù)器

<form>標(biāo)簽表示表單標(biāo)簽，定義整體的表單區(qū)域

一個(gè)表單中有很多信息組成,比如姓名,愛好,地址等,這些內(nèi)容有很多其他標(biāo)簽來承載

這些標(biāo)簽稱為表單元素標(biāo)簽

網(wǎng)頁(yè)效果

表單提交

表單用于搜集不同類型的用戶輸入的數(shù)據(jù)，然后可以把用戶數(shù)據(jù)提交到web服務(wù)器

action屬性設(shè)置表單數(shù)據(jù)提交地址
method屬性設(shè)置表單提交的方式，一般有“GET”方式和“POST”方式, 不區(qū)分大小寫

兩種方式的區(qū)別:

“GET”方式 : 沒有請(qǐng)求體
“POST”方式 : 有請(qǐng)求體

表單元素屬性設(shè)置

name: 表單元素的名稱，用于作為提交表單數(shù)據(jù)時(shí)的參數(shù)名
value: 表單元素的值，用于作為提交表單數(shù)據(jù)時(shí)參數(shù)名所對(duì)應(yīng)的值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

<form action="http://192.168.1.106:8080" method="POST">
<label>姓名:</label>
<input type="text" name="username" >
<br>
<label>密碼:</label>
<input type="password" name="password">
<br>
<label>性別:</label>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br>
<label>愛好:</label>
<input type="checkbox" name="like" value="睡覺">睡覺
<input type="checkbox" name="like" value="吃飯">吃飯
<input type="checkbox" name="like" value="打豆豆">打豆豆
<br>
<label>照片:</label>
<input type="file" name="pic">
<br>
<label>個(gè)人描述:</label>
<textarea name="desc"></textarea>
<br>
<label>地址:</label>
<select name="addr">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">廣州</option>
<option value="4">深圳</option>
</select>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按鈕">
</form>
</body>
</html>

點(diǎn)擊提交：

可以看到服務(wù)器收到了請(qǐng)求報(bào)文。

在線咨詢

上一篇：自己總結(jié)下web移動(dòng)端圖片垂直居中的方法
下一篇：Web應(yīng)用的TWAIN掃描識(shí)別工具Dynamic Web TWAIN新增組件完善圖像的處理

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

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

前端入門-html 中如何使用圖片

一、圖片格式

二、使用圖片

創(chuàng)建圖像熱區(qū)鏈接

TML的入門

TML的作用

HTML的定義

HTML的基本結(jié)構(gòu)

VS Code 安裝

VS Code 的插件安裝

常用的HTML標(biāo)簽

表單提交

您的項(xiàng)目需求