柚子快報邀請碼778899分享：前端 HTML總結(jié)

http://yzkb.51969.com/

1. 關(guān)于HTML

1.1 何為HTML

HTML是超文本標(biāo)記語言（HyperText Markup Language）的縮寫。我們用HTML來構(gòu)建web即所謂的網(wǎng)頁。

1.2 HTML特點

簡單靈活；可擴展；平臺無關(guān)性。

1.3 HTML模板

在visual studio Code軟件上你只需要在英文狀態(tài)下打一個感嘆號回車即可出現(xiàn)模板

2. 常用標(biāo)簽

（1）https://www.runoob.com/tags/html-reference.html （2）標(biāo)題標(biāo)簽：

且標(biāo)題標(biāo)簽為單標(biāo)簽 （3）段落標(biāo)簽： （4）文本加粗標(biāo)簽： 下劃線標(biāo)簽： 刪除線標(biāo)簽： （5）文本斜體標(biāo)簽： （6）圖片標(biāo)簽： （7）音頻標(biāo)簽： （8）視頻標(biāo)簽： （9）路徑：絕對路徑：網(wǎng)絡(luò)路徑或者是從盤符開始找 相對路徑：相對于當(dāng)前的一個位置 ./ 當(dāng)前文件夾 …/ 上一級文件夾 …/…/ 上上一級文件夾

2.1?strong、b標(biāo)簽

這些都是用來加粗字體的

這是注釋的部分

這是粗體

也是粗體

這是斜體

也是斜體

下劃線

刪除線

2.2 br和hr標(biāo)簽

br

標(biāo)簽是用來換行

-------

單標(biāo)簽

hr -------

水平分割線 ，單標(biāo)簽，可以設(shè)置

width

屬性表示的水平分割線的長度，

size

屬性設(shè)置的粗細

吳韜這個小孩，全世界第一可愛，大家都喜歡這個小孩。

吳韜這個小孩，全世界第一可愛，大家都喜歡這個小孩。

吳韜這個小孩，

全世界第一可愛，大家都喜歡這個小孩。

---

2.3 p標(biāo)簽

段落標(biāo)簽

兩個相鄰的

p

標(biāo)簽中間會空一行

align

屬性

------

位置

left center right,

默認值是

left

font

標(biāo)簽

------

這是字體

color

屬性：顏色

顏色的表示法：英文單詞

red black pink

#rrggbb

三原色

red green blue

吳韜你是最棒的

吳韜你是最棒的

吳韜你是最棒的

這是字體標(biāo)簽

2.4 sub、sup、pre、span標(biāo)簽

sub -----

下標(biāo)標(biāo)簽

sup ----

上標(biāo)標(biāo)簽

pre ------

用來原樣輸出內(nèi)容

span ----

修飾文本的標(biāo)簽

-----

標(biāo)準(zhǔn)的行內(nèi)標(biāo)簽

二的三次方:2³

數(shù)組a下標(biāo)是2:a₁+a₂+.......+a_n

鵝鵝鵝

[駱冰王]

鵝鵝鵝，

曲項向天歌。

白毛浮綠水，

紅掌撥清波。

鵝鵝鵝
[駱冰王]
鵝鵝鵝，
曲項向天歌。
白毛浮綠水，
紅掌撥清波。

這是一個標(biāo)準(zhǔn)的行內(nèi)標(biāo)簽?。。。?！

2.5 hn和div標(biāo)簽

hn

指的是

h1,h2,h3,h4,h5,h6 -----

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

n

取值只能是

1-6

字體越來越小 有加粗的效果

div

標(biāo)簽

----

標(biāo)準(zhǔn)的塊級標(biāo)簽

------

盒子布局

塊級標(biāo)簽：獨占一行，自動換行

div hn p hr

行內(nèi)標(biāo)簽：不能自動換行，除非這一行的文本內(nèi)容鋪滿了整個頁面才會換行

span

這是標(biāo)題

這是標(biāo)題

這是標(biāo)題

這是標(biāo)題

這是標(biāo)題

這是標(biāo)題

這是一個span標(biāo)簽

這是一個span標(biāo)簽

這是一個span標(biāo)簽

這是一個span標(biāo)簽

這是一個span標(biāo)簽

這是一個span標(biāo)簽

2.6 特殊字符

3.?表單標(biāo)簽

form

標(biāo)簽

一般會和

input 標(biāo)簽連用

action:

跳轉(zhuǎn)的路徑

絕對路徑：從盤符開始到文件名稱的全部路徑，

D:\

重大城科

\23

級前端

1202\

代碼

\

第二天

\demo01.html

相對路徑：當(dāng)前源文件和目標(biāo)文件的相對路徑，

..\

第一天

\demo01.html

method:

表單提交的方式

get post

默認是

get

name :

表單的名稱

get:

會把用戶請求的內(nèi)容暴露在地址欄上

post:

相較于

get

會安全一點

3.1 表單元素

表單元素（文本框、密碼框、下拉列表、單選、多選）

一般由

input

、

textarea

、

select

標(biāo)簽構(gòu)成，需要放到

form

里面

語法格式

type

的取值：

text ------

文本框

password ----

密碼框

radio ----

單選按鈕

checkbox -----

多選按鈕

submit ----

提交按鈕

reset -----

重置按鈕

button -----

普通的按鈕

image ----

圖像按鈕

file ----

文件域

hidden -----

隱藏域

email ------

郵箱

color -----

顏色域

date -----

日期

time ------

時間

datetime-local ------

日期

+

時間

range ----

進度條

input

標(biāo)簽常用的屬性：

checked ----

默認選擇

readonly ------

只讀 字段只可以讀不能修改

disabled -----

禁用 不可以點擊

autofocus ------

默認光標(biāo)的位置

required----

不能為空白提交

3.2?select標(biāo)簽

下拉列表框

------

一般和

option

標(biāo)簽進行連用

selected

屬性

----

默認被選中的選項

multiple

屬性

-------

以列表的形式顯示

3.3 textarea標(biāo)簽

用來實現(xiàn)文本域

cols -------

多少列，用于顯示文本的寬度

rows -------

多少行，用來顯示文本的高度

4.?常見的屬性

a

標(biāo)簽

-----

超鏈接

vlink -----

訪問過超鏈接文本的顏色

Alink ------

激活超鏈接文本的顏色

link ------

超鏈接文本的顏色

text ----

文本的顏色

bgcolor -----

背景顏色

background ------

背景圖片

顏色表示法：

1

、英文單詞

2

、

#rrggbb

3

、

rgba() a

表示透明度

5.?a標(biāo)簽

a

標(biāo)簽

-----

超文本鏈接標(biāo)簽

-----

用來進行頁面跳轉(zhuǎn)

herf = "url"

跳轉(zhuǎn)頁面的路徑

target

屬性

錨點：使用錨點，點擊錨點跳轉(zhuǎn)到指定的位置

#+id

的名字進行鏈接跳轉(zhuǎn)

6.?img標(biāo)簽

目前常見的圖片的格式：

GIF JPG PNG BMP

等

6.1?常見的屬性

src

屬性

----

指的是圖片的路徑（絕對路徑和相對路徑）

alt

屬性

------

代替圖片的文本內(nèi)容（因為路徑的問他或者因為瀏覽器的問題顯示不出來這個張圖片的

時候，

alt

屬性值就是去描述這張圖片的一個內(nèi)容）

width ------

寬度

height ----

高度

border ------

邊框，默認值

0

align -----

位置 （圖片和文字的位置）

top (

上對齊

) middle(

居中對齊

) bottom(

下對齊 默認值

) left(

左對齊

) right(

右對齊

)

title ------

圖片的標(biāo)題 ，用來顯示描述圖片的文字

6.2 位圖

usemap

屬性

map

標(biāo)簽的

name

屬性，一般會和

area

標(biāo)簽進行連用

屬性：

shape -------

鼠標(biāo)點擊的形狀

coords -----

鼠標(biāo)點擊形狀的大小

href ------

表示跳轉(zhuǎn)的路徑

7.?多媒體標(biāo)簽

audio

標(biāo)簽

----

音頻

video

標(biāo)簽

----

視頻

controls

屬性

----

表示播放器的組件

autoplay

屬性

-----

自動播放（瀏覽器不支持這個屬性值）

loop

屬性

----

循環(huán)播放

8.?表格布局

8.1 表格屬性

邊框：border=“1px” 設(shè)置表格的邊框為1px 表格的內(nèi)邊距：cellpadding = “0” 設(shè)置表格的內(nèi)邊距為0px 表格線之間的距離：cellspacing=“0” 設(shè)置表格的單元格到單元格的空間為0px 行： 列： 先有行再有列所以它是dd（弟弟） 表頭： 表格合并： 合并行：rowspan 合并列：colspan 單詞里面字母有L所以它是合并列 表格標(biāo)題： 下面是一個具體的示例：

8.2?表格的背景

bgcolor -----

背景顏色

background ----

背景圖片

8.3?表格的間距和邊距

cellpadding ------

表格邊距（表示的是單元格內(nèi)元素距離單元格邊緣的距離）

cellspacing-----

表格的間距（單元格和單元格之間的距離）

9. 列表標(biāo)簽

主要有三種：有序列表、無序列表、數(shù)據(jù)列表

9.1?有序列表 ---- ol

type

屬性

----

設(shè)置序號的種類，默認的是數(shù)字

start

屬性

-----

控制序號開始的位置

reversed

屬性

-----

降序（反序）

9.2 無序列表---- dl

type屬性 ------ 無序列表的樣式 disc(默認取值 實心圓) circle(空心圓) square（實心方框）

9.3 數(shù)據(jù)列表 ----- dl

這是標(biāo)題

這是內(nèi)容1

這是內(nèi)容2

這是內(nèi)容3

這是內(nèi)容4

這是內(nèi)容5

地方新聞

這是內(nèi)容1

這是內(nèi)容2

這是內(nèi)容3

這是內(nèi)容4

這是內(nèi)容5

國際新聞

這是內(nèi)容1

這是內(nèi)容2

這是內(nèi)容3

這是內(nèi)容4

這是內(nèi)容5

國內(nèi)新聞

這是內(nèi)容1

這是內(nèi)容2

這是內(nèi)容3

這是內(nèi)容4

這是內(nèi)容5

10.?多窗口框架

一個頁面可以顯示多個窗口

----- frameset

（不能和

body

標(biāo)簽連用）

cols ------

定義頁面列方向的尺寸或則數(shù)目

rows ----

行

柚子快報邀請碼778899分享：前端 HTML總結(jié)

http://yzkb.51969.com/

參考鏈接