Web 前端 - HTML - 列表、表格和內(nèi)聯(lián)框架以及其他一些常用的元素
一、列表
1. 源碼
<ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li></ul><ol> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li></ol>
2. 分析
| 序號 |
標(biāo)簽 |
描述 |
| 1 |
<ul> |
定義無序列表 |
| 2 |
<ol> |
定義有序列表 |
| 3 |
<li> |
定義列表項 |
- 列表分為無序列表和有序列表
- 無序列表無排列順序可言，而有序列表根據(jù)排列順序排列
- 無序列表在編排內(nèi)容塊時很常用
- 列表是前端三大重要元素中的其中一個，其他兩個分別為表格和表單
二、表格
- 表格用來展示并列出詳細(xì)數(shù)據(jù)時極其方便
- 表格是前端三大重要元素中的其中一個，其他兩個分別為列表和表單
1. 標(biāo)簽
| 序號 |
標(biāo)簽 |
描述 |
| 1 |
<table> |
定義表格 |
| 2 |
<colgroup> |
對表格中的列進(jìn)行格式化 |
| 3 |
<col> |
對表格中的列應(yīng)用樣式 |
| 4 |
<caption> |
定義表格的標(biāo)題 |
| 5 |
<thead> |
定義表格的表頭內(nèi)容 |
| 6 |
<tbody> |
定義表格的主體內(nèi)容 |
| 7 |
<tfoot> |
定義表格的底部內(nèi)容 |
| 8 |
<tr> |
定義行 |
| 9 |
<th> |
定義表頭單元格 |
| 10 |
td |
定義單元格 |
2. 屬性
| 序號 |
屬性 |
描述 |
適用元素 |
| 1 |
border |
添加表格框 |
<table> |
| 2 |
cellspacing |
設(shè)置單元格邊框間隙 |
<table> |
| 3 |
cellpadding |
設(shè)置單元格內(nèi)邊距 |
<table> |
| 4 |
span |
設(shè)置橫跨的列的數(shù)量 |
<col> |
| 5 |
colspan |
設(shè)置整合行的單元格的數(shù)量 |
<td> |
| 6 |
rowspan |
設(shè)置整合列的單元格的數(shù)量 |
<td> |
| 7 |
align |
設(shè)置單元格內(nèi)容水平居中 |
所有元素 |
| 8 |
bgcolor |
設(shè)置背景色 |
所有元素 |
| 9 |
width |
設(shè)置寬度 |
所有元素 |
| 10 |
height |
設(shè)置高度 |
所有元素 |
3. 實(shí)例
<!DOCTYPE html><html lang="zh_hans"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>表格</title></head><body> <table border="1" cellspacing="0" align="center" width="400px"> <colgroup> <col bgcolor="lightgreen" /> <col span="3" bgcolor="lightpink" /> </colgroup> <caption style="font-size: larger; font-weight: bold; margin-bottom: 5px;">員工信息表</caption> <thead align="center"> <tr> <th>所屬部門</th> <th>姓名</th> <th>性別</th> <th>手機(jī)號碼</th> </tr> </thead> <tbody align="center"> <tr> <td rowspan="2">開發(fā)部</td> <td>賈皓軒</td> <td>男</td> <td>1351685****</td> </tr> <tr> <!--<td>開發(fā)部</td>--> <td>戴建明</td> <td>男</td> <td>1558494****</td> </tr> </tbody> <tbody align="center"> <tr> <td rowspan="2">測試部</td> <td>徐濱海</td> <td>男</td> <td>1583131****</td> </tr> <tr> <!--<td>測試部</td>--> <td>沈婉</td> <td>女</td> <td>1769782****</td> </tr> </tbody> <tfoot align="center"> <tr> <td>備注</td> <td colspan="3">離職需要提前30天申請</td> <!--<td></td>--> <!--<td></td>--> </tr> </tfoot> </table></body></html>
三、內(nèi)聯(lián)框架
- html5 中只保留了內(nèi)聯(lián)框架元素
<iframe> - 常用屬性
| 屬性 |
描述 |
src |
框架中加載的頁面 URL |
srcdoc |
直接賦值 html 代碼 |
name |
框架名稱,與<a target=""配合 |
scrolling |
是否顯示滾動條, yes/no/auto |
width |
框架寬度 |
height |
框架高度 |
frameborder |
是否顯示框架邊框 |
marginheight |
設(shè)置框架上下外邊距 |
marginwidth |
設(shè)置框架左右外邊距 |
四、其他元素
1. 結(jié)構(gòu)元素
| 序號 |
標(biāo)簽 |
描述 |
| 1 |
<div> |
定義一個區(qū)塊 |
| 2 |
<span> |
定義一個行內(nèi)區(qū)塊 |
2. 語義化結(jié)構(gòu)元素
| 序號 |
標(biāo)簽 |
描述 |
| 1 |
<header> |
定義頭部部分 |
| 2 |
<main> |
定義主體部分 |
| 3 |
<section> |
定義某區(qū)域部分 |
| 4 |
<aside> |
定義側(cè)邊欄內(nèi)容部分 |
| 5 |
<footer> |
定義底部部分 |
3. 文本元素
| 序號 |
標(biāo)簽 |
描述 |
| 1 |
<h1>-<h6> |
定義標(biāo)題，數(shù)字越小標(biāo)題尺寸越大 |
| 2 |
<p> |
定義段落 |
| 3 |
<pre> |
定義預(yù)格式化文本 |
| 4 |
<code> |
定義代碼 |
| 5 |
<strong> |
定義頭部部分 |
4. 鏈接、圖像和音視頻
| 序號 |
標(biāo)簽 |
描述 |
| 1 |
<link> |
定義文檔與外部資源的關(guān)系 |
| 2 |
<a> |
定義超鏈接 |
| 3 |
<img> |
定義圖像 |
| 4 |
<audio> |
定義音頻 |
| 5 |
<video> |
定義視頻 |
| 6 |
<source> |
定義音視頻的資源 |
五、課程總結(jié)
- 今天學(xué)習(xí)了HTML中常用的標(biāo)簽，通過上課認(rèn)真聽講和認(rèn)真完成老師布置的作業(yè)，使得我對HTML的理解和運(yùn)用更加深入和熟悉。最主要的知識點(diǎn)是明白了列表、表格和表單在網(wǎng)頁制作和網(wǎng)站開發(fā)中的重要性，以及了解并熟悉了列表、表格和其他一些常用標(biāo)簽的用法。
批改老師：
天蓬老師
批改狀態(tài)：合格
老師批語：標(biāo)簽是基礎(chǔ)
收藏
技術(shù)交流群
