从零开始学前端html篇2

创建表格及表格标签

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

运行结果如下