Web 前端 - HTML - 列表、表格和内联框架以及其他一些常用的元素
一、列表
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. 分析
| 序号 |
标签 |
描述 |
| 1 |
<ul> |
定义无序列表 |
| 2 |
<ol> |
定义有序列表 |
| 3 |
<li> |
定义列表项 |
- 列表分为无序列表和有序列表
- 无序列表无排列顺序可言，而有序列表根据排列顺序排列
- 无序列表在编排内容块时很常用
- 列表是前端三大重要元素中的其中一个，其他两个分别为表格和表单
二、表格
- 表格用来展示并列出详细数据时极其方便
- 表格是前端三大重要元素中的其中一个，其他两个分别为列表和表单
1. 标签
| 序号 |
标签 |
描述 |
| 1 |
<table> |
定义表格 |
| 2 |
<colgroup> |
对表格中的列进行格式化 |
| 3 |
<col> |
对表格中的列应用样式 |
| 4 |
<caption> |
定义表格的标题 |
| 5 |
<thead> |
定义表格的表头内容 |
| 6 |
<tbody> |
定义表格的主体内容 |
| 7 |
<tfoot> |
定义表格的底部内容 |
| 8 |
<tr> |
定义行 |
| 9 |
<th> |
定义表头单元格 |
| 10 |
td |
定义单元格 |
2. 属性
| 序号 |
属性 |
描述 |
适用元素 |
| 1 |
border |
添加表格框 |
<table> |
| 2 |
cellspacing |
设置单元格边框间隙 |
<table> |
| 3 |
cellpadding |
设置单元格内边距 |
<table> |
| 4 |
span |
设置横跨的列的数量 |
<col> |
| 5 |
colspan |
设置整合行的单元格的数量 |
<td> |
| 6 |
rowspan |
设置整合列的单元格的数量 |
<td> |
| 7 |
align |
设置单元格内容水平居中 |
所有元素 |
| 8 |
bgcolor |
设置背景色 |
所有元素 |
| 9 |
width |
设置宽度 |
所有元素 |
| 10 |
height |
设置高度 |
所有元素 |
3. 实例
<!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>手机号码</th> </tr> </thead> <tbody align="center"> <tr> <td rowspan="2">开发部</td> <td>贾皓轩</td> <td>男</td> <td>1351685****</td> </tr> <tr> <!--<td>开发部</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>
三、内联框架
- html5 中只保留了内联框架元素
<iframe> - 常用属性
| 属性 |
描述 |
src |
框架中加载的页面 URL |
srcdoc |
直接赋值 html 代码 |
name |
框架名称,与<a target=""配合 |
scrolling |
是否显示滚动条, yes/no/auto |
width |
框架宽度 |
height |
框架高度 |
frameborder |
是否显示框架边框 |
marginheight |
设置框架上下外边距 |
marginwidth |
设置框架左右外边距 |
四、其他元素
1. 结构元素
| 序号 |
标签 |
描述 |
| 1 |
<div> |
定义一个区块 |
| 2 |
<span> |
定义一个行内区块 |
2. 语义化结构元素
| 序号 |
标签 |
描述 |
| 1 |
<header> |
定义头部部分 |
| 2 |
<main> |
定义主体部分 |
| 3 |
<section> |
定义某区域部分 |
| 4 |
<aside> |
定义侧边栏内容部分 |
| 5 |
<footer> |
定义底部部分 |
3. 文本元素
| 序号 |
标签 |
描述 |
| 1 |
<h1>-<h6> |
定义标题，数字越小标题尺寸越大 |
| 2 |
<p> |
定义段落 |
| 3 |
<pre> |
定义预格式化文本 |
| 4 |
<code> |
定义代码 |
| 5 |
<strong> |
定义头部部分 |
4. 链接、图像和音视频
| 序号 |
标签 |
描述 |
| 1 |
<link> |
定义文档与外部资源的关系 |
| 2 |
<a> |
定义超链接 |
| 3 |
<img> |
定义图像 |
| 4 |
<audio> |
定义音频 |
| 5 |
<video> |
定义视频 |
| 6 |
<source> |
定义音视频的资源 |
五、课程总结
- 今天学习了HTML中常用的标签，通过上课认真听讲和认真完成老师布置的作业，使得我对HTML的理解和运用更加深入和熟悉。最主要的知识点是明白了列表、表格和表单在网页制作和网站开发中的重要性，以及了解并熟悉了列表、表格和其他一些常用标签的用法。
