1. HTML簡(jiǎn)介

用戶使用瀏覽器打開網(wǎng)頁看到結(jié)果的過程就是：瀏覽器將服務(wù)端的文本文件（即網(wǎng)頁文件）內(nèi)容下載到本地，然后打開顯示的過程。

而文本文件的文檔結(jié)構(gòu)只有空格和黃航兩種組織方式，如此，文本文件在打開顯示時(shí)，顯示的效果將會(huì)非常的單一。

為了讓顯示的效果不那么單調(diào)，我們會(huì)偏向會(huì)使用

我們會(huì)偏向使用word一類的文本編輯工具來編排文本內(nèi)容，編排的原理就是：在編輯文件時(shí)會(huì)選中各部分內(nèi)容，然后為內(nèi)容打上不同的標(biāo)記，比如什么是標(biāo)題，什么是段落，然后存放硬盤里，等下次打開時(shí)，word會(huì)識(shí)別之前的標(biāo)記，然后按照預(yù)先編排好的結(jié)果顯示出來。

站在顯示文本內(nèi)容的角度去看，瀏覽器與word的原理一樣，我們可以將瀏覽器當(dāng)成一個(gè)網(wǎng)頁版的只讀word，瀏覽器也必須有一套自己能識(shí)別的標(biāo)記文本的規(guī)范，該規(guī)范被稱為HTML,HTML全稱是超文本標(biāo)記語言（HyperText Markup Language）。

“超文本”指的是用超鏈接的方法，將各種不同空間的文字信息組織在一起的網(wǎng)狀文本。

“標(biāo)記”指的是在編輯文本時(shí)用特殊的記號(hào)標(biāo)記一下各部分內(nèi)容的意義，該記號(hào)稱之為標(biāo)簽，比如用標(biāo)簽h1標(biāo)記標(biāo)題，用標(biāo)簽p標(biāo)簽段落，如此我們標(biāo)記一首唐詩就成了如下格式：

靜夜思

床前明月光

疑是地上霜

舉頭望明月

低頭思故鄉(xiāng)

這樣瀏覽器在接收到文本內(nèi)容后，就可以按照事先規(guī)定好的記號(hào)去顯示各部分的內(nèi)容，顯示結(jié)果如下圖

2. HTML標(biāo)簽與文檔結(jié)構(gòu)

一個(gè)網(wǎng)頁可以沒有樣式，可以沒有交互，但是必須要有網(wǎng)頁需要呈現(xiàn)的內(nèi)容，而HTML作為一門標(biāo)記語言，是通過各種各樣的標(biāo)簽來標(biāo)記網(wǎng)頁內(nèi)容的，所以HTML部分是整個(gè)前端的基礎(chǔ)，我們學(xué)習(xí)HTML主要就是學(xué)習(xí)的HTML標(biāo)簽。

HTML中的標(biāo)簽存放于文本文件中，需要按照下述固定的文檔結(jié)構(gòu)組織：

<!DOCTYPE HTML>
<html>
<head>...</head>
<body>...</body>
</html>

# 1. <!DOCTYPE HTML>
<!DOCTYPE HTML>是文檔聲明，必須寫在HTML文檔的第一行，位于<html>標(biāo)簽之前，表明該文檔是HTML5文檔。

# 2. <html></html>
<html></html>稱為根標(biāo)簽，所有的網(wǎng)頁標(biāo)簽都在<html></html>中。
HTML的lang屬性可用于網(wǎng)頁或部分網(wǎng)頁的語言。通常用于搜索引擎和瀏覽器的統(tǒng)計(jì)分析，不定義也沒什么影響。
根據(jù)W3C推薦標(biāo)準(zhǔn)，您應(yīng)該通過<html>標(biāo)簽中的lang屬性對(duì)每張頁面中的主要語言進(jìn)行聲明，比如：<html lang='en'></html>

# 3. <head></head>
<head></head>標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。常見的頭部元素有<title>,<script>,<script>,<link>和<meta>等標(biāo)簽，頭部標(biāo)簽在下一節(jié)中會(huì)有詳細(xì)介紹，
<head>與</head>之間的內(nèi)容不會(huì)在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義。
# 4. <body></body>
在<body>和</body>標(biāo)簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容，最終會(huì)在瀏覽器中顯示出來。

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

并列(兄弟/平級(jí))

head與body
嵌套（父子/上下級(jí)）

html內(nèi)有body

2.2. HTML標(biāo)簽詳細(xì)語法與注意點(diǎn)

標(biāo)簽的語法:

雙標(biāo)簽

<標(biāo)簽名屬性1=“值1” 屬性2=“值2” …… >內(nèi)容部分</標(biāo)簽名>
單標(biāo)簽

<標(biāo)簽名屬性1=“值1” 屬性2=“值2” …… />

標(biāo)簽注意事項(xiàng)

記好/標(biāo)簽是不會(huì)顯示出來的
標(biāo)簽只是用來做記號(hào)而不負(fù)責(zé)控制樣式：雖然用
標(biāo)記的文本在顯示時(shí)會(huì)被加大加粗，但請(qǐng)務(wù)必記住，HTML的作用只有一個(gè)它是專門用來對(duì)文件做記號(hào)來表示其語義的（語義指的是該文本是做什么用的），加大和加粗這種為文本添加樣式的操作并不是HTML擅長(zhǎng)的，雖然早期的時(shí)候確實(shí)也用HTML來制作樣式，但以后我們專門用CSS來做這件事，這也是一種解耦合的思想。
HTML標(biāo)簽不區(qū)分大小寫，<h1>和<H1>是一樣的，但是我們通常建議使用小寫，大部分程序員都以小寫為準(zhǔn)。
HTML中部分標(biāo)簽是可以嵌套的。例如：
?
,但不能交叉
?

?

幾個(gè)很重要的屬性

id:定義標(biāo)簽的唯一ID，HTML文檔樹中唯一
class：為HTML元素定義一個(gè)或多個(gè)類名(classname)（CSS樣式類名）
style：規(guī)定元素的行內(nèi)樣式(CSS樣式)

2.3. HTML中標(biāo)簽分類

但從是否可以嵌套子標(biāo)簽的角度去分，標(biāo)簽分為兩類

容器類標(biāo)簽

容器標(biāo)簽可以簡(jiǎn)單的理解為能嵌套其他所有標(biāo)簽的標(biāo)簽

常見的容器級(jí)的標(biāo)簽：

h系列

ul>li

ol>li

dl>dt+dd

div

文本類標(biāo)簽

文本級(jí)的標(biāo)簽對(duì)應(yīng)容器級(jí)標(biāo)簽，只能嵌套文字/圖片/超鏈接的標(biāo)簽。

常見文本的標(biāo)簽：

span

strong

ins

del

分類2

塊級(jí)標(biāo)簽：獨(dú)占一行

p,h1~h6,div
行內(nèi)標(biāo)簽：自身文本多大就占多大

span,b,i,s

2.4 HTML注釋

無論我們學(xué)習(xí)什么編程語言，一定要重視的就是注釋，HTML中注釋的格式:

注意：注釋中可以直接使用回車換行。

并且我們習(xí)慣用注釋的標(biāo)簽把HTML代碼包裹起來。如：

這里放你xx部分的HTML代碼

HTML注釋的注意事項(xiàng)：

HTML注釋不支持嵌套。
HTML注釋不能寫在HTML標(biāo)簽中

3. head內(nèi)常用標(biāo)簽

< meta > 是HTML的元素，在網(wǎng)頁頭部標(biāo)簽內(nèi)定義，可提供與網(wǎng)頁有關(guān)的結(jié)構(gòu)化元數(shù)據(jù)，即網(wǎng)頁源信息(meta_information).網(wǎng)頁上并不會(huì)顯示這些元信息，但計(jì)算機(jī)可以識(shí)別他們。

在pycharm中寫HTML代碼，只需要寫標(biāo)簽名，尖括號(hào)可以不寫，Tab鍵補(bǔ)全

< meta > 相關(guān)標(biāo)簽

指定字符集
頁面描述

< meta name="Description" content="具體描述" >
關(guān)鍵字：有助于所有引擎SEC優(yōu)化，再怎么優(yōu)化也抵不過競(jìng)價(jià)排名

< meta name="Description" content="網(wǎng)易，騰訊，游戲，新聞" >網(wǎng)頁面描述

< meta name="keyword" content="網(wǎng)易，騰訊，游戲，新聞" >關(guān)鍵字描述，搜索關(guān)鍵字都能搜到此網(wǎng)頁
3秒后跳轉(zhuǎn)

< meta name="Description" content="3,baidu.com" >
三秒刷新

< meta http-equiv="refresh" content="3" >

非meta相關(guān)標(biāo)簽

標(biāo)題

< title >百度一下，你就知道
網(wǎng)站的圖標(biāo)
定義內(nèi)部樣式
引入外部樣式文件
定義JavaScript代碼或引入JavaScript文件

4.body內(nèi)常用標(biāo)簽

4.1. HTML語義化

body中的標(biāo)簽是會(huì)顯示到瀏覽器窗口的，body內(nèi)的標(biāo)簽只有一個(gè)作用就是用來標(biāo)記語義的，語義指的是從字面意思就可以理解被標(biāo)記內(nèi)容是用來做什么的

雖然不同的標(biāo)簽會(huì)有不同的顯示樣式，但我們一定要強(qiáng)制自己忘記標(biāo)簽的顯示樣式，只記它的語義，因?yàn)槊總€(gè)標(biāo)簽的樣式各不同，記憶不同標(biāo)簽的樣式來控制顯示樣式，對(duì)前端開發(fā)來說將會(huì)是一種災(zāi)難，更何況添加并不是HTML擅長(zhǎng)的事情，而且在布局的時(shí)候使用語義化的標(biāo)簽，會(huì)方便搜索引擎在爬取網(wǎng)頁文件時(shí)更好地解析文檔結(jié)構(gòu)，從而進(jìn)行收錄。

提醒：對(duì)于那些只用來修改樣式的標(biāo)簽將會(huì)被淘汰掉!

4.2. 字符實(shí)體

在HTML中對(duì)空格/回車/tab不敏感，會(huì)把多個(gè)空格/回車/tab當(dāng)作一個(gè)空格來處理。

字符實(shí)體指的是在HTML中，有的字符是被HTML保留的比如大于號(hào)小于號(hào)

有的HTML字符，在HTML中是有特殊含義的，是不能在瀏覽器中直接顯示出來那么這些東西向顯示出來就必須通過字符實(shí)體

4.3.h系列標(biāo)簽

H系列標(biāo)簽標(biāo)記內(nèi)容為一個(gè)標(biāo)題，全稱headline

h系列標(biāo)簽從h1-h6共6個(gè)，沒有h7標(biāo)簽，標(biāo)記內(nèi)容為1~6級(jí)標(biāo)題，h1用作主標(biāo)題（代表最重要的），其次是h2。。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>勇敢牛牛不怕困難</title>
</head>
<body>
    <h1>一級(jí)標(biāo)題</h1>
    <h2>二級(jí)標(biāo)題</h2>
    <h3>三級(jí)標(biāo)題</h3>
    <h4>四級(jí)標(biāo)題</h4>
    <h5>五級(jí)標(biāo)題</h5>
    <h6>六級(jí)標(biāo)題</h6>
    

</body>
</html>

注意1：沒有六級(jí)以上的標(biāo)題

注意2：雖然h1-h6標(biāo)簽的顯示樣式是從大到小，但再次強(qiáng)調(diào)：HTML標(biāo)簽的顯示樣式是沒有意義的

注意3：在企業(yè)開發(fā)中一定要慎用h寫列標(biāo)簽，特別是h1標(biāo)簽，在企業(yè)開發(fā)中一般一個(gè)界面中只能出現(xiàn)一個(gè)h1標(biāo)簽（處于搜索引擎優(yōu)化考慮，搜索引擎會(huì)使用標(biāo)題將網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引）

4.4. p標(biāo)簽

p標(biāo)簽標(biāo)記內(nèi)容為一個(gè)段落，全稱paragraph

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>勇敢牛牛不怕困難</title>
</head>
<body>
    <h1>勇敢蛙蛙</h1>
    <p>蛙蛙，娃娃，哇哇</p>
    <p>不怕困難</p>

</body>
</html>

4.5. img標(biāo)簽

img標(biāo)簽為標(biāo)記一個(gè)圖片，全稱image，具體的用法是：

< img src="圖片地址" alt="圖片加載失敗時(shí)顯示的內(nèi)容" title = "鼠標(biāo)懸停到圖片上時(shí)顯示的內(nèi)容" />

使用img標(biāo)簽有以下的幾點(diǎn)注意事項(xiàng)

src指定的圖片地址可以使網(wǎng)絡(luò)地址，也可以是一個(gè)本地地址，本地地址可以使用絕對(duì)或相對(duì)路徑，但通常用相對(duì)路徑，相對(duì)路徑是以html文件當(dāng)前所在路徑為基準(zhǔn)進(jìn)行的
圖片的格式可以是png，jpg和gif
alt="圖片加載失敗時(shí)顯示的內(nèi)容"為img標(biāo)簽加上該屬性可用于支持搜索引擎和盲人讀屏軟件
title = "鼠標(biāo)懸停到圖片上時(shí)顯示的內(nèi)容"
如果沒有指定圖片的width和height則按照?qǐng)D片默認(rèn)的寬高顯示，如果指定圖片的width和height則可能讓圖片變形，那如果又想指定寬度和高度，又不想讓圖片變形，我們可以至指定寬度和搞得一個(gè)值即可，只要指定了一個(gè)值，系統(tǒng)會(huì)根據(jù)該值計(jì)算另外一個(gè)值，并且都是等比拉伸的，圖片不會(huì)變形。
一個(gè)p標(biāo)簽一個(gè)段落

4.6. a標(biāo)簽

a標(biāo)簽標(biāo)記一個(gè)內(nèi)容為超鏈接，全稱anchor，也被稱作錨。

超鏈接標(biāo)簽是超文本文件的精髓，可以控制頁面與頁面之間的跳轉(zhuǎn)，語法如下

< a href="跳轉(zhuǎn)到的目標(biāo)頁面地址" target=“是否在新的頁面中打開” title="鼠標(biāo)懸浮顯示的內(nèi)容">需要展現(xiàn)給用戶查看的內(nèi)容/也可以是圖片< /a>

使用a標(biāo)簽需要注意以下幾點(diǎn)：

a標(biāo)簽不僅可以標(biāo)記文字，也可以標(biāo)記圖片

< a >< img src="mv.png" />百度一下，你就知道
a標(biāo)簽必須有href屬性，href的值必須是http://或https://開頭
a標(biāo)簽還可以跳轉(zhuǎn)到自己的頁面

< a href="template/aaa.html">跳轉(zhuǎn)到自己這個(gè)頁面 < /a>
target=“_ bank”代表在新頁面中打開，其余的值均無需記憶，如果頁面中大量的a標(biāo)簽都需要設(shè)置target=" _ bankk",那么我們可以在head標(biāo)簽內(nèi)新增一個(gè)base標(biāo)簽進(jìn)行統(tǒng)一設(shè)置

< base target="_blank">

如果a標(biāo)簽自己設(shè)置了target，那么就以自己的為準(zhǔn)，否則就會(huì)參照base的設(shè)置

target：
- _blank表示在新標(biāo)簽頁中打開目標(biāo)網(wǎng)頁
- _self表示在當(dāng)前標(biāo)簽頁中打開目標(biāo)網(wǎng)頁
title="鼠標(biāo)懸浮顯示的內(nèi)容"

4.8. 其他標(biāo)簽

i 標(biāo)簽：字體變斜體
u標(biāo)簽：下劃線
s標(biāo)簽：刪除線
b標(biāo)簽：字體加粗
br標(biāo)簽：< br>換行
hr標(biāo)簽：
水平分割線

4.9. body內(nèi)特殊符號(hào)

& nbsp; 空格
& gt; 大于號(hào)
& lt; 小于號(hào)
& amp; &
& yen；￥
&copy: 版權(quán)
&reg: 注冊(cè)

4.10. div標(biāo)簽和span標(biāo)簽

div標(biāo)簽用來定義一個(gè)塊級(jí)元素，并無實(shí)際的意義。主要通過css樣式為其賦予不同的表現(xiàn)。

span標(biāo)簽用來定義內(nèi)聯(lián)（行內(nèi)）元素，并無實(shí)際的意義。主要通過CSS樣式為其賦予不同的表現(xiàn)。

塊計(jì)元素與行內(nèi)元素的區(qū)別：

塊元素：是以另起一行開始渲染的元素，

行內(nèi)元素則不需另起一行。如果單獨(dú)在網(wǎng)頁插入這兩個(gè)元素，頁面產(chǎn)生任何的影響。

這兩個(gè)元素專門為定義CSS樣式而生的。

注意：

關(guān)于標(biāo)簽嵌套：通常塊級(jí)元素可以包含內(nèi)聯(lián)元素或某些塊級(jí)元素，但內(nèi)聯(lián)元素不能包含塊級(jí)元素，他只能抱哈其他內(nèi)聯(lián)元素

p標(biāo)簽不能包含塊級(jí)標(biāo)簽，p標(biāo)簽也不能包含p標(biāo)簽

5. 列表標(biāo)簽

列表標(biāo)簽可以標(biāo)記一堆數(shù)據(jù)是一個(gè)整體或列表html中列表標(biāo)簽分為三種：

5.1. 無序列列表

提示：這是列表標(biāo)簽中使用最多的一種，非常重要，重點(diǎn)掌握

無序列表可以制作當(dāng)航條，商品列表，新聞列表等

無序列表的組合使用

ul>li

秒殺
優(yōu)惠券
PLUS會(huì)員
閃購
拍賣
京東服飾
京東超市
生鮮
全球購
京東金融

type屬性：

disc(實(shí)心圓點(diǎn)，默認(rèn)值)
circle（空心圓圈）
square（實(shí)心方塊）
none（無樣式）

注意：ul與li是組合標(biāo)簽應(yīng)該一起出現(xiàn)，并且ul的子標(biāo)錢只應(yīng)該是li，而li的子標(biāo)簽則可以是任意其他標(biāo)簽

5.2. 有序列表

提示：這種類型的列表在實(shí)際引用中并不多見；

智商排名

學(xué)生A
學(xué)生B
學(xué)生 C
學(xué)生 D
學(xué)生 E

type屬性：

1 數(shù)字列表，默認(rèn)值
A 大寫字母
a 小寫字母
Ⅰ大寫羅馬
ⅰ小寫羅馬

提示：有序列表能干的事，完全可以用無序列表取代

5.3 自定義列表（也會(huì)經(jīng)常使用）

作用分析：

選擇用什么標(biāo)簽的唯一標(biāo)準(zhǔn)，是看文本的實(shí)際語義，而不是看長(zhǎng)什么樣子。

無序列表：內(nèi)容是并列的，沒有先后順序

有序列表：內(nèi)容是由先后順序的

自定義列表：對(duì)一個(gè)題目進(jìn)行解釋說的時(shí)候，用自定義列表，可以做網(wǎng)站尾部相關(guān)信息，網(wǎng)易注冊(cè)界面的輸入框

自定義列表也是一個(gè)組合標(biāo)簽：dl>dt+dd

dl:defination list,自定義列表

dt：defination title，自定義標(biāo)題

dd：defination description，自定義描述

自定義標(biāo)題1
: 描述1; 描述2; 描述3
自定義標(biāo)題2
: 描述1; 描述2; 描述3
自定義標(biāo)題3
? ? ? ? ? 描述1
　　? ?描述2
　　? ?描述3

6. table標(biāo)簽

table標(biāo)簽可以標(biāo)記一段數(shù)據(jù)為表格。

表格標(biāo)簽是一種數(shù)據(jù)的展現(xiàn)形式，當(dāng)數(shù)據(jù)量非常大的時(shí)候，實(shí)用表格的形式來展示被認(rèn)為是最清晰的。

6.1.表格的格式

< table>

tr代表表格的一行數(shù)據(jù)的一行數(shù)據(jù)

td表一行中的一個(gè)普通單元格th標(biāo)識(shí)表頭單元格

th文字加粗

注意：表格標(biāo)簽有個(gè)邊框?qū)傩?，這個(gè)屬性決定了邊寬的寬度

默認(rèn)請(qǐng)款下這個(gè)屬性的值為0，所以看不到邊框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table>
  <thead>
  <tr>
    <th>序號(hào)</th>
    <th>姓名</th>
    <th>愛好</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>wyz</td>
    <td>睡覺</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Yuan</td>
    <td>噠噠噠</td>
  </tr>
  </tbody>
</table>
</body>
</html>

屬性:

border: 表格邊框.
cellpadding: 內(nèi)邊距
cellspacing: 外邊距.
width: 像素百分比.（最好通過css來設(shè)置長(zhǎng)寬）
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合并單元格）

6.2. 表格的結(jié)構(gòu)

為了方便管理維護(hù)以及提升語義，我們將表格中存儲(chǔ)的數(shù)據(jù)分為四類：

表格的標(biāo)題：caption

特點(diǎn)：相對(duì)于表格寬度自動(dòng)居中對(duì)齊

注意：
- 該標(biāo)簽一定要寫在table標(biāo)簽里，否則無效
- caption一定要緊跟在table標(biāo)簽內(nèi)的第一個(gè)
表格的表頭信息：thead

特點(diǎn)：專門用來存儲(chǔ)每一列的標(biāo)題，只要當(dāng)前列的標(biāo)題存儲(chǔ)在這個(gè)標(biāo)簽中就會(huì)自動(dòng)居中+加粗文字
表格的主題信息：tbody

注意：
- 如果沒有添加tbody，瀏覽器會(huì)自動(dòng)添加
- 如果制定了thead和tfoot，那么在修改整個(gè)表格的高度時(shí)，thead和tfoot有自己默認(rèn)的高度，不會(huì)隨著表格的高度變化而變化
標(biāo)為信息：tfoot

7. form標(biāo)簽（表單標(biāo)簽）

表單標(biāo)簽：能夠獲取前端用戶數(shù)據(jù)（用戶輸入的，用戶選擇，用戶上傳）基于網(wǎng)絡(luò)發(fā)送給后端服務(wù)器

< form action=""> 在該form標(biāo)簽內(nèi)部書寫的獲取用戶的數(shù)據(jù)都會(huì)被form標(biāo)簽提交到后端

action：控制數(shù)據(jù)提交的后端路徑(給那個(gè)服務(wù)端提交數(shù)據(jù))

什么都不寫默認(rèn)就是朝當(dāng)前頁面所在的url提交數(shù)據(jù)
寫全路徑：https://www.baidu.com?朝百度服務(wù)端提交
只寫路徑后綴action='/index/'
自動(dòng)識(shí)別當(dāng)前服務(wù)端的ip和port拼接到前面：host:port/index/

每個(gè)表單可以寫在labe里，這里有兩種寫法

# 第一種 直接將input框?qū)懺趌abel內(nèi)
<label for="d1">username:<input type="text" id="d1">
# 第二種 通過id鏈接即可 無需嵌套
</label>
<label for="d3">txt:</label>
<input type="text" id="d3">
placeholder="用戶名"   # 設(shè)置提示字
form表單提交文件需要注意
    1.method必須是post
    2.enctype="multipart/form-data"
      enctype類似于數(shù)據(jù)提交的編碼格式
        默認(rèn)是urlencode只能夠提交普通的文本數(shù)據(jù)
        formdata 就可以支持提交文件數(shù)據(jù)

ps：input不跟label關(guān)聯(lián)也沒有問題

label 和input都是行內(nèi)標(biāo)簽

提示：forms表單是個(gè)很重要的知識(shí)點(diǎn)

7.1. 表單的type屬性

type屬性：

text：普通文本

password：密文

date：日期

submit：用來觸發(fā)form表單提交數(shù)據(jù)的動(dòng)作，若submit沒有制定按鈕的文本內(nèi)容，不同的瀏覽器打開之后可能渲染的文本內(nèi)容不一致

button：就是一個(gè)普普通通的按鈕本身沒有任何的功能，但是他是最有用的，學(xué)了js之后可以給他自定義各種功能

reset：重置內(nèi)容

radio：?jiǎn)芜x

默認(rèn)選中要加checked="checked"
        <input type="radio" name="gender" checked="checked">女
        當(dāng)標(biāo)簽的屬性名和屬性值一樣的時(shí)候可以簡(jiǎn)寫
        <input type="radio" name="gender" checked>女
 <p>gender
        <input type="radio" name="gender" checked="checked">男
        <input type="radio" name="gender">女
        <input type="radio" name="gender">其他
 </p>
# 所有獲取用戶輸入的標(biāo)簽 都應(yīng)該有name屬性
name就類似于字典的key
用戶的數(shù)據(jù)就類似于字典的value
 <p>gender
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <input type="radio" name="gender">其他
    </p>

file：獲取文件也可以一次性獲取多個(gè)

hidden：隱藏當(dāng)前input框

? 作用：可以做釣魚網(wǎng)站

7.2. select標(biāo)簽

select標(biāo)簽?zāi)J(rèn)是單選可以加mutiple參數(shù)變多選，默認(rèn)選中selected

# 單選
<p>province
    <select name="" id="">
        <option value="">上海</option>
        <option value="">北京</option>
        <option value="">深圳</option>
    </select>
</p>
# 多選
<p>食品：
    <select name="" id="" multiple>
        <option value="" selected="selected">雞蛋</option>
        <option value="" >雞心</option>
        <option value="" >雞肝</option>
        <option value="" >雞雜</option>
        <option value="" selected="selected">雞屎</option>
    </select>
</p>

7.3. textarea標(biāo)簽

textarea標(biāo)簽：獲取大段文本

<p>自我介紹：
    <textarea name="" id="" cols="30" rows="10"></textarea>
</p>

7.4. 能夠觸發(fā)form表單提交數(shù)據(jù)的按鈕有哪些

1. <input type="submit" value="提交">
2. < button>提交</button>

本文摘自：https://www.cnblogs.com/

HTML2022-04-25 23:05:07

1. HTML簡(jiǎn)介

靜夜思

2. HTML標(biāo)簽與文檔結(jié)構(gòu)

2.2. HTML標(biāo)簽詳細(xì)語法與注意點(diǎn)

2.3. HTML中標(biāo)簽分類

2.4 HTML注釋

3. head內(nèi)常用標(biāo)簽

4.body內(nèi)常用標(biāo)簽

4.1. HTML語義化

4.2. 字符實(shí)體

4.3.h系列標(biāo)簽

4.4. p標(biāo)簽

4.5. img標(biāo)簽

4.6. a標(biāo)簽

4.8. 其他標(biāo)簽

4.9. body內(nèi)特殊符號(hào)

4.10. div標(biāo)簽和span標(biāo)簽

5. 列表標(biāo)簽

5.1. 無序列列表

5.2. 有序列表

智商排名

5.3 自定義列表（也會(huì)經(jīng)常使用）

6. table標(biāo)簽

6.1.表格的格式

6.2. 表格的結(jié)構(gòu)

7. form標(biāo)簽（表單標(biāo)簽）

7.1. 表單的type屬性

7.2. select標(biāo)簽

7.3. textarea標(biāo)簽

7.4. 能夠觸發(fā)form表單提交數(shù)據(jù)的按鈕有哪些

HTML
2022-04-25 23:05:07