Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
作用是向網頁中添加圖片,并且img標簽有多個可用參數可以添加。
全棧攻城獅-每日更新原創IT編程技術及日常實用視頻。
主要內容:這是HTML課程的第五課,主要講解HTML的圖片和超鏈接。讓自己設計的網頁更加多元素。
在上節中主要講解了HTML的文字標簽和格式標簽。上篇請戳→→04程序員定要學HTML,字體段落標簽介紹,60秒搞定
其實如果沒有記住也無所謂。畢竟這些標簽都是HTML中比較常用的,在以后的相關的案例中也會使用。此系列教程主要講解HTML從基礎到精通。自己能夠設計一個完整的前端網頁項目。
程序員寫代碼
在HTML中添加圖片其實很簡單,就是添加一個img的標簽。
圖片標簽的語法
一般有src、alt、width、height四種屬性就夠用了。
效果:
圖片的顯示效果
src表示的是圖片的路徑,這里面的值應該怎么寫呢?
(1)html文件和圖片在相同一個文件夾下。
HTML文件和圖片文件在相同的目錄下,可以直接書寫文件的名稱。
寫文件名的寫法,如上面的HTML
(2)圖片在HTML文件所在目錄的文件夾內:
如圖:
圖片文件在文件夾內
此時需要加上文件夾名稱,并加上“/”表示下層目錄:
下層目錄的圖片寫法
(3)圖片文件在上層目錄
如果圖片在HTML文件所在的上層目錄,則需要寫“..”表示向上一級。如圖:
上層目錄
超鏈接就是可以鏈接到某個資源的東西,比如我們打開百度首頁搜索后,產生的就是超鏈接:
這些藍字超鏈接
這些藍色的文字標題,我們點擊之后可以跳轉到新的網站。這就是超鏈接。下面我們自己寫一個超鏈接:
超鏈接的寫法
超鏈接預覽
超鏈接中的潮涌屬性包括:href(網頁地址)、title(說明描述)、target(打開網頁的位置)、name(名稱)。
其中href支持帶有任何協議的連接。title是對超鏈接的說明。
程序員
target包括四個值:
_blank
在新的窗口打開連接
_self
在當前窗口打開超鏈接
_parent
在父窗口打開超鏈接,這個后面會說,不常用
_top
在整個窗口中打開被鏈接文檔。
每天一個知識點,帶你邁向軟件編程大神,一起努力吧。
索 HTML 圖像的不同概念,以及如何有效地使用它們在您的網站上增加視覺吸引力、傳達信息和表達情感。 本指南包含大量示例和實用技巧,可幫助您創建一個視覺效果驚人且用戶友好的網站。
圖像是網頁設計師和開發人員的強大工具,它們可用于傳達信息、表達情感并使網站更具視覺吸引力。 HTML 圖像概念是網頁設計和開發的重要方面。 它們用于將圖像嵌入到網頁中,以便于顯示和共享圖片和圖形。 在這篇博文中,我們將探討 HTML 圖像的不同概念以及如何有效地使用它們。
首先,讓我們談談不同類型的 HTML 圖像。 有兩種主要類型的圖像:內嵌圖像和背景圖像。 內聯圖像直接嵌入到 HTML 代碼中,而背景圖像則應用于元素的背景。
在此示例中,內聯圖像“image.jpg”直接嵌入到 HTML 代碼中并顯示給用戶。
在此示例中,背景圖像“image.jpg”應用于 div 元素的背景并顯示給用戶。
以合乎邏輯且一致的方式使用圖像也很重要。 這意味著您應該使用它們來傳達與網頁內容相關的信息或表達情感,而不是隨意使用它們。 此外,使用 alt 屬性為圖像添加文本替代也很重要,它允許可能使用屏幕閱讀器的用戶訪問圖像,或者以防圖像加載失敗。
在此示例中,替代文本“日落的美麗圖像”讓用戶清楚地了解圖像所代表的內容。
另一個 HTML 圖像概念是使用寬度和高度屬性調整圖像大小的能力。 這些屬性允許您調整圖像大小以適合您的布局和設計。
在此示例中,圖像的寬度設置為 300 像素,圖像的高度設置為 200 像素。
HTML 圖像概念是網頁設計和開發的重要方面。 它們用于將圖像嵌入到網頁中,以便于顯示和共享圖片和圖形。 通過了解不同類型的圖像并正確使用它們,您可以為您的網站增加額外的視覺吸引力,并以有力的方式傳達信息或表達情感。 無論是使用內聯圖片還是背景圖片,添加替代文本或調整大小,這些概念都是創建視覺效果驚人且用戶友好的網站的關鍵。
但不要只相信我們的話,您自己試試吧! 嘗試使用 HTML 圖像,看看它們如何增強您網站的整體外觀。 通過每一行代碼,您離創建一個您的訪問者會喜歡的美觀且引人入勝的網站又近了一步。 請記住,圖像具有喚起情感和傳達信息的力量,因此請明智地使用它們并將它們作為您網頁設計策略的重要組成部分。 通過正確組合 HTML 和圖像,您將創建一個脫穎而出并給訪問者留下持久印象的網站。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。