目錄

一、列表標(biāo)簽

1.無序列表

2.有序列表

3.自定義列表

二、表格標(biāo)簽

表格標(biāo)簽的屬性

合并單元格?

三、表單標(biāo)簽

表單的type屬性

四、JS預(yù)留標(biāo)簽

五、下拉菜單標(biāo)簽

下拉菜單標(biāo)簽屬性屬性

六、文本域標(biāo)簽

文本域標(biāo)簽的屬性

七、范圍之內(nèi)選中標(biāo)簽

八、語義化標(biāo)簽

1.沒有語義化標(biāo)簽

2.有語義化標(biāo)簽(常用于手機(jī)網(wǎng)頁開發(fā))

九、知識(shí)補(bǔ)充

?總結(jié)?

---

一、列表標(biāo)簽

1.無序列表

父級(jí)別:<ul>無序列表的標(biāo)題</ul>? ? ????????? ? --表示無序列表的整體，用于包裹li標(biāo)簽
子級(jí)別:<li>無序列表一行的內(nèi)容</li> ??????????--表示無序列表的每一項(xiàng)，用于包含一行的內(nèi)容

語義：構(gòu)建沒有順序的列表
特點(diǎn):

• 列表的每一項(xiàng)前面默認(rèn)顯示黑色小圓點(diǎn)

注意事項(xiàng)：

• ul標(biāo)簽只允許包含li標(biāo)簽
• li標(biāo)簽可以包含任何內(nèi)容

<ul>水果列表<li>榴蓮</li><li>哈密瓜</li> </ul>

2.有序列表

父級(jí)別: <ol>有序列表的標(biāo)題</ol> ?????---表示有序列表的整體，用于包裹li標(biāo)簽
子級(jí)別: <li>有序列表一行的內(nèi)容</li> ????----表示有序列表的每一項(xiàng),用于包含一行的內(nèi)容

語義: 構(gòu)建有順序的列表
特點(diǎn):

• 列表中的每一項(xiàng)前面默認(rèn)顯示排列序號(hào)

注意事項(xiàng):

• ol標(biāo)簽只允許包含li標(biāo)簽
• li標(biāo)簽可以包含任何內(nèi)容

<ol>蔬菜列表<li>青菜</li><li>白菜</li> </ol>

3.自定義列表

相比于有序和無序，它提供了更簡(jiǎn)潔和帶縮進(jìn)的選擇
父級(jí)別:<dl>自定義列表的標(biāo)題</dl>? ? ? ? ---表示自定義列表的整體，用于包裹dt和dd標(biāo)簽
子級(jí)別:<dt>自定義列表一行的內(nèi)容，默認(rèn)不縮進(jìn)</dt>? ? ?----示自定義列表的每一項(xiàng),用于包含一行的內(nèi)容
子級(jí)別:<dd>自定義列表一行的內(nèi)容，默認(rèn)縮進(jìn)</dd>? ? ? ----表示自定義列表的每一項(xiàng),用于包含一行的內(nèi)容
兄弟級(jí)別:<dt></dt> <dd></dd> ???

語義：構(gòu)建自定義列表
特點(diǎn)：

• dd前會(huì)默認(rèn)顯示縮進(jìn)效果

注意事項(xiàng)：

• dl標(biāo)簽只允許包含dt和dd標(biāo)簽
• dt/dd標(biāo)簽可以包含任何內(nèi)容?

<dl>你需要？<dt>幫助中心</dt><dt>客服信息</dt><dd>賬戶管理</dd><dd>訂單操作</dd> </dl>

二、表格標(biāo)簽

父級(jí)別：<table></table> ????????????--表格的整體，可用于包裹多個(gè)tr
子級(jí)別:<tr></tr> ???????????????????--表格每行，可用于包裹td
子級(jí)別:<caption>表格的標(biāo)題</caption> --表格 外 的大標(biāo)題，自動(dòng)表格頭居中效果
子子級(jí)別:<th>單元格內(nèi)容</th> ????????--表格單元格，可用于包裹內(nèi)容,自帶加粗居中效果--常作為表頭
子子級(jí)別:<td>單元格內(nèi)容</td> ????????--表格單元格，可用于包裹內(nèi)容
兄弟級(jí)別<th></th> <td></td>

語義：構(gòu)建表格
特點(diǎn):

• 表格的形式呈現(xiàn)

注意事項(xiàng)：

• 標(biāo)簽的嵌套關(guān)系:table>tr=caption>th=tr

<table><caption>家庭</caption><tr> <th>直系</th><td>大哥</td> ? <td>小弟</td></tr><tr><th>旁系</th><td>朋友</td> ?<td>兄弟</td> </tr> </table>

表格標(biāo)簽的屬性

border="" ? --控制表格 邊框 的寬度 width="" ? ?--控制 表格 寬度 height="" ? --控制 表格 高度 注意事項(xiàng)： 實(shí)際開發(fā)針對(duì)樣式效果以CSS為主 <table border="3"><caption>植物</caption><tr><th>水果</th><th>蔬菜</th></tr><tr><td>蘋果</td><td>青菜</td></tr><tr><td>梨</td><td>瓜</td></tr> </table> ? ?

合并單元格?

垂直合并（跨行合并）
水平合并（跨列合并）
合并單元格步驟

明確合并哪幾個(gè)單元格

通過左上原則，確定保留誰刪除誰

上下合并一只保留最上的，刪除其他

左右合并一只保留最左的，刪除其他給保留的單元格設(shè)置:跨行合并 (rowspan)或者跨列合并 (colspan)

屬性名

• rowspan
• colspan

屬性值

• 合并單元格的個(gè)數(shù)
• 合并單元格的個(gè)數(shù)

說明

• 跨行合并，將多行的單元格垂直合并
• 跨列合并，將多列的單元格水平合并

注意事項(xiàng):
只有同一個(gè)結(jié)構(gòu)標(biāo)簽中的單元格才能合并，不能跨結(jié)構(gòu)標(biāo)簽合并 (不能跨: thead、tbody、tfoot)

三、表單標(biāo)簽

1.input系列標(biāo)簽
????????<input>
語義：構(gòu)建表單
特點(diǎn):

• input標(biāo)簽可以通過type屬性值不同，來展示不同的效果
• 單標(biāo)簽

注意事項(xiàng)：

• 相鄰input標(biāo)簽沒有換行

表單的type屬性

type屬性值：
1.text? ? ? ? ? ?????????文本框
2.password ?????????密碼框
3.radio? ? ? ? ?????????單選框
4.checkbox ?????????多選框
5.file? ? ? ? ?????????? ?文件上傳框
6.reset? ? ????????? ? ?重置按鈕
7.submit? ????????? ? 提交按鈕

placeholder屬性 提示字屬性,提示用戶輸入內(nèi)容的文本 <input type="text" name="" id="" placeholder="請(qǐng)輸入"> text值 輸入文本框 <input type="text" placeholder="輸入賬戶">注冊(cè) password值 輸入密碼框 <input type="password" placeholder="輸入密碼">密碼 radio值 多選一的單選 常配合一起的屬性: name：用于單選的分組，從而實(shí)現(xiàn)單選功能 checked:默認(rèn)提前選中 溫馨提示: 具有相同name的單選框?yàn)橐唤M，一組中只能有一個(gè)被選中，不同組之間可以多選 <input type="radio">一 ?<input type="radio">二 <br> <input type="radio" checked>三1 <input type="radio">三2 checkbox值 實(shí)現(xiàn)多選 常配合一起的屬性: checked:默認(rèn)提前選中 <input type="checkbox" checked >香蕉 ?<input type="checkbox" >蘋果 file值 實(shí)現(xiàn)上傳文件 常配合一起的屬性: multiple:實(shí)現(xiàn)上傳多個(gè)文件 默認(rèn)上傳單個(gè) <input type="file" >上傳單個(gè)文件 <input type="file" multiple >上傳多個(gè)文件 reset值 清空表單所填的內(nèi)容 <input type="reset" values="清空表單"> submit值 用于提交表單信息給數(shù)據(jù)庫后臺(tái) <input type="submit" values="提交">

四、JS預(yù)留標(biāo)簽

button 按鈕標(biāo)簽
<button></button>
語義:普通按鈕，默認(rèn)無功能，一般配合js使用
特點(diǎn):

• 雙標(biāo)簽

溫馨提示：

• 谷歌瀏覽器button默認(rèn)是提交按鈕
• button是雙標(biāo)簽，便于包裹其他內(nèi)容：文字\圖片等

屬性值:

• reset?
• submit
• button

五、下拉菜單標(biāo)簽

<select >
? ? <option > </option>
</select>
父級(jí)別:select?
子級(jí)別:option
特點(diǎn)：

• 雙標(biāo)簽

下拉菜單標(biāo)簽屬性屬性

selected屬性:默認(rèn)選中這個(gè)option <select>地址<option>上海</option><!-- 默認(rèn)選中 --><option selected>廣東</option> <option>江西</option></select>

六、文本域標(biāo)簽

<textarea ></textarea>
語義：提供可輸入多行文本的表單控件
特點(diǎn):

• 雙標(biāo)簽
• 可調(diào)整文本域大小

注意事項(xiàng)：

• 右下角拖拽可以改變大小
• 實(shí)際開發(fā)以css來針對(duì)樣式效果

文本域標(biāo)簽的屬性

cols:控制文本域?qū)挾?rows:控制文本域高度 <textarea rows="10" cols="10"></textarea>

七、范圍之內(nèi)選中標(biāo)簽

<label>?</label>
語義：提供可輸入多行文本的表單控件
特點(diǎn):

• 雙標(biāo)簽
• 可調(diào)整文本域大小

使用方法 1.使用lableb標(biāo)簽把整個(gè)包裹起來 2.再把for屬性刪除 <label><input type="radio" name="" id="">男</label>

八、語義化標(biāo)簽

1.沒有語義化標(biāo)簽

<div></div>
<span></span>
作用：用于配合使用css進(jìn)行網(wǎng)頁布局使用
兩者區(qū)別：

• div是獨(dú)占一行的
• span只占需要行

<div>div</div> <div>div</div> <span>span</span> <span>span</span>

2.有語義化標(biāo)簽(常用于手機(jī)網(wǎng)頁開發(fā))

空格字符 &nbsp 實(shí)現(xiàn)一個(gè)空格

九、知識(shí)補(bǔ)充

---

?總結(jié)?

總結(jié)

以上是生活随笔為你收集整理的HTML基础二的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。