当前位置：首页 > news >正文

从零开始学前端html篇2

news 2025/7/11 15:48:04

创建表格及表格标签

<table>,用于创建表格

<tr>,定义表格中的一行

<td>，定义表格的一个单元格

<th>，定义表格中的表头单元格（通常用于显示表格的列标题和行标题，默认加粗居中）

表格样式调整（css）

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：

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的内容

<!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的内容

<!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的内容

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;
}

运行结果如下