整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
、新建項(xiàng)目
1、新建===web項(xiàng)目===輸入項(xiàng)目名稱====完成
二、新建html文件
在新建項(xiàng)目中新建html模板
輸入文件名稱：
三、認(rèn)識(shí)基本格式
聯(lián)想出基本格式：
四、編輯html文件
運(yùn)行html，選擇瀏覽器
五、html常用的快捷鍵
（1）ctrl+n+w web項(xiàng)目創(chuàng)建
（2）ctrl+n+h html文檔創(chuàng)建
（3）ctrl+s 保存html頁(yè)面（頁(yè)面上如果未保存會(huì)顯示*號(hào)）
（4）ctrl+r html運(yùn)行
（5）ctrl+z 撤回
（6）！+tab鍵 聯(lián)想基本格式
（7）ctrl+/ 注釋和取消注釋
（8）ctrl+鼠標(biāo)滾輪， 字體方大和縮小
六、認(rèn)識(shí)標(biāo)簽
（1）H標(biāo)簽（標(biāo)題標(biāo)簽）
（2）p標(biāo)簽 （段落標(biāo)簽）
（3）img 標(biāo)簽（圖片標(biāo)簽）
兩種：第一種widows上傳圖片，第二種：網(wǎng)上圖片鏈接
第一種
img中顯示圖片
img中引入圖片
第二種：網(wǎng)上圖片的鏈接：
（4） 標(biāo)簽（空格）
（5）em 標(biāo)簽表示斜體
（6）i 標(biāo)簽表示斜體
（7）br 表示換行
（8）b 標(biāo)簽表示加粗
（9） strong 標(biāo)簽表示加粗
（10）s 標(biāo)簽（刪除線）
（11）u 標(biāo)簽 （下劃線）
（12）font 顏色
（13）sub下標(biāo)
（14）sup上標(biāo)
多朋友想學(xué)一下網(wǎng)頁(yè)制作，上網(wǎng)一看，只要涉及到網(wǎng)頁(yè)制作，都離不開HTML這個(gè)詞語(yǔ)，HTML是HyperText Markup Language的簡(jiǎn)稱，想學(xué)習(xí)HTML語(yǔ)言，先得了解一些基本知識(shí)，今天這邊內(nèi)容可以作為學(xué)習(xí)HTML的菜鳥教程第一課。
HTML是什么？
一般我們說HTML是指超文本標(biāo)記語(yǔ)言，英文名稱為HyperText Markup Language，簡(jiǎn)稱HTML，它是目前互聯(lián)網(wǎng)上應(yīng)用最廣泛的語(yǔ)言。
如何查看HTML？
拿最常見的網(wǎng)頁(yè)為例，如果用大家熟悉的IE瀏覽器的話，直接在網(wǎng)頁(yè)上點(diǎn)右鍵，選擇“查看源”即可查看當(dāng)前網(wǎng)頁(yè)的HTML源碼；如果是其他瀏覽器的話，多數(shù)情況下點(diǎn)擊右鍵，選擇“查看源碼”或者類似“查看網(wǎng)頁(yè)源代碼”這樣的選項(xiàng)即可查看。
當(dāng)然也可以通過專業(yè)的網(wǎng)頁(yè)制作軟件以及各種文本編輯器來查看。
HTML有什么用？
HTML語(yǔ)言可以方便地將網(wǎng)絡(luò)上存儲(chǔ)于不同位置的文字、圖片、聲音、視頻等內(nèi)容組織起來，方便用戶瀏覽。對(duì)于我們來說，HTML是學(xué)習(xí)網(wǎng)頁(yè)制作的基本功，熟練掌握HTML這項(xiàng)基本功，可以為以后的學(xué)習(xí)和工作打下良好的基礎(chǔ)。
HTML如何入門？
要學(xué)習(xí)任何編程語(yǔ)言，都不好好高騖遠(yuǎn)，HTML的入門很簡(jiǎn)單，但是也要遵循學(xué)習(xí)的基本步驟，選擇一本入門書籍，循序漸進(jìn)地去學(xué)習(xí)每一張的內(nèi)容。一邊學(xué)習(xí)，一邊查看網(wǎng)頁(yè)代碼對(duì)照來學(xué)，提升入門速度。
HTML案例
下面就是最基本的HTML案例，在這個(gè)案例中，用的是HTML5，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML菜鳥教程(runoob.com)</title>
</head>
<body>
<h1>我的第一個(gè)標(biāo)題</h1>
<p>我的第一個(gè)段落。</p>
</body>
</html>如何編輯HTML?
這個(gè)就很多了 ，比如最出名的Dreamweaver，當(dāng)然如果熟練之后，可以選擇任意自己喜歡的編輯器，一些小的改動(dòng)或者一小段代碼的話，也可以用各種常見的文本編輯器來處理，比如我們?cè)趙odows系統(tǒng)上常見的記事本，總之只要自己覺得方便就好。
總結(jié)
以上是學(xué)習(xí)HTML菜鳥教程的第一課，首先保持一個(gè)良好的心態(tài)來學(xué)習(xí)，有好的心態(tài)，知識(shí)方面只要循序漸進(jìn)，學(xué)會(huì)就是水到渠成的事情了 。
維網(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>除了對(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è)中使用視頻音頻
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
