![[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
在html中，使用<a>标签来实现在html中创建超级链接的作用，超级链接的使用场景有很多种，例如页面与页面之间的跳转，网站与网站之间的跳转，打开邮箱,发送邮件，点击拨打电话等等，下面列举几个常用的<a>标签属性：
| 属性 | 描述 | 举例 |
|---|---|---|
href |
指向链接页面的 URL | href="http://baidu.com" |
target |
打开 URL 的页面来源 | target=_self_blank_top_parent |
download |
自定义下载文件名 | download="demo1.jpg" |
type |
设置链接文档的 MIME 类型 | type="image/jpeg" |
在上述这些属性中，最常用到的是hret属性，其中hret属性当中有多个属性值，下面列举几个常用的hret属性值：
| 属性值 | 描述 |
|---|---|
href="url（网址）" |
指向链接页面的 URL（网址） |
href="mailto: 8888888@qq.com" |
打开邮箱,发送邮件 |
href="tel:1358888****" |
点击后,会询问用户是否要拨打电话 |
href="outline.md" |
若浏览器不能解析的文档, 会直接下载 |
以上就是hret属性的常用属性值，在日常使用中，我们可能还会遇到点击链接需要新建窗口打开目标地址，这里需要用到两个target属性：
1、target"_self"此属性是指在当前窗口打开链接。
2、target"_blank"此属性是指在新窗口打开链接。
在我们浏览网页时经常会看到网站上有“回到顶部”这样的按钮，点击后，页面会从网站的最下方回到网站的最上方，要实现这种效果，就需要使用到锚点，锚点在网站的布局中会经产用到，要实现锚点效果需要<a>标签配合id去使用，代码演示如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><a href="#maodian">去到底部</a><h1 id="dingbu">这里是顶部</h1><h1 id="maodian" style="margin-top: 20000px">这里是底部</h1><a href="#dingbu">回到顶部</a></body></html>
表格是我们经常见到的一种数据的展现形式，在日后的工作中使用频率也是相当的高，在编写数据库的时候，做数据归类的时候都会用到，例如购物车，程序后台的表单以及数据统计等等，下面列举一些常用的表格标签：
| 序号 | 标签名 | 描述 | 使用平率 |
|---|---|---|---|
| 1 | <table> |
创建自定义表格 | 经常使用，必须掌握 |
| 2 | <tbody> |
定义表格主体, 允许定义多次 | 经常使用，必须掌握 |
| 3 | <tr> |
在自定义表格中代表行 | 经常使用，必须掌握 |
| 4 | <th> |
在表格中作为表头使用，有自动加粗效果 | 经常使用，必须掌握 |
| 5 | <td> |
在自定义表格中代表列 | 经常使用，必须掌握 |
| 6 | <caption> |
定义表格标题 | 经常使用，但可以用其他方式代替 |
| 6 | <tfoot> |
定义表格底, 只需定义一次 | 经常使用，但可以用其他方式代替 |
| 6 | <col> |
给一个或多个列添加属性 | 不常用 |
| 6 | <colgroup> |
将多个<col>元素分组管理 |
不常用 |
以上是做表格时经常会用到的标签，当然，一个完整的表格只有标签组成是远远不够的，还得需要属性的加持，才能使表格看起来美观和规范，下面列举一些常用的表格属性：
| 序号 | 属性 | 适用元素 | 描述 |
|---|---|---|---|
| 1 | border |
<table> |
添加表格框 |
| 2 | cellpadding |
<table> |
设置单元格内边距 |
| 3 | cellspacing |
<table> |
设置单元格边框间隙 |
| 4 | align |
不限 | 设置单元格内容水平居中 |
| 5 | bgcolor |
不限 | 设置背景色 |
| 6 | width |
不限 | 设置宽度 |
| 7 | height |
不限 | 设置高度 |
| 8 | colspan |
<td>/<th> |
规定单元格可横跨的列数 |
| 9 | rowspan |
<td>/<th> |
设置单元格可横跨的行数 |
以上表格属性仅供参考，由于现在课程还没有涉及到css，后期还是推荐使用css去使用。
下面奉上一个表格的小案例：
<!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><!-- 表格 --><table width="1000px" border="1px" cellspacing="0" align="center"><captionstyle="font-size: 1.5rem; margin-bottom: 10px; color: rgb(238, 107, 20)">购物车</caption><!-- 表格头部 --><tr style="background-color: cadetblue"><th>ID</th><th>品名</th><th>单价/元</th><th>单位</th><th>数量</th><th>金额/元</th></tr><!-- 表格主体 --><tbody align="center"><tr><td>1</td><td>iphone</td><td>4980</td><td>部</td><td>1</td><td>4980</td></tr><tr bgcolor="#49C8E8"><td>2</td><td>iPad</td><td>3800</td><td>台</td><td>1</td><td>3800</td></tr><tr><td>3</td><td>oppo findX2pro</td><td>5900</td><td>部</td><td>1</td><td>5900</td></tr><tr bgcolor="#49C8E8"><td>4</td><td>小米电视大师版</td><td>29000</td><td>台</td><td>1</td><td>29000</td></tr><tr style="font-size: 1.3rem; color: rgb(214, 73, 73)"><td colspan="5">总价</td><td>43680元</td></tr></tbody></table></body></html>
展示效果如图：
