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

怼烎@ 2022-12-08 02:09 279阅读 1赞

### 一、百度云盘制作 ###

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjk4MzUx_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjk4MzUx_size_16_color_FFFFFF_t_70 1][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjk4MzUx_size_16_color_FFFFFF_t_70 2][]

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

![20200917144332588.png][]

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjk4MzUx_size_16_color_FFFFFF_t_70 3][]

### 二、简单表格制作 ###

（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属性可以设置文字对齐方式。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjk4MzUx_size_16_color_FFFFFF_t_70 4][]

（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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjk4MzUx_size_16_color_FFFFFF_t_70 5][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjk4MzUx_size_16_color_FFFFFF_t_70]: /images/20221123/10ac65d4da634b0eb3ac899629dc2d78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjk4MzUx_size_16_color_FFFFFF_t_70 1]: /images/20221123/180c96898d214261bb54c91e3ec38c10.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjk4MzUx_size_16_color_FFFFFF_t_70 2]: /images/20221123/9190010bbe634759a7acbbc00d4a6741.png
[20200917144332588.png]: /images/20221123/1f8d85c6456b4ff1aea7927eaf1aeb8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjk4MzUx_size_16_color_FFFFFF_t_70 3]: /images/20221123/13d096ae54584e28be2c652014cacedb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjk4MzUx_size_16_color_FFFFFF_t_70 4]: /images/20221123/112a4576de53497084288e9cf5f828b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjk4MzUx_size_16_color_FFFFFF_t_70 5]: /images/20221123/cc3a656e6fb44c13b488940bfd1ba7c1.png