html设计一个浅蓝色电影评分榜单页面 并注释
时间: 2023-06-17 12:05:55 浏览: 217
<!DOCTYPE html>
<!-- 定义文档类型为HTML5 -->
<html>
<!-- 开始HTML文档 -->
<head>
<!-- head标签中包含了文档的元数据及外部链接信息 -->
<meta charset="UTF-8">
<!-- 定义文档使用的字符编码为UTF-8 -->
<title>电影评分榜单</title>
<!-- 定义网页标题 -->
<style>
/* 样式表用于定义网页的外观和布局 */
body {
background-color: #f0f8ff;
/* 设置网页背景色为浅蓝色 */
font-family: Arial, Helvetica, sans-serif;
/* 设置网页字体为Arial, Helvetica 或sans-serif */
}
h1 {
color: #0066cc;
/* 设置标题文字颜色为深蓝色 */
text-align: center;
/* 设置标题居中对齐 */
}
table {
margin: auto;
/* 设置表格居中对齐 */
border-collapse: collapse;
/* 设置单元格边框合并 */
width: 80%;
/* 设置表格宽度为80% */
}
td, th {
border: 1px solid #ddd;
padding: 8px;
/* 设置单元格内边距为8px */
text-align: center;
/* 设置单元格文字居中对齐 */
}
th {
background-color: #0066cc;
color: white;
/* 设置表头背景色为深蓝色,文字颜色为白色 */
}
</style>
</head>
<body>
<!-- body标签中包含了可见的网页内容 -->
<h1>电影评分榜单</h1>
<!-- 网页标题,为一级标题 -->
<table>
<!-- 定义表格 -->
<thead>
<!-- 定义表头 -->
<tr>
<!-- 定义表头行 -->
<th>电影名称</th>
<!-- 定义表头单元格,显示电影名称 -->
<th>评分</th>
<!-- 定义表头单元格,显示电影评分 -->
</tr>
<!-- 表头行结束 -->
</thead>
<!-- 表头结束 -->
<tbody>
<!-- 定义表格主体内容 -->
<tr>
<!-- 定义表格行 -->
<td>阿凡达</td>
<!-- 定义表格单元格,显示电影名称 -->
<td>9.0</td>
<!-- 定义表格单元格,显示电影评分 -->
</tr>
<!-- 表格行结束 -->
<tr>
<td>泰坦尼克号</td>
<td>8.5</td>
</tr>
<tr>
<td>复仇者联盟</td>
<td>8.8</td>
</tr>
<tr>
<td>星球大战</td>
<td>8.7</td>
</tr>
</tbody>
<!-- 表格主体内容结束 -->
</table>
<!-- 表格结束 -->
</body>
<!-- body结束 -->
</html>
<!-- HTML文档结束 -->
阅读全文