HTML标签-排版标签、媒体标签、列表标签、表格标签、表单标签、语义化标签、字符实体
一、排版標(biāo)簽
1、標(biāo)題標(biāo)簽
在新聞和文章的頁面中都離不開標(biāo)題,用來突出顯示文章主題。
h系列標(biāo)題
<body><h1>1級(jí)標(biāo)題</h1> <h2>2級(jí)標(biāo)題</h2><h3>3級(jí)標(biāo)題</h3> <h4>4級(jí)標(biāo)題</h4> <h5>5級(jí)標(biāo)題</h5> <h6>6級(jí)標(biāo)題</h6></body>1-6級(jí)標(biāo)題,重要程度依次遞減,
文字都有加粗變大作用,并且從h1——h6逐漸減小
獨(dú)占一行
h1標(biāo)簽對(duì)于網(wǎng)頁尤為重要,開發(fā)中有特定的使用場(chǎng)景,如:新聞標(biāo)題,網(wǎng)頁的logo部分等。
2、段落標(biāo)簽
在文章和新聞頁面中,用于分段顯示
<p>我是一段文字</p>
段落之間存在間隙,獨(dú)占一行
<h1>關(guān)雎</h1><p>關(guān)關(guān)雎鳩,在河之洲。窈窕淑女,君子好逑。參差荇菜,左右流之。窈窕淑女,寤寐求之。求之不得,寤寐思服。悠哉悠哉,輾轉(zhuǎn)反側(cè)。</p><p>參差荇菜,左右采之。窈窕淑女,琴瑟友之。參差荇菜,左右芼之。窈窕淑女,鐘鼓樂之。</p>3、換行標(biāo)簽
<br>? ?讓文字強(qiáng)制換行顯示
<h1>關(guān)雎</h1> <p>關(guān)關(guān)雎鳩,在河之洲。窈窕淑女,君子好逑。<br>參差荇菜,左右流之。窈窕淑女,寤寐求之。<br>求之不得,寤寐思服。悠哉悠哉,輾轉(zhuǎn)反側(cè)。</p> <p>參差荇菜,左右采之。窈窕淑女,琴瑟友之。<br>參差荇菜,左右芼之。窈窕淑女,鐘鼓樂之。</p>4、水平線標(biāo)簽
<hr>? 分割不同主題內(nèi)容的水平線,單標(biāo)簽,在頁面中顯示一條水平線
<h1>關(guān)雎</h1><hr> <p>關(guān)關(guān)雎鳩,在河之洲。窈窕淑女,君子好逑。</p><hr> <p>參差荇菜,左右流之。窈窕淑女,寤寐求之。</p><hr> <p>求之不得,寤寐思服。悠哉悠哉,輾轉(zhuǎn)反側(cè)。</p><hr> <p>參差荇菜,左右采之。窈窕淑女,琴瑟友之。</p><hr> <p>參差荇菜,左右芼之。窈窕淑女,鐘鼓樂之。</p><hr>5、文本格式化標(biāo)簽
5.1標(biāo)簽介紹
需要讓文字加粗、下劃線、傾斜、刪除線等效果
| 標(biāo)簽 | 說明 |
| b | 加粗 |
| u | 下劃線 |
| i | 傾斜 |
| s | 刪除線 |
| 標(biāo)簽 | 說明 |
| strong | 加粗 |
| ins | 下劃線 |
| em | 傾斜 |
| del | 刪除線 |
? ? ? ? ?
突出重要的強(qiáng)調(diào)語境
<b>加粗</b> <u>下劃線</u> <i>傾斜</i> <s>刪除線</s><br><strong>加粗</strong> <ins>下劃線</ins> <em>傾斜</em> <del>刪除線</del>5.2、標(biāo)簽語義化
實(shí)際項(xiàng)目中選擇標(biāo)簽的原則:標(biāo)簽語義化
? ? ? ? 即:根據(jù)語義選擇正確的標(biāo)簽
? ? ? ? 如:需要寫標(biāo)題就用h系列的標(biāo)簽
? ? ? ? ? ? ? 需要寫段落就用p標(biāo)簽
? ? ? ? ? ? ? .......
好處:好理解,好記憶,有利于機(jī)器解析
推薦:strong 、ins 、em、 del ,表示的強(qiáng)調(diào)語義更強(qiáng)烈!
二、媒體標(biāo)簽
1、圖片標(biāo)簽
1.1在網(wǎng)頁中顯示圖片
<img src="路徑" alt="替換文本 "? title=" ">
屬性名:src
屬性值:目標(biāo)圖片的路徑
當(dāng)前網(wǎng)頁和目標(biāo)圖片在同一個(gè)文件夾中,路徑直接寫目標(biāo)圖片的名字即可(包括后綴名)
<img src="./4.jpg" alt="我是替換文本">屬性名:alt
屬性值:替換文本
當(dāng)圖片加載失敗時(shí)才顯示alt的文本,加載成功則不顯示
<img src="./4.jpg" alt="我是替換文本" title="我是提示文本">屬性名:title
屬性值:提示文本
當(dāng)鼠標(biāo)懸停時(shí)才顯示的文本,title屬性不僅可以用于圖片標(biāo)簽,還可以用于其他標(biāo)簽
<h1 title="我是標(biāo)題">我是1級(jí)標(biāo)題</h1>1.2圖片標(biāo)簽的width和height屬性
屬性名:width? ? height
屬性值:寬度? ? ?高度
如果只設(shè)置width? 或? height 中的一個(gè),另一個(gè)沒設(shè)置的會(huì)自動(dòng)等比例縮放(此時(shí)圖片不會(huì)變形);
如果同時(shí)設(shè)置了width 和 height? 兩個(gè),若設(shè)置不當(dāng)則圖片可能會(huì)變形;
1.3路徑
頁面加載需要的圖片,需要先根據(jù)對(duì)應(yīng)的地址路徑找到圖片
1.3.1絕對(duì)路徑
目錄下的絕對(duì)位置,可以直接到達(dá)目標(biāo)位置,通常從盤符開始;
例如:
盤符開始:D:\DAY01\images\1.ipg
完整的網(wǎng)絡(luò)地址:http://www.itcast.cn/images/logo.gif
1.3.2相對(duì)路徑(常用)
當(dāng)前文件:當(dāng)前的html網(wǎng)頁
目標(biāo)文件:要找到的圖片
相對(duì)路徑:從當(dāng)前文件開始觸發(fā)尋找目標(biāo)文件的過程
相對(duì)路徑分類:同級(jí)目錄、下級(jí)目錄、上級(jí)目錄
同級(jí)目錄:當(dāng)前文件和目標(biāo)文件在同一目錄中
類似于:我(當(dāng)前文件)和你(目標(biāo)文件)都在一個(gè)房間中
代碼步驟:直接寫目標(biāo)文件的名字即可
? ? ? ? <img src="目標(biāo)圖片.jpg">
? ? ? ? <img src="./目標(biāo)圖片.jpg">
下級(jí)目錄:目標(biāo)文件在下級(jí)目錄中
類似于:我在客廳,你去臥室,我要找到你
代碼步驟:先知道在哪個(gè)文件夾里面----文件夾名字
? ? ? ? ? ? ? ? 進(jìn)入這個(gè)文件夾------/
? ? ? ? ? ? ? ? 此時(shí)看到目標(biāo)文件直接喊-----直接寫目標(biāo)文件的名字
上級(jí)目錄:目標(biāo)文件在上級(jí)目錄中
類似于;我去臥室,而你還在客廳
代碼步驟:先出當(dāng)前文件,到上一級(jí)目錄----? ?../?
? ? ? ? ? ? ? ? 此時(shí)看到目標(biāo)文件直接喊-----直接寫目標(biāo)文件
2.音頻標(biāo)簽
<audio?src="./music.mp3"?controls></audio>
| 屬性名 | 功能 |
| src | 音頻的路徑 |
| controls | 顯示播放的控件 |
| autoplay | 自動(dòng)播放(部分瀏覽器不支持) |
| loop | 循環(huán)播放 |
音頻標(biāo)簽?zāi)壳爸С秩N格式:MP3、Wav 、Ogg
3、視頻標(biāo)簽
<video?src="./video.mp4"?controls></video>
| 屬性名 | 功能 |
| src | 視頻路徑 |
| controls | 顯示播放的控件 |
| autoplay | 自動(dòng)播放(谷歌瀏覽器中需配合muted實(shí)現(xiàn)靜音播放) |
| loop | 循環(huán)播放 |
視頻標(biāo)簽?zāi)壳爸С秩N格式:MP4、WebM?、Ogg
4、鏈接標(biāo)簽
點(diǎn)擊之后從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面
稱呼:a標(biāo)簽、超鏈接、錨鏈接
<a?href="./目標(biāo)網(wǎng)頁.html">超鏈接</a>
雙標(biāo)簽,內(nèi)部可以包裹內(nèi)容
如果需要a標(biāo)簽點(diǎn)擊之后去指定頁面,需要設(shè)置a標(biāo)簽的href屬性
<a href="https://www.baidu.com">去百度</a>4.1?、屬性名:href
屬性值:點(diǎn)擊之后去跳轉(zhuǎn)到哪一個(gè)網(wǎng)頁(目標(biāo)網(wǎng)頁的路徑)
外部鏈接:<a?href="http://www.baidu.com">去百度</a>
內(nèi)部鏈接:<a?href="./目標(biāo)網(wǎng)頁.html">目標(biāo)網(wǎng)頁</a>
?顯示特點(diǎn):a標(biāo)簽?zāi)J(rèn)文字有下劃線
? ? ? ? ? ? ? ? ?a標(biāo)簽從未顯示過,默認(rèn)文字顯示藍(lán)色
? ? ? ? ? ? ? ? ?a標(biāo)簽點(diǎn)擊過之后,文字為紫色(清除瀏覽器歷史記錄可恢復(fù)藍(lán)色)
4.2、屬性:target
屬性值;目標(biāo)網(wǎng)頁的打開形式
| 取值 | 效果 |
| _self | 默認(rèn)值,在當(dāng)前窗口中跳轉(zhuǎn)(覆蓋原網(wǎng)頁) |
| _blank | 在新窗口中跳轉(zhuǎn)(保留原網(wǎng)頁) |
4.3、空鏈接
<a?href="#">空鏈接</a>
功能:點(diǎn)擊之后回到網(wǎng)頁頂部;
? ? ? ? ? 開發(fā)中不確定該鏈接的最終跳轉(zhuǎn)位置,用空鏈接占個(gè)位置
三、列表標(biāo)簽
1、無序列表 ul? ?li
在網(wǎng)頁中展示沒有順序之分
ul:表示無序列表的整體,用于包裹標(biāo)簽;
li:表示無序列表中的每一項(xiàng),用于包含每一行的內(nèi)容;
顯示特點(diǎn):列表的每一項(xiàng)前默認(rèn)顯示原點(diǎn)標(biāo)識(shí);
注意:ul標(biāo)簽中只允許包含li標(biāo)簽,但li標(biāo)簽中可以包含任意內(nèi)容;
<h2>水果</h2><ul><li>蘋果</li><li>香蕉</li><li>梨</li><li>提子</li><li>哈密瓜</li></ul>2、有序列表? ?ol? li
在網(wǎng)頁中展示有順序之分,如排行榜
ol:表示有序列表的整體;
li:表示有序列表的每一項(xiàng),用于包含每一項(xiàng)的內(nèi)容;
顯示特點(diǎn):列表的每一項(xiàng)前默認(rèn)顯示序號(hào)標(biāo)識(shí);
注意:ol標(biāo)簽中只允許包含li標(biāo)簽,但li標(biāo)簽中可以包含任意內(nèi)容;
<h2>水果</h2><ol><li>蘋果</li><li>香蕉</li><li>梨</li><li>提子</li><li>哈密瓜</li></ol>3、自定義列表? dl? dt? dd
在網(wǎng)頁的底部導(dǎo)航中通常會(huì)使用自定義列表實(shí)現(xiàn)。
dl:表示自定義列表的整體,用于包裹dt/dd標(biāo)簽;
dt:表示自定義列表的主題;
dd:表示自定義列表的針對(duì)主題的每一項(xiàng)內(nèi)容;
顯示特點(diǎn):dd前會(huì)默認(rèn)顯示縮進(jìn)效果
注意點(diǎn):dl標(biāo)簽中只允許包含dt/dd標(biāo)簽;
? ? ? ? ? ? ? dt/dd標(biāo)簽可以包含任意內(nèi)容。
<dl><dt>水果</dt><dd>蘋果</dd><dd>香蕉</dd><dd>梨</dd><dd>提子</dd><dd>哈密瓜</dd></dl>四、表格標(biāo)簽
1、表格的基本標(biāo)簽? ? table? tr? td
在網(wǎng)頁中以行+列的單元格的方式整齊展示數(shù)據(jù),如學(xué)生成績(jī)表
table:表格整體,可用于包裹多個(gè)tr
tr:表格每行,可用于包裹多個(gè)td
td:表格單元格,可用于包裹內(nèi)容
標(biāo)簽的嵌套關(guān)系:table > tr?> td
<table><tr><td>姓名</td><td>成績(jī)</td><td>評(píng)分</td></tr><tr><td>張三</td><td>50</td><td>C</td></tr><tr><td>李四</td><td>80</td><td>B</td></tr><tr><td>王五</td><td>100</td><td>A</td></tr></table>2、表格的相關(guān)屬性? border? ?width? height
設(shè)置表格基本展示效果
border:值為數(shù)字,代表邊框?qū)挾?#xff1b;
width:值為數(shù)字,代表表格寬度;
height:值為數(shù)字,代表表格高度;
實(shí)際開發(fā)針對(duì)樣式效果推薦使用CSS設(shè)置
<table border="1" width="250" height="150"><tr><td>姓名</td><td>成績(jī)</td><td>評(píng)分</td></tr><tr><td>張三</td><td>50</td><td>C</td></tr><tr><td>李四</td><td>80</td><td>B</td></tr><tr><td>王五</td><td>100</td><td>A</td></tr></table>3、表格標(biāo)題和表頭單元格標(biāo)簽? caption? ?th
在表格中表示整體大標(biāo)題和一列小標(biāo)題
caption:表示表格整體大標(biāo)題,默認(rèn)在表格整體頂部居中的位置顯示;
th:表頭單元格,表示一列小標(biāo)題,通常用于表格第一行,默認(rèn)內(nèi)部文字加粗并居中顯示;
注意點(diǎn):caption標(biāo)簽寫在table標(biāo)簽內(nèi)部;
? ? ? ? ? ? ? th標(biāo)簽書寫在tr標(biāo)簽內(nèi)部(用于替換td標(biāo)簽)
<table border="1" width="250" height="150"><caption><h3>成績(jī)表</h3></caption><tr><th>姓名</th><th>成績(jī)</th><th>評(píng)分</th></tr><tr><td>張三</td><td>50</td><td>C</td></tr><tr><td>李四</td><td>80</td><td>B</td></tr><tr><td>王五</td><td>100</td><td>A</td></tr></table>4、表格的結(jié)構(gòu)標(biāo)簽
讓表格的內(nèi)容結(jié)構(gòu)分組,突出表格的不同部分(頭部、主體、底部),使語義更加清晰;
thead:表格頭部
tbody:表格主體
tfoot:表格底部
表格結(jié)構(gòu)標(biāo)簽內(nèi)部用于包裹tr標(biāo)簽;表格的結(jié)構(gòu)標(biāo)簽可以省略。
<tbody><tr><th>姓名</th><th>成績(jī)</th><th>評(píng)分</th></tr></tbody>5、合并單元格
步驟:1、明確合并哪幾個(gè)單元格
? ? ? ? ? 2、通過左上原則,確定保留誰刪除誰
? ? ? ? ? ? ? ? 上下合并,只保留最上的,刪除其他
? ? ? ? ? ? ? ? 左右合并,只保留最左的,刪除其他
? ? ? ? 3、給保留的單元格設(shè)置:跨行合并(rowspan)或者跨列合并(colspan)
rowspan:合并單元格的個(gè)數(shù),跨行合并,將多行的單元格垂直合并
colspan:合并單元格的個(gè)數(shù),跨列合并,將多行的單元格水平合并
只有同一個(gè)結(jié)構(gòu)標(biāo)簽中的單元格才能合并,不能跨結(jié)構(gòu)標(biāo)簽合并。
<table border="1" width="250" height="150"><caption><h3>成績(jī)表</h3></caption><thead><tr><th>姓名</th><th>成績(jī)</th><th>評(píng)分</th></tr></thead><tr><td>張三</td><td rowspan="2">50</td><td>C</td></tr><tr><td>李四</td><td>B</td></tr><tr><td>王五</td><td colspan="2">100</td></tr></table>?五、表單標(biāo)簽
1、input系列
在網(wǎng)頁中顯示收集用戶信息的表單效果,如:登錄頁、注冊(cè)頁
標(biāo)簽名:input
input標(biāo)簽可以根據(jù)type屬性值的不同,展示不同的效果
type屬性值:
| 標(biāo)簽名 | type屬性值 | 說明 |
| input | text | 文本框。用于輸入單行文本 |
| input | password | 密碼框,用于輸入密碼 |
| input | radio | 單選框,用于多選一 |
| input | checkbox | 多選框,用于多選多 |
| input | file | 文件選擇,用于之后上傳文件 |
| input | submit | 提交按鈕,用于提交 |
| input | reset | 重置按鈕,用于重置 |
| input | button | 普通按鈕,默認(rèn)無功能,之后配合js添加功能 |
1.1、文本框??
在網(wǎng)頁中顯示輸入單行文本的表單控件
type屬性值:text
placeholder:占位符,提示用戶輸入內(nèi)容的文本;
1.2、value屬性和name屬性
value屬性:用戶輸入的內(nèi)容,提交之后會(huì)發(fā)送給后端服務(wù)器;
name屬性:當(dāng)前控件的含義,提交之后可以告訴后端發(fā)送過去的數(shù)據(jù)是什么含義;
后端接收數(shù)據(jù)的格式是:name的屬性值 = value的屬性值
1.3、密碼框
在網(wǎng)頁中顯示輸入密碼控件
type屬性值:password
placeholder:占位符,提示用戶輸入內(nèi)容的文本;
1.4、單選框
在網(wǎng)頁中顯示多選一的單選表單控件
type屬性值:radio
name:分組,有相同name屬性值的單選框?yàn)橐唤M,一組中同時(shí)只能有一個(gè)被選中;
checked:默認(rèn)選中
1.5、多選框
在網(wǎng)頁中顯示多選多的多選表單控件
type屬性值:checkbox
checked:默認(rèn)選中
1.6、文件選擇
在網(wǎng)頁中顯示選擇文件的表單控件
type屬性值:file
multiple:多文件選擇
1.7、按鈕
在網(wǎng)頁中顯示不同功能按鈕的表單控件
type屬性值:
submit:提交按鈕,點(diǎn)擊之后提交數(shù)據(jù)給后端服務(wù)器;
reset:重置按鈕,點(diǎn)擊之后恢復(fù)表單默認(rèn)值;
button:普通按鈕,默認(rèn)無功能,之后配合js添加功能;
注意:
如果需要實(shí)現(xiàn)以上按鈕功能,需要配合form標(biāo)簽使用;
form使用方法:用form標(biāo)簽把表單標(biāo)簽統(tǒng)一包裹起來即可;
<form>昵稱:<input type="text" placeholder="請(qǐng)輸入你的昵稱"><br>密碼:<input type="password" placeholder="請(qǐng)輸入你的密碼"><br>性別:<input type="radio" name="sex" checked>男<input type="radio" name="sex">女<br>愛好:<input type="checkbox" checked>足球<input type="checkbox" checked>籃球<input type="checkbox">乒乓球<br><input type="file" multiple><br><input type="submit"><input type="reset"><input type="button" value="普通按鈕"></form>
2、button按鈕標(biāo)簽
在網(wǎng)頁中顯示用戶點(diǎn)擊的按鈕
標(biāo)簽名:button
type屬性值:
submit:提交按鈕,點(diǎn)擊之后提交數(shù)據(jù)給后端服務(wù)器;
reset:重置按鈕,點(diǎn)擊之后恢復(fù)表單默認(rèn)值;
button:普通按鈕,默認(rèn)無功能,之后配合js添加功能;
注意點(diǎn):
谷歌瀏覽器中button默認(rèn)是提交按鈕;
button是雙標(biāo)簽,更便于包裹其他內(nèi)容,如文字圖片等;
昵稱:<input type="text" placeholder="請(qǐng)輸入你的昵稱"><br><button type="submit">提交</button><br><button type="reset">重置</button><br><button type="button">普通按鈕</button>3、select下拉菜單標(biāo)簽
在網(wǎng)頁中提供多個(gè)選擇項(xiàng)的下拉菜單表單控件
標(biāo)簽組成:
select標(biāo)簽:下拉菜單的整體;
option標(biāo)簽:下拉菜單的每一項(xiàng);
常見屬性:selected:下拉菜單的默認(rèn)選中;
所在城市<select><option>北京</option><option>上海</option><option>廣州</option><option>深圳</option></select>4、text area文本域標(biāo)簽
在網(wǎng)頁中提供可輸入多行文本的表單控件
標(biāo)簽名:textarea
常見屬性:
cols:規(guī)定了文本域內(nèi)可見寬度;
rows:規(guī)定了文本域內(nèi)可見行數(shù);
注意點(diǎn):右下角拖拽改變大小;
? ? ? ? ? ? ? 實(shí)際開發(fā)時(shí)針對(duì)樣式效果推薦使用CSS
<textarea cols="200" rows="10"></textarea>5、label標(biāo)簽
用于綁定內(nèi)容與表單標(biāo)簽的關(guān)系
標(biāo)簽名:label?
使用方法1:1)使用label標(biāo)簽把內(nèi)容(文本)包裹起來;
? ? ? ? ? ? ? ? 2)在表單標(biāo)簽上添加id屬性;
? ? ? ? ? ? ? ? 3)在label標(biāo)簽的for屬性中設(shè)置對(duì)應(yīng)的id屬性值;
使用方法2:1)直接使用label標(biāo)簽把內(nèi)容(文本)和表單標(biāo)簽一起包裹起來;
? ? ? ? ? ? ? ? 2)需要把label標(biāo)簽的for屬性刪除即可;
愛好:<input type="checkbox" id="one" ><label for="one">足球</label><input type="checkbox" id="two" ><label for="two">籃球</label>愛好:<label><input type="checkbox">足球</label><label><input type="checkbox">籃球</label>六、語義化標(biāo)簽
1、沒有語義的布局標(biāo)簽
實(shí)際開發(fā)網(wǎng)頁時(shí)會(huì)大量頻繁的使用到 div 和 span 這兩個(gè)沒有語義的布局標(biāo)簽;
div:一行只顯示一個(gè)(獨(dú)占一行);
span:一行可以顯示多個(gè);
<div>我是一個(gè)div</div><div>我是一個(gè)div</div><div>我是一個(gè)div</div><span>我是一個(gè)span</span><span>我是一個(gè)span</span><span>我是一個(gè)span</span>?2、有語義的布局標(biāo)簽
| 標(biāo)簽名 | 語義 |
| header | 網(wǎng)頁頭部 |
| nav | 網(wǎng)頁導(dǎo)航 |
| footer | 網(wǎng)頁底部 |
| aside | 網(wǎng)頁側(cè)邊欄 |
| section | 網(wǎng)頁區(qū)塊 |
| article | 網(wǎng)頁文章 |
以上標(biāo)簽的顯示特點(diǎn)和 div 一致,但是比 div 多了不同的語義。
七、字符實(shí)體
能通過字符實(shí)體在網(wǎng)頁中顯示特殊符號(hào)
1、HTML中的空格合并現(xiàn)象
如果在HTML代碼中同時(shí)并列出現(xiàn)多個(gè)空格、換行、縮進(jìn)等,最終瀏覽器只會(huì)解析出一個(gè)空格。
在網(wǎng)頁中展示特殊字符效果時(shí),需要使用字符實(shí)體替代
結(jié)構(gòu):&英文
常見字符實(shí)體:
| 顯示結(jié)果 | 描述 | 實(shí)體名稱 |
| 空格 | | |
| < | 小于 | < |
| > | 大于 | > |
八、綜合案例
1、優(yōu)秀學(xué)生信息表格
<table border="1" width="300" height="150"><caption><h3>優(yōu)秀學(xué)生信息表格</h3></caption><thead><tr><th>年級(jí)</tH><th>姓名</th><th>學(xué)號(hào)</th><th>班級(jí)</th></tr></thead><tbody height=300><tr><th rowspan="2">高三</th><th>張三</th><th>110</th><th>三年二班</th></tr><tr><th>趙四</th><th>120</th><th>三年三班</th></tr></tbody><tfoot><tr><th>評(píng)語</th><th colspan="3">優(yōu)秀</th></tr></tfoot></table>2、會(huì)員注冊(cè)表單
<form><h1>青春不常在,抓緊談戀愛</h1><hr>昵稱:<input type="text" placeholder="請(qǐng)輸入昵稱"><br>性別:<input type="radio" name="sex">男<input type="radio" name="sex">女<br>生日:<input type="date"><br>城市:<select><option>上海</option><option>北京</option><option>廣州</option><option>深圳</option></select><br>婚姻狀況:<input type="radio" name="marry" checked>未婚<input type="radio" name="marry">已婚<input type="radio" name="marry">保密<br>興趣愛好:<label><input type="checkbox" checked>抽煙</label><label><input type="checkbox" checked>喝酒</label><label><input type="checkbox">燙頭</label><br>個(gè)人信息:<br><textarea cols="40" rows="5"></textarea><br><h2>我承諾</h2><ul><li>年滿18歲,單身</li><li>抱著嚴(yán)肅的心態(tài)</li><li>真誠尋找另一半</li></ul><input type="checkbox">我同意所有條款<br><input type="submit" value="免費(fèi)注冊(cè)"><input type="reset"> </form>總結(jié)
以上是生活随笔為你收集整理的HTML标签-排版标签、媒体标签、列表标签、表格标签、表单标签、语义化标签、字符实体的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 在Linux系统中的安装cpolar内网
- 下一篇: B站Up主-山地人-这位老哥2019年的