目錄

一、列表標簽

1.無序列表

2.有序列表

3.自定義列表

二、表格標簽

表格標簽的屬性

合并單元格?

三、表單標簽

表單的type屬性

四、JS預留標簽

五、下拉菜單標簽

下拉菜單標簽屬性屬性

六、文本域標簽

文本域標簽的屬性

七、范圍之內選中標簽

八、語義化標簽

1.沒有語義化標簽

2.有語義化標簽(常用于手機網頁開發)

九、知識補充

?總結?

---

一、列表標簽

1.無序列表

父級別:<ul>無序列表的標題</ul>? ? ????????? ? --表示無序列表的整體，用于包裹li標簽
子級別:<li>無序列表一行的內容</li> ??????????--表示無序列表的每一項，用于包含一行的內容

語義：構建沒有順序的列表
特點:

• 列表的每一項前面默認顯示黑色小圓點

注意事項：

• ul標簽只允許包含li標簽
• li標簽可以包含任何內容

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

2.有序列表

父級別: <ol>有序列表的標題</ol> ?????---表示有序列表的整體，用于包裹li標簽
子級別: <li>有序列表一行的內容</li> ????----表示有序列表的每一項,用于包含一行的內容

語義: 構建有順序的列表
特點:

• 列表中的每一項前面默認顯示排列序號

注意事項:

• ol標簽只允許包含li標簽
• li標簽可以包含任何內容

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

3.自定義列表

相比于有序和無序，它提供了更簡潔和帶縮進的選擇
父級別:<dl>自定義列表的標題</dl>? ? ? ? ---表示自定義列表的整體，用于包裹dt和dd標簽
子級別:<dt>自定義列表一行的內容，默認不縮進</dt>? ? ?----示自定義列表的每一項,用于包含一行的內容
子級別:<dd>自定義列表一行的內容，默認縮進</dd>? ? ? ----表示自定義列表的每一項,用于包含一行的內容
兄弟級別:<dt></dt> <dd></dd> ???

語義：構建自定義列表
特點：

• dd前會默認顯示縮進效果

注意事項：

• dl標簽只允許包含dt和dd標簽
• dt/dd標簽可以包含任何內容?

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

二、表格標簽

父級別：<table></table> ????????????--表格的整體，可用于包裹多個tr
子級別:<tr></tr> ???????????????????--表格每行，可用于包裹td
子級別:<caption>表格的標題</caption> --表格 外 的大標題，自動表格頭居中效果
子子級別:<th>單元格內容</th> ????????--表格單元格，可用于包裹內容,自帶加粗居中效果--常作為表頭
子子級別:<td>單元格內容</td> ????????--表格單元格，可用于包裹內容
兄弟級別<th></th> <td></td>

語義：構建表格
特點:

• 表格的形式呈現

注意事項：

• 標簽的嵌套關系: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>

表格標簽的屬性

border="" ? --控制表格 邊框 的寬度 width="" ? ?--控制 表格 寬度 height="" ? --控制 表格 高度 注意事項： 實際開發針對樣式效果以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> ? ?

合并單元格?

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

明確合并哪幾個單元格

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

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

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

屬性名

• rowspan
• colspan

屬性值

• 合并單元格的個數
• 合并單元格的個數

說明

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

注意事項:
只有同一個結構標簽中的單元格才能合并，不能跨結構標簽合并 (不能跨: thead、tbody、tfoot)

三、表單標簽

1.input系列標簽
????????<input>
語義：構建表單
特點:

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

注意事項：

• 相鄰input標簽沒有換行

表單的type屬性

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

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

四、JS預留標簽

button 按鈕標簽
<button></button>
語義:普通按鈕，默認無功能，一般配合js使用
特點:

• 雙標簽

溫馨提示：

• 谷歌瀏覽器button默認是提交按鈕
• button是雙標簽，便于包裹其他內容：文字\圖片等

屬性值:

• reset?
• submit
• button

五、下拉菜單標簽

<select >
? ? <option > </option>
</select>
父級別:select?
子級別:option
特點：

• 雙標簽

下拉菜單標簽屬性屬性

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

六、文本域標簽

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

• 雙標簽
• 可調整文本域大小

注意事項：

• 右下角拖拽可以改變大小
• 實際開發以css來針對樣式效果

文本域標簽的屬性

cols:控制文本域寬度 rows:控制文本域高度 <textarea rows="10" cols="10"></textarea>

七、范圍之內選中標簽

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

• 雙標簽
• 可調整文本域大小

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

八、語義化標簽

1.沒有語義化標簽

<div></div>
<span></span>
作用：用于配合使用css進行網頁布局使用
兩者區別：

• div是獨占一行的
• span只占需要行

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

2.有語義化標簽(常用于手機網頁開發)

空格字符 &nbsp 實現一個空格

九、知識補充

---

?總結?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。