免費AI編程助手
第02章-HTML5排版
2022-05-18 23:31 更新
第02章-前端核心技術(shù)-HTML5排版
項目經(jīng)理(作者)：張明星
學(xué)習(xí)目標(biāo)
- 掌握HTML表格的基本使用
- 掌握HTML表格排版的技術(shù)
重點
- 掌握HTML整體頁面排版的技術(shù)
重點難點
- 掌握HTML內(nèi)聯(lián)框架的使用場景
- 掌握HTML內(nèi)聯(lián)框架的使用方法
HTML 表格
HTML表格標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
<table> |
表格 |
<th> |
表格的表頭單元格 |
<tr> |
表格的行 |
<td> |
表格單元格 |
<caption> |
表格標(biāo)題 |
<thead> |
表格的頭部區(qū)域 |
<tbody> |
表格的中間主體部分 |
<tfoot> |
表格的底部區(qū)域 |
如下表格結(jié)構(gòu)圖
示例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<table>
<tr>
<th>第1行第1列</th>
<th>第1行第2列</th>
<th>第1行第3列</th>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
</table>
</body>
</html><table>屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| align | left 、center、 right | |
| bgcolor | rgb(x,x,x) #xxxxxx 顏色名稱 | |
| cellpadding | 像素 | |
| cellspacing | 像素 | |
| width | 像素、百分百 | |
| height | 像素、百分百 | |
| border | 像素，默認(rèn)值1 | 規(guī)定表格單元是否擁有邊框。 |
案例01
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
</head>
<body>
<table width="80%" bgcolor="aqua" align="center">
<caption>受理統(tǒng)計系統(tǒng)</caption>
<tr height="50">
<th>受理員</th>
<th>受理數(shù)</th>
<th>自辦數(shù)</th>
<th>直接解答</th>
<th>同意</th>
<th>比例</th>
<th>數(shù)量</th>
<th>比例</th>
<th>建議件</th>
<th>訴求件</th>
<th>咨詢件</th>
</tr>
<tr bgcolor="blueviolet">
<td>王艷</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="#c3c3c3">
<td>總計</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
</tr>
</table>
</body>
</html>效果展示
<th>和<td>屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| align | left、 right 、center | |
| bgcolor | rgb(x,x,x) 、#xxxxxx 、顏色名稱 | |
| height | 像素、百分百 | |
| valign | top、 middle、 bottom 、baseline | |
| width | 像素、百分百 | |
| colspan | 列數(shù) | 規(guī)定單元格可橫跨的列數(shù)。Column |
| rowspan | 列數(shù) | 設(shè)置單元格可縱跨的行數(shù)。Row |
案例02：制作計算器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>計算器</title></head>
<body>
<table border="5" cellspacing="10" cellpadding="20" align="center" bgcolor="beige">
<caption>計算器</caption>
<tr>
<td colspan="4" align="center" height="18" bgcolor="bisque"></td>
</tr>
<tr>
<td>C</td>
<td>%</td>
<td>/</td>
<td>*</td>
</tr>
<tr>
<td align="center">7</td>
<td align="center">8</td>
<td align="center">9</td>
<td align="center">+</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">1</td>
<td align="center">2</td>
<td align="center">3</td>
<td align="center" rowspan="2" bgcolor="aquamarine">=</td>
</tr>
<tr>
<td align="center">C</td>
<td align="center">0</td>
<td align="center">.</td>
</tr>
</table>
</body>
</html>效果展示
案例03：制作課程表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>課程表</title>
</head>
<body>
<table border="1" cellspacing="1" cellpadding="5">
<caption>課程表</caption>
<tr bgcolor="aquamarine">
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr>
<td rowspan="3" bgcolor="antiquewhite">上午</td>
<td>PHP</td>
<td>PHP</td>
<td>PHP</td>
<td>PHP</td>
<td>PHP</td>
<td colspan="2">自習(xí)</td>
</tr>
<tr>
<td>JAVA</td>
<td>JAVA</td>
<td>JAVA</td>
<td>JAVA</td>
<td>JAVA</td>
<td colspan="2">自習(xí)</td>
</tr>
<tr>
<td>UI</td>
<td>UI</td>
<td>UI</td>
<td>UI</td>
<td>UI</td>
<td colspan="2">自習(xí)</td>
</tr>
<tr>
<td rowspan="4" bgcolor="beige">下午</td>
<td>PHP</td>
<td>PHP</td>
<td>PHP</td>
<td>PHP</td>
<td>PHP</td>
<td colspan="2">自習(xí)</td>
</tr>
<tr>
<td>JAVA</td>
<td>JAVA</td>
<td>JAVA</td>
<td>JAVA</td>
<td>JAVA</td>
<td colspan="2">自習(xí)</td>
</tr>
<tr>
<td>UI</td>
<td>UI</td>
<td>UI</td>
<td>UI</td>
<td>UI</td>
<td colspan="2">自習(xí)</td>
</tr>
<tr>
<td>Android</td>
<td>Android</td>
<td>Android</td>
<td>Android</td>
<td>Android</td>
<td colspan="2">自習(xí)</td>
</tr>
</table>
</body>
</html>效果展示
案例04：漂亮的表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
</head>
<body>
<table width="80%" border="4" cellspacing="2" cellpadding="5" align="center" bordercolor="#CCCCCC">
<tr bgcolor="burlywood">
<td align="center" height="60" colspan="12">受理員業(yè)務(wù)統(tǒng)計表</td>
</tr>
<tr>
<td align="right" height="25" colspan="12">2017-01-02---2017-05-02</td>
</tr>
<tr bgcolor="#e9faff">
<th colspan="2" rowspan="2">受理員</th>
<th width="10%" rowspan="2">受理數(shù)</th>
<th width="10%" rowspan="2">自辦數(shù)</th>
<th width="10%" rowspan="2">直接解答</th>
<th colspan="2" >擬辦意見</th>
<th colspan="2" >返回修改</th>
<th colspan="3" >工單類型</th>
</tr>
<tr bgcolor="#f3f3f3">
<td width="8%">同意</td>
<td width="8%">比例</td>
<td width="8%">數(shù)量</td>
<td width="8%">比例</td>
<td width="8%">建議件</td>
<td width="8%">訴求件</td>
<td width="8%">咨詢件</td>
</tr>
<tr bgcolor="#f3f3f3">
<td width="7%" rowspan="4" bgcolor="#f2fbfe">受理處</td>
<td width="7%">王艷</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="#f3f3f3">
<td>王艷</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="#f3f3f3">
<td>王艷</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="#f3f3f3">
<td>總計</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
</tr>
<tr bgcolor="#f3f3f3">
<td width="7%" rowspan="4" bgcolor="#f2fbfe">話務(wù)組</td>
<td width="7%">王艷</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="#f3f3f3">
<td>王艷</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="#f3f3f3">
<td>王艷</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="#f3f3f3">
<td>王艷</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="#f3f3f3">
<td>總計</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
<td>20</td>
</tr>
</table>
</body>
</html>效果展示
案例05：制作導(dǎo)航欄
如果把整個表格看作一個整體，那么所有單元格的寬度總和應(yīng)該等于100%，
換句話說，如果給部分單元格設(shè)置寬度，并且總和小于100%，那么剩下的單元格會分?jǐn)偸Ｏ碌目臻g。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>導(dǎo)航欄</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="20">
<tr align="center" height="50px" bgcolor="coral">
<td width="10%"></td>
<td width="10%">
<img src="img/logo.svg" height="35px" />
<br/>
<i>電腦版本</i>
</td>
<td></td>
<td width="5%">
<a href="">首頁</a>
</td>
<td width="5%">
<a href="">發(fā)現(xiàn)</a>
</td>
<td width="5%">
<a href="">職位</a>
</td>
<td width="5%">
<a href="">活動</a>
</td>
<td width="5%">
<a href="">素材</a>
</td>
<td width="5%">
<a href="">課程</a>
</td>
<td width="5%">
<a href="">更多</a>
</td>
<td></td>
<td width="5%">
<a href=""><img src="img/195-magnify.png" </a>
</td>
<td width="5%">
<a href=""><img src="img/145-cloud.png" </a>
</td>
<td width="10%"></td>
</tr>
</body>
</html>效果展示
案例06：實現(xiàn)圖文排版
涉及到圖文排版的時候，圖片總是以圖片自身的寬高顯示，如果想讓圖片自動適應(yīng)上級元素的寬高，則需要給圖片添加width=“100%”。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖文排版</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="5" width="80%" align="center">
<caption><h2>圖文排版</h2></caption>
<tr align="center">
<td width="20%" colspan="3">
<img src="img/1-1.jpg" width="100%" />
</td>
<td width="20%" colspan="3">
<img src="img/1-2.jpg" width="100%" />
</td>
<td width="20%" colspan="3">
<img src="img/1-3.jpg" width="100%" />
</td>
<td width="20%" colspan="3">
<img src="img/1-4.jpg" width="100%" />
</td>
<td width="20%" colspan="3">
<img src="img/1-5.jpg" width="100%" />
</td>
</tr>
<tr align="center">
<td width="20%" colspan="3">
理是而根據(jù)彭
</td>
<td width="20%" colspan="3">
理是而根據(jù)彭
</td>
<td width="20%" colspan="3">
時間管理是而根據(jù)彭
</td>
<td width="20%" colspan="3">
理是而根據(jù)彭
</td>
<td width="20%" colspan="3">
理是而根據(jù)彭
</td>
</tr>
<tr align="center">
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
</tr>
<tr height="40"></tr>
<tr align="center">
<td width="20%" colspan="3">
<img src="img/2-1.jpg" width="100%" />
</td>
<td width="20%" colspan="3">
<img src="img/2-2.jpg" width="100%" />
</td>
<td width="20%" colspan="3">
<img src="img/2-3.jpg" width="100%" />
</td>
<td width="20%" colspan="3">
<img src="img/2-4.jpg" width="100%" />
</td>
<td width="20%" colspan="3">
<img src="img/2-5.jpg" width="100%" />
</td>
</tr>
<tr align="center">
<td width="20%" colspan="3">
理是國家而根據(jù)彭
</td>
<td width="20%" colspan="3">
理是國家而根據(jù)彭
</td>
<td width="20%" colspan="3">
時間管理是國家而根據(jù)彭
</td>
<td width="20%" colspan="3">
理是國家而根據(jù)彭
</td>
<td width="20%" colspan="3">
理是國家而根據(jù)彭
</td>
</tr>
<tr align="center">
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
<td>
<img src="img/189-eye.png" height="15" align="absmiddle" />123
</td>
<td>
<img src="img/188-target.png" height="15" align="absmiddle" />456
</td>
<td>
<img src="img/184-bar-chart.png" height="15" align="absmiddle" />789
</td>
</tr>
</table>
</body>
</html>效果展示
HTML 框架
通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。
HTML中有很多框架標(biāo)簽，但是大多數(shù)都棄用了，沿用至今的就是<iframe>
<iframe>標(biāo)簽
<iframe>語法:
<iframe src="URL"></iframe>
<iframe>屬性：
| 屬性 | 值 | 描述 |
|---|---|---|
| align | left 、right\ top、 middle 、bottom | |
| scrolling | yes、 no 、auto | <iframe> 中顯示滾動條。 |
| height | 像素 | 規(guī)定 <iframe> 的高度。 |
| name | name | 規(guī)定 <iframe>的名稱。 |
| src | URL | 規(guī)定在 <iframe> 中顯示的文檔的 URL。 |
| width | 像素 | 規(guī)定 <iframe>的寬度。 |
案例07
<iframe>可以顯示一個目標(biāo)鏈接的頁面，目標(biāo)鏈接的屬性必須使用<iframe>的name屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" height="100%" width="100%">
<tr>
<th width="15%">
<a rel="external nofollow" target="_blank" target="myframe">百度</a>
<hr/>
<a rel="external nofollow" target="_blank" target="myframe">天貓</a>
<hr/>
<a rel="external nofollow" target="_blank" target="myframe">新浪</a>
</th>
<th width="85%">
<iframe src="https://www.aliyun.com/" rel="external nofollow" name="myframe" width="100%" height="600"></iframe>
</th>
</tr>
</table>
</body>
</html>效果展示
HTML 列表
HTML列表有三種：無序列表、有序列表、自定義列表
無序列表
無序列表使用兩個標(biāo)簽，組成一個整體使用。
| 標(biāo)簽 | 描述 |
|---|---|
<ul> |
無序列表 |
<li> |
有序列表和無序列表的一個列表項 |
無序列表有三種類型，使用type屬性來設(shè)置列表的顯示符號
| 屬性 | 描述 |
|---|---|
type="circle" |
空心圓 |
type="disc" |
實心圓 |
type="square" |
實心方塊 |
示例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>無序列表</title>
</head>
<body>
<ul type="circle">
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
<ul type="disc">
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
<ul type="square">
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
</body>
</html>效果展示
案例08
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>無序列表</title>
</head>
<body>
<h4>無序列表（默認(rèn):type="disc"）</h4>
<ul>
<li>PHP</li>
<li>HTML</li>
</ul>
<h4>無序列表（type="circle"）</h4>
<ul type="circle">
<li>PHP</li>
<li>HTML</li>
</ul>
<h4>無序列表（type="square"）</h4>
<ul type="square">
<li>PHP</li>
<li>HTML</li>
</ul>
</body>
</html>效果展示
有序列表
有序列表使用兩個標(biāo)簽，組成一個整體使用。
| 標(biāo)簽 | 描述 |
|---|---|
<ol> |
有序列表 |
<li> |
有序列表和無序列表的一個列表項 |
有序列表有五種：
| 屬性 | 描述 |
|---|---|
type="1" |
數(shù)字序號 |
type="a" |
有小寫字母序號 |
type="A" |
大寫字母序號 |
type="i" |
小寫羅馬序號 |
type="I" |
大寫羅馬序號 |
示例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>有序列表</title>
</head>
<body>
<ol type="1">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<ol type="a">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<ol type="A">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<ol type="i">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<ol type="I">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
</body>
</html>效果展示
案例09
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>有無序列表</title>
</head>
<body>
<h4>有序列表（默認(rèn):type="1"）</h4>
<ol type="1">
<li>PHP</li>
<li>HTML</li>
</ol>
<h4>有序列表（默認(rèn):type="a"）</h4>
<ol type="a">
<li>PHP</li>
<li>HTML</li>
</ol>
<h4>有序列表（默認(rèn):type="A"）</h4>
<ol type="A">
<li>PHP</li>
<li>HTML</li>
</ol>
<h4>有序列表（默認(rèn):type="i"）</h4>
<ol type="i">
<li>PHP</li>
<li>HTML</li>
</ol>
<h4>有序列表（默認(rèn):type="I"）</h4>
<ol type="I">
<li>PHP</li>
<li>HTML</li>
</ol>
</body>
</html>效果展示
自定義列表
| 標(biāo)簽 | 描述 |
|---|---|
<dl> |
自定義列表 |
<dt> |
自定義列表的標(biāo)題 |
<dd> |
自定義列表的內(nèi)容 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定義列表</title>
</head>
<body>
<dl>
<dt>自定義列表</dt>
<dd>自定義列表的內(nèi)容（前面由固定長度的間距）</dd>
</dl>
</body>
</html>效果展示
案例10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>自定義列表</title>
</head>
<body>
<h4>自定義列表</h4>
<dl>
<dt>自定義列表標(biāo)題1</dt>
<dd>自定義列表選項</dd>
<dt>自定義列表標(biāo)題2</dt>
<dd>自定義列表選項</dd>
</dl>
</body>
</html>效果展示
列表嵌套
列表和其他標(biāo)簽一樣，可以想和嵌套，并且可以實現(xiàn)各種不同的效果
案例11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>列表嵌套</title>
</head>
<body>
<dl>
<dt>HTML列表</dt>
<dd>知識點梳理</dd>
<dd>
<ol>
<li>
無需列表
<ul type="circle">
<li>空心圓circle</li>
</ul>
<ul type="disc">
<li>實心圓disc</li>
</ul>
<ul type="square">
<li>實心方塊square</li>
</ul>
</li>
<li>
有需列表
<ol type="1">
<li>數(shù)字：1</li>
</ol>
<ol type="a">
<li>小寫字母a：a</li>
</ol>
<ol type="A">
<li>大寫字母a：A</li>
</ol>
<ol type="i">
<li>小寫字母a：i</li>
</ol>
<ol type="I">
<li>大寫字母a：I</li>
</ol>
</li>
<li>
自定義列表
<dl>
<dt>自定義列表標(biāo)題</dt>
<dd>自定義列表選項</dd>
</dl>
</li>
</ol>
</dd>
</dl>
</body>
</html>效果展示
以上內(nèi)容是否對您有幫助：
更多建議：