柚子快報激活碼778899分享：前端HTML

http://yzkb.51969.com/

?前言:

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

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

前端快捷鍵:

下面是我經常用到的一些標簽,大家可以作為參考

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

字符實體:

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

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

空格 <<>>

HTML的注釋:

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

路徑

相對路徑:

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

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

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

同一文件的下一級就加/

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

1.直接復制文件里面的地址

2.復制別人的圖片地址

標簽:

標簽的種類:

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

這是一個雙標簽

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

標簽的關系:

并列:

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

段落標簽

嵌套:

下面一個標簽在另一個標簽里面就是嵌套關系(就像父子關系)

標題標簽:

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

這是一級標簽

這是二級標簽

這是三級標簽

段落標簽:

這是一個段落標簽

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

圖像標簽

img標簽

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

音頻標簽:

audio標簽

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

視頻標簽:

video標簽

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

超鏈接標簽?

a標簽

超鏈接

?

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

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

列表:

有序列表標簽ul嵌套li標簽? ul是無序列表，li是列表條目有序列表標簽ol嵌套li標簽? ol是有序列表，li是列表條目定義列表 dl嵌套dt和dd dl是定義列表 dt是定義列表的標題 ddd是定義列表的描述/詳情

?無序列表

• 1
• 2
• 3
• 4

?有序列表

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

?

定義列表?

購物指南

購物流程

支付方式

售后規(guī)則

配送方式

配送運費

配送時間

配送范圍

關于我們

平臺規(guī)則

聯(lián)系我們

問題反饋

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

表格:

table標簽

tr 行 , th 表頭單元格 , td 內容單元格

標簽table嵌套tr,tr嵌套td/th?

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

?效果:

?

合并單元格：

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

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

?

?效果:

?

表單:

1.input標簽?

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

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

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

賬號:

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

密碼:

?

radio 單選框

女

男

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

男

女

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

checkbox 多選框

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

:同意下方協(xié)議

?

file上傳文件

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

屬性名:placeholder

賬號:

2.selected下拉菜單

selected嵌套option,selected是下拉菜單整體,option是下拉菜單的每一項

上海

北京

長春

杭州

深圳

?

如果想要默認選某一個可以在option屬性后面加一個selected

textarea文本域?

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

label標簽

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

2.網頁中,某個標簽的說明文本

男

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

?

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

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

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

柚子快報激活碼778899分享：前端HTML

http://yzkb.51969.com/

好文閱讀

BOL出海優(yōu)選站