整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
-直接上img標(biāo)簽即可
img標(biāo)簽是一個(gè)標(biāo)簽，不設(shè)置寬高默認(rèn)會(huì)以原尺寸顯示
1-1沒有寬高的圖片顯示的是圖片本身的寬高，
下圖是代碼和瀏覽器顯示：
1-2 給img添加了寬高后，調(diào)整后是改變的是圖片的顯示；
下圖是代碼和瀏覽器顯示：
2-div標(biāo)簽+背景圖片
需要設(shè)置div的寬高，因?yàn)楸尘皥D片只是裝飾的css樣式，不能撐開div標(biāo)簽。
下圖是代碼和瀏覽器顯示：
2-1 是有高寬的盒子顯示
2-2 是沒有寬高的盒子
下圖是代碼和瀏覽器顯示：
當(dāng)沒有寬高數(shù)據(jù)時(shí)，盒子就沒有被撐開，所以沒有顯示。
3-按照重要程度區(qū)別
3-1理解img和background的本質(zhì)不同
img叫做 插入圖；
background又叫做 背景圖；
3-2 使用的方式
img在工作用作比較重要的圖片，比如：宣傳圖，首圖，海報(bào)圖，產(chǎn)品圖必須是img；
背景圖片，修飾圖，裝飾性，美化用的圖片；
（僅為個(gè)人自學(xué)的一點(diǎn)點(diǎn)思考，如有錯(cuò)漏，歡迎留言指正）
全棧攻城獅-每日更新原創(chuàng)IT編程技術(shù)及日常實(shí)用視頻。
主要內(nèi)容：這是HTML課程的第五課，主要講解HTML的圖片和超鏈接。讓自己設(shè)計(jì)的網(wǎng)頁更加多元素。
在上節(jié)中主要講解了HTML的文字標(biāo)簽和格式標(biāo)簽。上篇請(qǐng)戳→→04程序員定要學(xué)HTML，字體段落標(biāo)簽介紹，60秒搞定
其實(shí)如果沒有記住也無所謂。畢竟這些標(biāo)簽都是HTML中比較常用的，在以后的相關(guān)的案例中也會(huì)使用。此系列教程主要講解HTML從基礎(chǔ)到精通。自己能夠設(shè)計(jì)一個(gè)完整的前端網(wǎng)頁項(xiàng)目。
程序員寫代碼
在HTML中添加圖片其實(shí)很簡(jiǎn)單，就是添加一個(gè)img的標(biāo)簽。
圖片標(biāo)簽的語法
一般有src、alt、width、height四種屬性就夠用了。
效果：
圖片的顯示效果
src表示的是圖片的路徑，這里面的值應(yīng)該怎么寫呢？
（1）html文件和圖片在相同一個(gè)文件夾下。
HTML文件和圖片文件在相同的目錄下，可以直接書寫文件的名稱。
寫文件名的寫法，如上面的HTML
（2）圖片在HTML文件所在目錄的文件夾內(nèi)：
如圖：
圖片文件在文件夾內(nèi)
此時(shí)需要加上文件夾名稱，并加上“/”表示下層目錄：
下層目錄的圖片寫法
（3）圖片文件在上層目錄
如果圖片在HTML文件所在的上層目錄，則需要寫“..”表示向上一級(jí)。如圖：
上層目錄
超鏈接就是可以鏈接到某個(gè)資源的東西，比如我們打開百度首頁搜索后，產(chǎn)生的就是超鏈接：
這些藍(lán)字超鏈接
這些藍(lán)色的文字標(biāo)題，我們點(diǎn)擊之后可以跳轉(zhuǎn)到新的網(wǎng)站。這就是超鏈接。下面我們自己寫一個(gè)超鏈接：
超鏈接的寫法
超鏈接預(yù)覽
超鏈接中的潮涌屬性包括：href（網(wǎng)頁地址）、title（說明描述）、target（打開網(wǎng)頁的位置）、name（名稱）。
其中href支持帶有任何協(xié)議的連接。title是對(duì)超鏈接的說明。
程序員
target包括四個(gè)值：
_blank
在新的窗口打開連接
_self
在當(dāng)前窗口打開超鏈接
_parent
在父窗口打開超鏈接，這個(gè)后面會(huì)說，不常用
_top
在整個(gè)窗口中打開被鏈接文檔。
每天一個(gè)知識(shí)點(diǎn)，帶你邁向軟件編程大神，一起努力吧。
索 HTML 圖像的不同概念，以及如何有效地使用它們?cè)谀木W(wǎng)站上增加視覺吸引力、傳達(dá)信息和表達(dá)情感。 本指南包含大量示例和實(shí)用技巧，可幫助您創(chuàng)建一個(gè)視覺效果驚人且用戶友好的網(wǎng)站。
圖像是網(wǎng)頁設(shè)計(jì)師和開發(fā)人員的強(qiáng)大工具，它們可用于傳達(dá)信息、表達(dá)情感并使網(wǎng)站更具視覺吸引力。 HTML 圖像概念是網(wǎng)頁設(shè)計(jì)和開發(fā)的重要方面。 它們用于將圖像嵌入到網(wǎng)頁中，以便于顯示和共享圖片和圖形。 在這篇博文中，我們將探討 HTML 圖像的不同概念以及如何有效地使用它們。
首先，讓我們談?wù)劜煌愋偷?HTML 圖像。 有兩種主要類型的圖像：內(nèi)嵌圖像和背景圖像。 內(nèi)聯(lián)圖像直接嵌入到 HTML 代碼中，而背景圖像則應(yīng)用于元素的背景。
在此示例中，內(nèi)聯(lián)圖像“image.jpg”直接嵌入到 HTML 代碼中并顯示給用戶。
在此示例中，背景圖像“image.jpg”應(yīng)用于 div 元素的背景并顯示給用戶。
以合乎邏輯且一致的方式使用圖像也很重要。 這意味著您應(yīng)該使用它們來傳達(dá)與網(wǎng)頁內(nèi)容相關(guān)的信息或表達(dá)情感，而不是隨意使用它們。 此外，使用 alt 屬性為圖像添加文本替代也很重要，它允許可能使用屏幕閱讀器的用戶訪問圖像，或者以防圖像加載失敗。
在此示例中，替代文本“日落的美麗圖像”讓用戶清楚地了解圖像所代表的內(nèi)容。
另一個(gè) HTML 圖像概念是使用寬度和高度屬性調(diào)整圖像大小的能力。 這些屬性允許您調(diào)整圖像大小以適合您的布局和設(shè)計(jì)。
在此示例中，圖像的寬度設(shè)置為 300 像素，圖像的高度設(shè)置為 200 像素。
HTML 圖像概念是網(wǎng)頁設(shè)計(jì)和開發(fā)的重要方面。 它們用于將圖像嵌入到網(wǎng)頁中，以便于顯示和共享圖片和圖形。 通過了解不同類型的圖像并正確使用它們，您可以為您的網(wǎng)站增加額外的視覺吸引力，并以有力的方式傳達(dá)信息或表達(dá)情感。 無論是使用內(nèi)聯(lián)圖片還是背景圖片，添加替代文本或調(diào)整大小，這些概念都是創(chuàng)建視覺效果驚人且用戶友好的網(wǎng)站的關(guān)鍵。
但不要只相信我們的話，您自己試試吧！ 嘗試使用 HTML 圖像，看看它們?nèi)绾卧鰪?qiáng)您網(wǎng)站的整體外觀。 通過每一行代碼，您離創(chuàng)建一個(gè)您的訪問者會(huì)喜歡的美觀且引人入勝的網(wǎng)站又近了一步。 請(qǐng)記住，圖像具有喚起情感和傳達(dá)信息的力量，因此請(qǐng)明智地使用它們并將它們作為您網(wǎng)頁設(shè)計(jì)策略的重要組成部分。 通過正確組合 HTML 和圖像，您將創(chuàng)建一個(gè)脫穎而出并給訪問者留下持久印象的網(wǎng)站。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
