![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：表格编写之前, 最好先画个图
Collection
Collection
| 名称 | 描述 |
|---|---|
<p> |
段落内容 |
<pre> |
按源码格式原样显示 |
<br> |
源码里的换行（代码里的换行会解析用来空格） |
<span> |
与<div>类似,无语义,主要用作内容的样式钩子 |
<time> |
描述日期或者时间 |
<abbr> |
缩写 |
<sub> |
上标 |
<sup> |
下标 |
<address> |
地址,通常用在<footer>中 |
<s>/<del> |
删除线, <s>无语义 |
<code> |
显示代码块,通常与代码格式化插件配合,才能高亮关键字 |
<rogress> |
进度条 |
<b>/<strong> |
加粗, <b>无语义 |
<i>/<em> |
斜体, <i>无语义 |
<mark> |
高亮标记, 默认为内容添加黄色背景 |
| <q>/<blockquote>` | 引用, 内容加双引号 |
指向页面的链接：<a href="url" traget="_self/_black/_top/_parent" title="内容">文本内容</a>
target="__self"是在当前窗口打开链接target="_blank"是另外打开一个新窗口target="_parent"是在父窗口打开链接target="_top"是在顶层窗口打开链接target="name"指定名称的窗口，和与<iframe>元素配合target="#anchor"跳转到设置了锚点的元素所在位置
图片链接：<img scr="图片地址" alt="图片描述">
发送邮件：
<a href="emilto：192383@qq.com"></a>
意思是打开邮箱给192383@qq.com发送一封邮件；
拨打电话：
<a href="tel:1732016****">电话咨询</a>
点击后会询问是否用手机给这个手机号码拨打电话；
下载文件：
<a href="url" download="名称">点击下载</a>
点击后会自动下载设定地址的文件；
| 序号 | 标签 | 描述 |
|---|---|---|
| 1 | <table> |
定义表格 |
| 2 | <tbody> |
定义表格主体, 允许定义多次 |
| 3 | <tr> |
定义表格中的行 |
| 4 | <td> |
定义表格主体与底部的的单元格 |
| 5 | <th> |
定义表格头部中的单元格,默认加粗居中 |
| 6 | <caption> |
定义表格标题 |
| 7 | <thead> |
定义表格头格, 只需定义一次 |
| 8 | <tfoot> |
定义表格底, 只需定义一次 |
| 9 | <col> |
为一个/多个列设置属性,仅限 |
| 10 | <colgroup> |
将多个<col>元素分组管理 |
| 序号 | 标签 | 适用元素 | 描述 |
|---|---|---|---|
| 1 | border |
<table> |
添加表格框 |
| 2 | cellpadding |
<table> |
设置单元格内边距 |
| 3 | cellspacing |
<table> |
设置单元格边框间隙 |
| 4 | align |
不限 | 设置单元格内容水平居中 |
| 5 | bgcolor |
不限 | 设置背景色 |
| 6 | width |
不限 | 设置宽度 |
| 7 | height |
不限 | 设置高度 |
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>商品表单</title></head><body><tableborder="1"width="700"cellspacing="0"cellpadding="20"align="center"><caption>课程表</caption><!-- 一共六行六列 --><thead><tr bgcolor="red"><th colspan="2">商品\序号</th><th>数量</th><th>单价(元)</th><th>总额(元)</th></tr></thead><tbody><tr><td bgcolor="orange">手机</td><td>1</td><td>10</td><td>5000</td><td>50000</td></tr></tr><tr><td bgcolor="orange">电脑</td><td>2</td><td >5</td><td>7000</td><td>35000</td></tr><tr><!-- <td>12</td> --><td bgcolor="orange">电视</td><td>3</td><td>20</td><td>4000</td><td>80000</td></tr><tr><td bgcolor="orange">饮水机</td><td>4</td><td>5</td><td>1000</td><td>5000</td>></tr><tr><td bgcolor="orange">空调</td><td>5</td><td >2</td><td>15000</td><td>35000</td></tr><tr><td colspan="4" align="right">总计:</td><td>205000</td></tr></tbody></table></body></html>
<td clospan="5">
clospan是用于列之间合并，数字5意思是从当前单元格起向右五个单元格合并；
<td rowspan="5"></td>
rowsapn是用于行之间合并，数字5代表从本单元格起向下5行合并；
