创建表格及表格标签
<table>,用于创建表格
<tr>,定义表格中的一行
<td>,定义表格的一个单元格
<th>,定义表格中的表头单元格(通常用于显示表格的列标题和行标题,默认加粗居中)
表格样式调整(css)
html
table {
width: 100%; /* 表格宽度 */
border-collapse: collapse; /* 合并边框(关键!) */
margin: 20px 0; /* 表格外边距(调整表格与周围其他元素的间距) */
}
th, td {
border: 1px solid #ddd; /* 单元格边框 */
padding: 12px 15px; /* 内边距(控制单元格大小) */
text-align: left; /* 文本对齐 */
}
创建列表及列表标签
无序列表
<ul>,创建无序列表
type:设置列表项的标记类型(disc圆点、circle空心圆、square方块)(已废弃)
用 CSS 的 list-style-type
属性替代 type:
html
ul {
list-style-type: none; /* 移除默认符号 */
padding-left: 0; /* 移除缩进 */
text-align: center; /* 文本居中 */
}
ul li {
display: inline-block; /* 让列表项横向排列 */
margin: 0 10px; /* 项间距 */
}
ul li::before {
content: "▪"; /* 自定义方块符号 */
margin-right: 8px; /* 符号与文本间距 */
color: black; /* 符号颜色 */
}
<li>,定义列表项
有序列表
<ol>,创建有序列表
type:设置列表项的编号类型(1数字、a小写字母、A大写字母、i小写罗马数字
I大写罗马数字)(已废弃)
<li>,定义列表项
自定义列表
<dl>创建自定义列表
<dt>,定义列表项
<dd>,定义列表项的描述
设置页面跳转
链接跳转
目标页面.html和当前页面.html在同一个目录下:
<a href="new-page.html">点击跳转(当前页面打开)</a>
按钮跳转
目标页面.html和当前页面.html在同一个目录下:
<button οnclick="window.location.href = '目标页面.html'">(不开新网页)
点击跳转
</button>
点击按钮后,当前页面会直接跳转到 目标页面.html
scratch.html的内容
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!--适应浏览器屏幕大小-->
<title>this is a good website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>hello!</h1>
<h1>欢迎使用本网页!</h1>
<br>
<hr>
<br>
<div class="card">
<div class="button-group-h">
<button class="btn">登录</button>
<button class="btn">注册</button>
</div>
</div>
<br>
<hr>
<br>
<button class="btn" onclick="window.location.href = 'scratch_1.html'">点此查看今日菜品</button>
</body>
</html>
scartch_1.html的内容
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>今日菜色</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<dl>
<dt>今日食堂菜单</dt>
<dd>智慧食堂菜单实时更新!</dd>
</dl>
<br>
<ul>
<li>健康</li>
<li>美味</li>
<li>实时</li>
</ul>
<br>
<hr>
<br>
<table>
<tr>
<th>菜名</th>
<th>余量/份</th>
</tr>
<tr>
<td>麻婆豆腐</td>
<td>45</td>
</tr>
<tr>
<td>西红柿炒鸡蛋</td>
<td>32</td>
</tr>
</table>
<br>
<hr>
<br>
<h4>注意事项</h4>
<ol>
<li>不可预约</li>
<li>适量点餐</li>
<li>不要浪费</li>
</ol>
</body>
</html>
style.css的内容
html
body{
color:black;
background-color:pink;
font-weight: bold;
text-align:center;
}
.card{
background:white;
width:40%;
margin:auto;
border-radius:8px;
box-shadow:0 3px 10px rgba(0,0,0,0.1);
padding:20px;
transition: transform 0.3s;
}
.card:hover{
transform:translateY(-5px);
}
.btn {
display: inline-block;
background: #3498db;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn:hover {
background: #2980b9;
}
.button-group-h {
justify-content: center;
display: flex;
gap:88px;
}
ul{
display:flex;
gap:8px 16px;
justify-content: center;
list-style-type: square;
list-style-position: inside;
padding-left:0;
}
ol{
list-style-type: decimal;
list-style-position: inside;
padding-left:0;
}
table{
background-color: white;
font-size: large;
color:black;
width: 60%;
border-collapse: collapse;
margin:auto;
}
th,td{
border: 1px solid blueviolet;
padding: 12px 15px;
text-align: center;
}
运行结果如下

