作业四：豆瓣电影
成果展示：
完整代码：
<!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>
<h1>热门电影板块</h1>
<hr>
<table>
<tr>
<td style="width:160px;">
<b style="font-size: 20px;">最近热门电影</b>
</td>
<td style="width: 65px;font-size: 18px;">热门</td>
<td style="width: 60px;font-size: 18px;">最新</td>
<td style="width: 110px;font-size: 18px;">豆瓣满分</td>
<td style="width: 100px;font-size: 18px;">冷门佳片</td>
<td style="width: 60px;font-size: 18px;">华语</td>
<td style="width: 60px;font-size: 18px;">欧美</td>
<td style="width: 65px;font-size: 18px;">韩国</td>
<td style="width: 180px;font-size: 18px;">日本</td>
<td style="width: 65px;font-size: 18px;">更多>></td>
</tr>
</table>
<hr>
<table>
<tr>
<td>
<img src="img2/猜火车 8.1.png">
</td>
<td>
<img src="img2/贝尔科实验 6.0.png">
</td>
<td>
<img src="img2/加州公路巡警 6.8.png">
</td>
<td>
<img src="img2/歌声不绝 6.3.png">
</td>
<td>
<a href="#bottom" name="top">
直<br>
到<br>
底<br>
部<br>
</a>
</td>
</tr>
<tr>
<td style="height: 40px;font-size: 18px;">猜火车 8.1</td>
<td style="height: 40px;font-size: 18px;">贝尔科实验 6.0</td>
<td style="height: 40px;font-size: 18px;">加州公路巡警 6.8</td>
<td style="height: 40px;font-size: 18px;">歌声不绝 6.3</td>
</tr>
<tr>
<td>
<img src="img2/明日的我与昨日的我.png">
</td>
<td>
<img src="img2/速度与激情8.png">
</td>
<td>
<img src="img2/极速特工.png">
</td>
<td>
<img src="img2/金刚狼3 ：殊死一战.png">
</td>
</tr>
<tr>
<td style="height: 40px;font-size: 18px;">明日的我与昨日的我</td>
<td style="height: 40px;font-size: 18px;">速度与激情8</td>
<td style="height: 40px;font-size: 18px;">极速特工</td>
<td style="height: 40px;font-size: 18px;">金刚狼3 : 殊死一战</td>
</tr>
<tr>
<td>
<a href="#top" name="bottom">回到顶部</a>
</td>
</tr>
</table>
</body>
</html>解析：
豆瓣电影的网页显示，主要是多图片文字平行显示和回到顶部、直到底部的超链接建立
标题使用<h1>设置一级标题，<hr>显示水平分割线
<h1>热门电影板块</h1>
<hr>主体部分可以使用没有表格线的表格来布局，使文字及图片平行多项显示，使用表格中style标签中的width调整文字容器范围即表格宽度，font-size调整字号，<td>中的文字默认左对齐，需要使用水平分割线，因此上方文字部分独立使用table表格
<table>
<tr>
<td style="width:160px;">
<b style="font-size: 20px;">最近热门电影</b>
</td>
<td style="width: 65px;font-size: 18px;">热门</td>
<td style="width: 60px;font-size: 18px;">最新</td>
<td style="width: 110px;font-size: 18px;">豆瓣满分</td>
<td style="width: 100px;font-size: 18px;">冷门佳片</td>
<td style="width: 60px;font-size: 18px;">华语</td>
<td style="width: 60px;font-size: 18px;">欧美</td>
<td style="width: 65px;font-size: 18px;">韩国</td>
<td style="width: 180px;font-size: 18px;">日本</td>
<td style="width: 65px;font-size: 18px;">更多>></td>
</tr>
</table>
<hr>在每一个表格中嵌套img图片标签，建立直到底部的超链接标签，跳转点通过a标签的name属性设置，链接通过a标签中href属性设置，#引用链接的name完成跳转
<tr>
<td>
<img src="img2/猜火车 8.1.png">
</td>
<td>
<img src="img2/贝尔科实验 6.0.png">
</td>
<td>
<img src="img2/加州公路巡警 6.8.png">
</td>
<td>
<img src="img2/歌声不绝 6.3.png">
</td>
<td>
<a href="#bottom" name="top">
直<br>
到<br>
底<br>
部<br>
</a>
</td>
</tr>根据表格上下对齐的特点在图片下方表格输入电影名称，使用style标签的height属性设置表格的高度，使用font-size调整文字大小
<tr>
<td style="height: 40px;font-size: 18px;">猜火车 8.1</td>
<td style="height: 40px;font-size: 18px;">贝尔科实验 6.0</td>
<td style="height: 40px;font-size: 18px;">加州公路巡警 6.8</td>
<td style="height: 40px;font-size: 18px;">歌声不绝 6.3</td>
</tr>在页面下方建立回到顶部的超链接标签，跳转点通过a标签的name属性设置，链接通过a标签中href属性设置，#引用链接的name完成跳转
<tr>
<td>
<a href="#top" name="bottom">回到顶部</a>
</td>
</tr>
![[iOS]高版本MacOS运行低版本Xcode](https://img-blog.csdnimg.cn/direct/dcf6cf456c414a6fb7de6ef2ffff029f.png)
