一，超鏈接

定義：超鏈接：可以是一個(gè)字，可以是圖片，可以是表格，或者音視頻等等

? ? ? 是行內(nèi)標(biāo)簽，特殊的行內(nèi)標(biāo)簽，它里面什么都能放，除了它自己

功能 ：?1、從一個(gè)頁面跳到另一個(gè)頁面

? ? ? ? ? ? ?2、在當(dāng)前頁面進(jìn)行跳轉(zhuǎn)（錨點(diǎn)功能），一般可以用來做“樓梯導(dǎo)航”

? ? ? ? ? ? ?3、下載

屬性：

? ? ? ? href屬性 ?指向超鏈接跳轉(zhuǎn)的地址

? ? ? ? ? 跳轉(zhuǎn)的路徑：

? ? ? ? ? ? 絕對(duì)路徑：是一個(gè)完整的地址，無論你在哪里，只要地址不寫錯(cuò)，就可以實(shí)現(xiàn)跳轉(zhuǎn)

? ? ? ? ? ? 相對(duì)路徑：不是一個(gè)完整的地址，路徑寫法跟你所在位置相關(guān)

? ? ? ? ? ? ? ? ./ ? 你（超鏈接）所在位置跟你要跳轉(zhuǎn)的位置在同一目錄下 ?，默認(rèn)就是./開始

? ? ? ? ? ? ? ? ../ ?你所在的位置跟你要跳轉(zhuǎn)的位置不在同一目錄下，

? ? ? ? ? ? ? ? ? ? ? ? ? 跳出當(dāng)前目錄來到上一級(jí)目錄尋找,如果上一級(jí)目錄下還未尋找到，

? ? ? ? ? ? ? ? ? ? ? ? ? 那就再../，直到找到為止

? ? ? ? target屬性：設(shè)置超鏈接的打開方式

? ? ? ? ? ? 可選值：

? ? ? ? ? ? ? _self ?在當(dāng)前頁面打開超鏈接 ? 默認(rèn)值 ? 一般情況下，國外的網(wǎng)站喜歡_self

? ? ? ? ? ? ? _blank ?新開一個(gè)頁面打開超鏈接 ? ? ? ? ? 國內(nèi)的網(wǎng)站 常用_blank

空鏈接寫法（2種寫法）

錨點(diǎn)功能實(shí)現(xiàn)：

? ? ? ? 第一步：給你要跳轉(zhuǎn)的位置打一個(gè)標(biāo)記

? ? ? ? ? ? ? ? id=‘XXX’

? ? ? ? ? ? ? ? id屬性值：不能以數(shù)字開頭，最好不要是漢字

? ? ? ? 第二步：在超鏈接href屬性值里：#id屬性值

特殊情況：回到頂部 ?<a href="#">回到頂部</a>

? ? ? ? ? ? ? ? 會(huì)刷新頁面，滾動(dòng)條回到最開始的位置

二，圖片的插入

使用img標(biāo)簽來向網(wǎng)頁中引入一個(gè)外部圖片，

? ? ? ? img這種元素屬于替換元素，行內(nèi)塊標(biāo)簽（基于塊和行內(nèi)元素之間，具有兩種元素的特點(diǎn)）

? ? ? ? ? 4個(gè)屬性

? ? ? ? ? src ?指向圖片的引入路徑

? ? ? ? ? ? 絕對(duì)路徑：完整的地址

? ? ? ? ? ? 相對(duì)路徑：不完整的地址，./或者../

? ? ? ? ? alt ?對(duì)圖片的文字描述，正常情況下，是不顯示，當(dāng)圖片引入不成功的時(shí)候會(huì)顯示

? ? ? ? ? ? ? ? 對(duì)seo推廣有好處

? ? ? ? ? width ?設(shè)置圖片的寬度

? ? ? ? ? height ?設(shè)置圖片的高度

? ? ? ? ? ? 注意：一般情況下，我們不會(huì)同時(shí)設(shè)置寬度，和高度

? ? ? ? ? ? ? ? 只會(huì)設(shè)置其一，另外一個(gè)瀏覽器會(huì)自適應(yīng)調(diào)整大小

圖片的格式和特點(diǎn)

JPEG(JPG)

? ? ? ? ? ? ? ? ? ? - JPEG圖片支持的顏色比較多，圖片可以壓縮，但是不支持透明

? ? ? ? ? ? ? ? ? ? - 一般用來保存照片等顏色豐富的圖片? ? ? ? ??

? ? ? ? ? ? ? ? GIF

? ? ? ? ? ? ? ? ? ? - GIF支持的顏色少，只支持簡單的透明，支持動(dòng)態(tài)圖

? ? ? ? ? ? ? ? ? ? - 圖片顏色單一或者是動(dòng)態(tài)圖時(shí)可以使用gif

? ? ? ? ? ? ? ? PNG

? ? ? ? ? ? ? ? ? ? - PNG支持的顏色多，并且支持復(fù)雜的透明，不支持動(dòng)圖

? ? ? ? ? ? ? ? ? ? - 可以用來顯示顏色復(fù)雜的透明的圖片

? ? ? ? ? ? ? ? ? ? ? 專為網(wǎng)頁而生的

? ? ? ? ? ? ? ? webp

? ? ? ? ? ? ? ? ? ?-谷歌新推出的專門用來表示網(wǎng)頁的一種格式

? ? ? ? ? ? ? ? ? ?-它具有其他圖片格式的所有優(yōu)點(diǎn)，而且文件格式還很小

? ? ? ? ? ? ? ? ? ?-缺點(diǎn)：兼容性不好?

? ? ? ? ? ? ? ? base64

? ? ? ? ? ? ? ? ? ?-講圖片使用base64編碼，這樣可以將圖片轉(zhuǎn)換為字符，通過字符形式來引入

? ? ? ? ? ? ? ? ? ?-一般都是需要和網(wǎng)頁一起加載的圖片才會(huì)使用base64

三，音視頻的插入

audio 音頻的插入? ? video? ?視頻的插入

? ? ? ?src ?引入音視頻的路徑

? ? ? ? ? 相對(duì)路徑，絕對(duì)路徑

? ? ? controls ? 控制用戶是否可以播放 ?,默認(rèn)是用戶不可以播放

? ? ? loop ? ? 循環(huán)播放

文章來源地址http://www.zghlxwxcb.cn/news/detail-847892.html

到了這里，關(guān)于html（超鏈接，圖片插入，音視頻插入）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！