柚子快報(bào)激活碼778899分享：前端HTML

http://yzkb.51969.com/

?前言:

HTML的全稱為超文本標(biāo)記語言，是一種標(biāo)記語言。它包括一系列標(biāo)簽，通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。

接下來,我將通過我對前端HTML的認(rèn)知,來詳細(xì)講解一下HTML的實(shí)現(xiàn)

前端快捷鍵:

下面是我經(jīng)常用到的一些標(biāo)簽,大家可以作為參考

shift+alt+向上或向下箭頭向上或向下復(fù)制 ctrl+d 向下依次復(fù)制相同單詞ctrl+alt+上下箭頭添加多個(gè)光標(biāo)添加多個(gè)變量ctrl+h實(shí)現(xiàn)某個(gè)單詞的全局替換ctrl+g快速定位到某一行shift+alt+鼠標(biāo)滾動選定某個(gè)區(qū)塊進(jìn)行操作ctrl+/注釋

字符實(shí)體:

由于這些在書寫代碼時(shí)無法實(shí)現(xiàn),所以我們可以通過字符實(shí)體來實(shí)現(xiàn)

比如: 當(dāng)我們想實(shí)現(xiàn)兩個(gè)字體之間存在多個(gè)空格,僅僅在代碼中多加幾個(gè)空格是沒有作用的,最多只能實(shí)現(xiàn)一個(gè),所以這時(shí)候我們就需要通過字符身體來幫我們實(shí)現(xiàn)

空格 <<>>

HTML的注釋:

當(dāng)我們要直接注釋某段文字時(shí),將鼠標(biāo)停留在要注釋的一行,按下注釋快捷鍵就可以了,以下就是HTML的注釋了,可以當(dāng)做多行注釋也可以當(dāng)做單行注釋來使用

路徑

相對路徑:

同一文件同一位置 路徑用./??

如下圖,由于路徑練習(xí)和圖片在同一個(gè)文件base-code中,所以可以直接用 . / 來引入

若文件在上一級 路徑就用../

同一文件的下一級就加/

絕對路徑(這個(gè)比較簡單我就不演示了):

1.直接復(fù)制文件里面的地址

2.復(fù)制別人的圖片地址

標(biāo)簽:

標(biāo)簽的種類:

1.雙標(biāo)簽: 成對出現(xiàn)的標(biāo)簽,有開始標(biāo)簽和結(jié)束標(biāo)簽,開始標(biāo)簽與結(jié)束標(biāo)簽之間差一個(gè)/

這是一個(gè)雙標(biāo)簽

2.單標(biāo)簽:只出現(xiàn)一次的標(biāo)簽:

標(biāo)簽的關(guān)系:

并列:

這種并列在一起的就是并列關(guān)系(就像兄弟關(guān)系)

段落標(biāo)簽

嵌套:

下面一個(gè)標(biāo)簽在另一個(gè)標(biāo)簽里面就是嵌套關(guān)系(就像父子關(guān)系)

標(biāo)題標(biāo)簽:

h1-h6(字體級別從1-6依次遞減,字號也逐漸變小)

這是一級標(biāo)簽

這是二級標(biāo)簽

這是三級標(biāo)簽

段落標(biāo)簽:

這是一個(gè)段落標(biāo)簽

一般的標(biāo)簽是不會換行的，但是當(dāng)p標(biāo)簽的內(nèi)容足夠大時(shí)，就可以實(shí)現(xiàn)換行作用,所以p標(biāo)簽經(jīng)常用到文字比較多的文本當(dāng)中

圖像標(biāo)簽

img標(biāo)簽

圖像屬性名作用src填寫所添加圖片的路徑alt替換文本，圖片無法顯示的時(shí)候顯示文字title顯示文本，鼠標(biāo)停留在圖片上時(shí)顯示文字width圖片寬度，數(shù)值為數(shù)字，沒有單位，默認(rèn)等比例縮放height圖片高度，數(shù)值為數(shù)字，沒有單位，默認(rèn)等比例縮放

音頻標(biāo)簽:

audio標(biāo)簽

音頻屬性作用src添加路徑? ? 支持格式：MP3，Og8，Wavcontrol顯示音頻控制面板loop循環(huán)播放autoplay自動播放 但一般會被禁用

視頻標(biāo)簽:

video標(biāo)簽

視頻屬性作用src路徑 支持格式MO4，WebM，Oggcontrol顯示視頻控制面板loop循環(huán)播放muted靜音播放autoplay自動播放 瀏覽器支持在靜音狀態(tài)在自動播放

超鏈接標(biāo)簽?

a標(biāo)簽

超鏈接

?

超鏈接屬性作用href屬性中添加需要跳轉(zhuǎn)的文件地址作用：跳轉(zhuǎn)到本地文件，相對路徑和絕對路徑都可以查找target=“blank”新窗口跳轉(zhuǎn)頁面 保留原來界面

如果想顯示效果但沒有文件需要跳轉(zhuǎn)，那么可以在href屬性中放一個(gè)#，點(diǎn)擊該屬性不會跳轉(zhuǎn)，它表示空鏈接

列表:

有序列表標(biāo)簽ul嵌套li標(biāo)簽? ul是無序列表，li是列表?xiàng)l目有序列表標(biāo)簽ol嵌套li標(biāo)簽? ol是有序列表，li是列表?xiàng)l目定義列表 dl嵌套dt和dd dl是定義列表 dt是定義列表的標(biāo)題 ddd是定義列表的描述/詳情

?無序列表

• 1
• 2
• 3
• 4

?有序列表

1. 第一行
2. 第二行
3. 第三行
4. 第四行

?

定義列表?

購物指南

購物流程

支付方式

售后規(guī)則

配送方式

配送運(yùn)費(fèi)

配送時(shí)間

配送范圍

關(guān)于我們

平臺規(guī)則

聯(lián)系我們

問題反饋

?到后期加些CSS屬性,從而實(shí)現(xiàn)下面這種模式

表格:

table標(biāo)簽

tr 行 , th 表頭單元格 , td 內(nèi)容單元格

標(biāo)簽table嵌套tr,tr嵌套td/th?

表格默認(rèn)沒有邊框線，使用border屬性可以為表格添加邊框線，border添加在table之后

?效果:

?

合并單元格：

1 跨行合并 保留最上單元格 td后添加屬性rowspan=“（添要合并幾個(gè)格數(shù)）”，然后把不要的格數(shù)刪了

2 跨列合并 保留最左邊的單元格 td后添加colspan=“（添加要合并幾個(gè)格數(shù)）”，然后把多余的刪了

?

?效果:

?

表單:

1.input標(biāo)簽?

?type屬性值不同,功能不同

type屬性值功能text文本框，用于輸入單行文本? 特點(diǎn),輸入什么顯示什么password密碼框? 輸入什么都顯示的是星號radio單選框,實(shí)現(xiàn)單選功能checkbox多選框,實(shí)現(xiàn)多選功能file默認(rèn)情況下，文件上傳表單控件只能上傳一個(gè)文件，添加 multiple 屬性可以實(shí)現(xiàn)文件多選功能。

text文本框 (輸入之后會顯示輸入的文字)

賬號:

?password 密碼框(輸入之后文字全部轉(zhuǎn)化成*)

密碼:

?

radio 單選框

女

男

觀察,由于效果不好兩個(gè)都可以選中,所以我們需要加入name屬性名

男

女

這樣就只能在男女之間選擇一個(gè)性別了,起到了本質(zhì)作用,注意,女的name屬性值后面有一個(gè)checked屬性,這個(gè)屬性是默認(rèn)屬性,就是一進(jìn)頁面女就被選中了,這樣就可以使我們的代碼看起來更加規(guī)范

checkbox 多選框

多選框在制作頁面時(shí)不經(jīng)常用到,它經(jīng)常被用于簽訂某個(gè)協(xié)議或確定某種規(guī)則時(shí)會被用到,相信大家對這個(gè)很熟悉吧

:同意下方協(xié)議

?

file上傳文件

?input 占位文本(用來提示信息),用在文本框和密碼框中

屬性名:placeholder

賬號:

2.selected下拉菜單

selected嵌套o(hù)ption,selected是下拉菜單整體,option是下拉菜單的每一項(xiàng)

上海

北京

長春

杭州

深圳

?

如果想要默認(rèn)選某一個(gè)可以在option屬性后面加一個(gè)selected

textarea文本域?

文本更大的輸入框,可以自定大小,也可以多行輸入

label標(biāo)簽

1.增大點(diǎn)擊范圍:提示:支持 label 標(biāo)簽增大點(diǎn)擊范圍的表單控件:文本框、密碼框、上傳文件、單選框、多選框、下拉菜單、文本域等等。

2.網(wǎng)頁中,某個(gè)標(biāo)簽的說明文本

男

我們正常情況下想選中單選框,必須點(diǎn)那個(gè)選項(xiàng)點(diǎn),當(dāng)我們添加了label屬性,我們現(xiàn)在也可以通過點(diǎn)擊'男'從而選中我們這個(gè)性別了

?

button按鈕(由于實(shí)現(xiàn)后頁面沒有實(shí)際效果,所以這里就不和大家細(xì)講了)

type屬性作用submit?提交按鈕，點(diǎn)擊后可以提交數(shù)據(jù)到后臺(默認(rèn)功能)reset??重置按鈕，點(diǎn)擊后將表單控件恢復(fù)默認(rèn)值,想實(shí)現(xiàn)在外面加上formbutton?普通按鈕，默認(rèn)沒有功能，一般配合JavaScript 使用

OK到這里關(guān)于前端html我就大概講完了,如果大家覺得我講的還不錯可以給一個(gè)免費(fèi)的贊哦,你的支持是我默大的幫助

柚子快報(bào)激活碼778899分享：前端HTML

http://yzkb.51969.com/

好文閱讀

BOL出海優(yōu)選站

<thead id="jyyru"><tbody id="jyyru"></tbody></thead>