二維碼
        企資網(wǎng)

        掃一掃關(guān)注

        當(dāng)前位置: 首頁 » 企資快訊 » 服務(wù) » 正文

        零基礎(chǔ)10天學(xué)會(huì)網(wǎng)頁制作第二天(中)之屬姓介紹

        放大字體  縮小字體 發(fā)布日期:2021-11-10 02:59:38    作者:微生連東    瀏覽次數(shù):3
        導(dǎo)讀

        上半部分呢,主要講述得是路徑得選擇,這個(gè)是至關(guān)重要得,前邊也說過,路徑不僅僅局限于支持得選擇,以后得css,javascript,以及網(wǎng)頁得跳轉(zhuǎn)等等,都會(huì)牽扯到路徑,所以,才花費(fèi)了較大篇幅去闡述,也希望大家能夠引

        上半部分呢,主要講述得是路徑得選擇,這個(gè)是至關(guān)重要得,前邊也說過,路徑不僅僅局限于支持得選擇,以后得css,javascript,以及網(wǎng)頁得跳轉(zhuǎn)等等,都會(huì)牽扯到路徑,所以,才花費(fèi)了較大篇幅去闡述,也希望大家能夠引起重視。

        還有一個(gè)知識(shí)點(diǎn)需要補(bǔ)充一下,上半部分呢,對(duì)于支持得路徑都是采用得本地路徑,如果我們要加載網(wǎng)上得某一張支持呢?這個(gè)其實(shí)更簡(jiǎn)單,直接可以把支持得地址寫到src里,如下圖:

        比如,這里有一個(gè)網(wǎng)上得支持地址:

        avatar.csdnimg/B/C/8/0_ming_147.jpg

        代碼如下:

        代碼

        效果如下:

        效果

        我們接著講述下面得課程,什么是屬性呢?其實(shí)就是某個(gè)附加信息,比如人,他得附加信息,有名字,有年齡,那么針對(duì)于標(biāo)簽,屬性就是它得附加信息,有一個(gè)需要注意得,屬性是寫在標(biāo)簽內(nèi),也就是起始得標(biāo)簽內(nèi)<>,雖然不區(qū)分大小寫,但盡量和標(biāo)簽統(tǒng)一,使用小寫字母;屬性,是一個(gè)鍵值對(duì),語法如下:

        key="value"。

        看到上邊得語法,我們是不是想到了第壹天講述得img標(biāo)簽得用法,還記得么?是不是里面也有個(gè)屬性,src,如下圖:

        屬性

        其實(shí)絕大多數(shù)屬性都是這樣呈現(xiàn)得,一般以雙引號(hào)為主,有時(shí)候也會(huì)使用單引號(hào);單雙引號(hào),表述是一致得,下面我們舉個(gè)例子,新建一個(gè)網(wǎng)頁,引入一個(gè)支持,如下圖:

        目錄

        代碼如下:

        代碼

        效果如下:

        效果

        很簡(jiǎn)單得一個(gè)例子,只是展示一個(gè)支持,在實(shí)際開發(fā)中,一般我們會(huì)控制支持得大小,也就是支持得寬高,畢竟有得支持太大了,直接展示影響美觀,怎么樣控制寬高呢?這里就需要屬性了,寬屬性:wdith,高屬性:height,我們分別使用一下:

        把支持得寬調(diào)整為,寬100px,px是像素,也就是單位,下個(gè)課程,我們講述一下,這里,我們先作為了解,px可以書寫,也可以不寫,默認(rèn)就是像素單位。

        代碼如下:

        代碼

        效果如下:

        效果

        有得朋友想問了,我明明只寫了寬,沒有寫高,為什么顯示這樣呢?這個(gè)需要大家了解一下,如果,我們只僅僅得寫了寬,或者只寫了高,

        那么對(duì)于img這個(gè)標(biāo)簽,它會(huì)按照你指定得大小,對(duì)另一個(gè)做等比例得縮放或放大處理,也就是說,本來支持寬100px,高100px,你改寫了寬屬性,設(shè)置width="20px",那么隨之得,高也會(huì)變成20px,這就是等比例得處理。

        我們?cè)倏匆粋€(gè)例子,同時(shí)設(shè)置寬和高:

        代碼如下:

        代碼

        效果如下:

        效果

        兩個(gè)屬性都設(shè)置得話,那么它就會(huì)按照你設(shè)置得進(jìn)行展示,有可能會(huì)出現(xiàn)支持得拉伸或壓縮情況,這種情況得出現(xiàn),是因?yàn)槟愕弥С诌^大或者過小而導(dǎo)致得,在實(shí)際得開發(fā)中,我們也要考慮到這種情況,一般UI,會(huì)給我們標(biāo)注支持得尺寸,或者比例,我們按照UI得標(biāo)注去寫,就沒有問題。

        上邊兩個(gè)就是img得屬性,其實(shí)也沒啥難得,無非就是控制寬高而已,需要注意一下,多個(gè)屬性之間,我們使用空格隔開,我們?cè)偃タ戳硪粚傩?,alt屬性,alt 屬性用來為圖像定義一串預(yù)備得可替換得文本,什么意思呢,就是在支持無法加載,或者加載錯(cuò)誤得時(shí)候,所展示得文本信息,如下圖,我們故意把支持得地址寫錯(cuò):

        代碼

        因?yàn)槲覀儧]有“l(fā)ife1.png”這張支持,加載肯定是錯(cuò)誤得,我們看下效果:

        效果

        以上是支持加載錯(cuò)誤后,給用戶展示得支持描述信息,如果說支持展示正常,用戶鼠標(biāo)滑過支持,就給出支持得描述,我們?cè)撊绾卧O(shè)置呢?實(shí)現(xiàn)這種效果,我們就必須再去掌握它得另外一個(gè)屬性“title”,我們直接看例子:

        代碼

        效果如下:

        效果

        截圖截不了這個(gè)效果,就用手機(jī)拍得,所以啊,老鐵們,寫這種技術(shù)文章是很耗時(shí)得,還麻煩給個(gè)哦,在這里謝謝了。

        2、a標(biāo)簽及屬性得使用

        我們經(jīng)??吹胶芏嗑W(wǎng)頁里,某個(gè)支持,或者某段文字,就跳轉(zhuǎn)到了另一頁面,比如淘寶,京東,商品后,就跳轉(zhuǎn)到商品詳情,本站或者網(wǎng)易新聞,某個(gè)新聞,就跳轉(zhuǎn)了新聞詳情,這是如何實(shí)現(xiàn)呢?其實(shí)絕大部分都可以用a標(biāo)簽來實(shí)現(xiàn)。

        a標(biāo)簽?zāi)?,是一個(gè)超鏈接,超鏈接可以是一個(gè)字,一個(gè)詞,或者一組詞,也可以是一幅圖像,我們可以這些內(nèi)容來跳轉(zhuǎn)到新得文檔或者當(dāng)前文檔中得某個(gè)部分,當(dāng)我們把鼠標(biāo)指針移動(dòng)到網(wǎng)頁中得某個(gè)鏈接上時(shí),箭頭會(huì)變?yōu)橐恢恍∈帧?/p>

        我們先看下效果,href是a標(biāo)簽得屬性,用來跳轉(zhuǎn)得地址,類似img標(biāo)簽得src屬性,都是指向得一個(gè)路徑。

        代碼

        效果如下:

        效果

        因?yàn)閔ref里是空得,所以,目前得時(shí)沒有一點(diǎn)效果得,下面我們練習(xí)下跳轉(zhuǎn),這里我們分為兩種,一種是網(wǎng)絡(luò)地址跳轉(zhuǎn),一種是本地文件跳轉(zhuǎn)。

        第壹種,網(wǎng)絡(luò)地址跳轉(zhuǎn)

        我們直接跳到百度首頁,代碼如下:

        代碼

        右鍵選擇瀏覽器中打開:

        瀏覽器打開

        跳轉(zhuǎn)百度后,直接打開了百度首頁,大家可以試一試,這里就不貼圖了。

        第二種,本地文件跳轉(zhuǎn)

        目前“a標(biāo)簽.html”和“遠(yuǎn)程支持加載.html”同屬一個(gè)目錄,在代碼里,我們直接寫文件得名字。

        目錄

        在“a標(biāo)簽.html”里代碼如下:

        代碼

        效果如下:

        效果

        之后:

        之后

        基本上本地得文件跳轉(zhuǎn),和上半部分得支持得路徑是一樣得,如果對(duì)于路徑,你已經(jīng)很清晰了,那么文件在子目錄或者在父目錄,根目錄,相信你也沒有問題,無非就是"../"和“/”及文件夾得使用,這里就不舉太多得例子了,畢竟之前已經(jīng)花費(fèi)了很大篇幅在說路徑問題,如果你目前仍然對(duì)路徑有不解,可以看看之前所講得內(nèi)容,或者看對(duì)應(yīng)得第二天得視頻,我也會(huì)重復(fù)去講。

         
        (文/微生連東)
        免責(zé)聲明
        本文僅代表作發(fā)布者:微生連東個(gè)人觀點(diǎn),本站未對(duì)其內(nèi)容進(jìn)行核實(shí),請(qǐng)讀者僅做參考,如若文中涉及有違公德、觸犯法律的內(nèi)容,一經(jīng)發(fā)現(xiàn),立即刪除,需自行承擔(dān)相應(yīng)責(zé)任。涉及到版權(quán)或其他問題,請(qǐng)及時(shí)聯(lián)系我們刪除處理郵件:weilaitui@qq.com。
         

        Copyright ? 2016 - 2025 - 企資網(wǎng) 48903.COM All Rights Reserved 粵公網(wǎng)安備 44030702000589號(hào)

        粵ICP備16078936號(hào)

        微信

        關(guān)注
        微信

        微信二維碼

        WAP二維碼

        客服

        聯(lián)系
        客服

        聯(lián)系客服:

        在線QQ: 303377504

        客服電話: 020-82301567

        E_mail郵箱: weilaitui@qq.com

        微信公眾號(hào): weishitui

        客服001 客服002 客服003

        工作時(shí)間:

        周一至周五: 09:00 - 18:00

        反饋

        用戶
        反饋

        中文字幕亚洲精品无码| 在线中文字幕精品第5页| 中文字幕久久精品无码| 亚洲精品无码99在线观看| 国产成人无码一区二区三区在线| 最近2019中文免费字幕在线观看| 日韩人妻无码精品久久免费一 | 色偷偷一区二区无码视频| 中文字幕在线观看亚洲视频| 在线精品无码字幕无码AV| 中文字幕丰满伦子无码| 97久久精品无码一区二区| 国产台湾无码AV片在线观看| 亚洲日本中文字幕| 无码视频在线播放一二三区| 少妇人妻无码精品视频app| 无码国产精品一区二区免费式直播| 亚洲成?v人片天堂网无码| 国产精品免费无遮挡无码永久视频| 日本无码小泬粉嫩精品图| 中文字幕精品无码一区二区| 欧美在线中文字幕| 全球中文成人在线| 久久伊人亚洲AV无码网站| 精品欧洲av无码一区二区| 午夜不卡无码中文字幕影院| 国产午夜精华无码网站| 中文无码伦av中文字幕| 久久久噜噜噜久久中文字幕色伊伊 | 精品无码三级在线观看视频| 亚洲∧v久久久无码精品| 无码国内精品久久综合88| 亚洲精品无码AV中文字幕电影网站| 中文字字幕在线中文无码| 中文字幕无码第1页| 国产精品中文久久久久久久| 亚洲爆乳无码精品AAA片蜜桃| 国产精品无码国模私拍视频 | 国产乱子伦精品无码码专区| 无码国产福利av私拍| 无码内射中文字幕岛国片|