HTML5基础学习（5）：百度云盘制作、简单表格制作

一、百度云盘制作

（1）绝对地址与相对地址

绝对地址：在任何情况下，都可以找得到的地址。网页中下面图片所在的路径叫做绝对路径：

<img src="http://1000phone.com/html5/logo.png" />

相对地址：必须知道当前所在，才能找得到的地址。网页中下面图片所在的路径叫做相对路径：

<img src="img/timg02.jpg" />

（2）添加百度网盘背景图，为了和网页大小一致把宽度设为100%

<img src="img/logo.png" width="100%">

（3）用p标签另起一行添加文件夹图片并设置一下大小。

<p><img src="img/folder.jpg" width="60px">文件夹1<img src="img/folder.jpg" width="60px">文件夹2</p>

（4）使文件夹变成可以点击状态

用a标签把img标签和文字都包括起来，这样图片和文字都变成可以点击状态了。

<p><a href=""><img src="img/folder.jpg" width="60px">文件夹1</a><a href=""><img src="img/folder.jpg" width="60px">文件夹2</a></p>

（5）设置超链接的跳转地址，并根据地址创建相关目录文件。

<a href="one/one.html"><img src="img/folder.jpg" width="60px">文件夹1</a><a href="two/two.html"><img src="img/folder.jpg" width="60px">文件夹2</a>

注意当路径编写出现错误的时候，浏览器会出现404错误，表示没有找到该页面。

（6）编写文件夹1中的内容

<img src="../img/logo.png" width="100%"><p><a href="../demo.html"><img src="../img/return.jpg" width="60px"></a><a href=""><img src="../img/folder.jpg" width="60px">文件夹1-2</a><img src="../img/file.jpg" width="60px">文件1-2</p>

在文件夹1中创建了一个文件夹和一个文件。注意，one.html和demo.html文件虽然引入的图片是相同的但是路径并不相同。这是因为两个文件所处的层级不同导致的。one.html要想找到上一层的文件需要使用../返回到上一层中。

添加返回按钮图片，该图片上的超链接指向了demo.html页面。

二、简单表格制作

（1）表格的基本标签

<table>：定义表格
<thead>：定义表格中的表头内容
<th>：定义表格中的表头单元格
<tbody>：定义表格中的主体内容
<tr>：定义表格中的行
<td>：定义行中的单元格
<tfoot>：定义表格中的表注内容

（2）制作表格

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h3>前端技术阶段划分标准</h3><table border="1" cellspacing="0"><thead><tr><th></th><th>初级</th><th>中级</th><th>高级</th><th>专家</th></tr></thead><tbody><tr><td>标准</td><td>被产品怼的说不出话</td><td>跟产品互怼不相上下</td><td>怼的产品没话说</td><td>直接将其怼辞职</td></tr><tr><td>用户A</td><td></td><td></td><td></td><td></td></tr><tr><td>用户B</td><td></td><td></td><td></td><td></td></tr><tr><td>用户C</td><td></td><td></td><td></td><td></td></tr></tbody><tfoot><tr > <td colspan="5" align="center">表格内容纯属虚构</td></tr></tfoot></table></body>
</html>

注意，表格默认没有边框，可在<table>中的border属性设置边框大小，cellspacing属性设置边框的间隙。<th>定义表头内容自动加粗居中对齐。colspan属性表示合并单元格。<td>标签中align属性可以设置文字对齐方式。

（3）设置表格单元格宽度

可以在每个<td>标签中分别设置width属性调整宽度。也可以使用<col>标签设置一列的宽度。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h3>前端技术阶段划分标准</h3><table border="1" cellspacing="0"><col width="100px" /><col width="200px" /><col width="200px" /><col width="200px" /><col width="200px" /><thead><tr><th></th><th>初级</th><th>中级</th><th>高级</th><th>专家</th></tr></thead><tbody><tr><td align="center">标准</td><td>被产品怼的说不出话</td><td>跟产品互怼不相上下</td><td>怼的产品没话说</td><td>直接将其怼辞职</td></tr><tr align="center"><td>用户A</td><td></td><td></td><td></td><td></td></tr><tr align="center"><td>用户B</td><td></td><td></td><td></td><td></td></tr><tr align="center"><td>用户C</td><td></td><td></td><td></td><td></td></tr></tbody><tfoot><tr > <td colspan="5" align="center">表格内容纯属虚构</td></tr></tfoot></table></body>
</html>