从零开始学前端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;
}

运行结果如下

相关推荐
Xiaouuuuua11 分钟前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
@Dream_Chaser32 分钟前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
深耕AI35 分钟前
【教程】在ubuntu安装Edge浏览器
前端·edge
倔强青铜三39 分钟前
苦练Python第4天:Python变量与数据类型入门
前端·后端·python
倔强青铜三1 小时前
苦练Python第3天:Hello, World! + input()
前端·后端·python
上单带刀不带妹1 小时前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript
倔强青铜三1 小时前
苦练Python第2天:安装 Python 与设置环境
前端·后端·python
我是若尘1 小时前
Webpack 入门到实战 - 复习强化版
前端
晓13131 小时前
JavaScript基础篇——第五章 对象(最终篇)
开发语言·前端·javascript
倔强青铜三1 小时前
苦练Python第1天:为何要在2025年学习Python
前端·后端·python