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

运行结果如下

相关推荐
文火冰糖的硅基工坊7 分钟前
[光学原理与应用-480]:《国产检测设备对比表》
前端·人工智能·系统架构·制造·半导体·产业链
excel14 分钟前
Qiankun 子应用生命周期及使用场景解析
前端
weixin_4462608519 分钟前
Django - 让开发变得简单高效的Web框架
前端·数据库·django
ObjectX前端实验室1 小时前
【react18原理探究实践】异步可中断 & 时间分片
前端·react.js
SoaringHeart1 小时前
Flutter进阶:自定义一个 json 转 model 工具
前端·flutter·dart
努力打怪升级1 小时前
Rocky Linux 8 远程管理配置指南(宿主机 VNC + KVM 虚拟机 VNC)
前端·chrome
brzhang2 小时前
AI Agent 干不好活,不是它笨,告诉你一个残忍的现实,是你给他的工具太难用了
前端·后端·架构
brzhang2 小时前
一文说明白为什么现在 AI Agent 都把重点放在上下文工程(context engineering)上?
前端·后端·架构
reembarkation2 小时前
自定义分页控件,只显示当前页码的前后N页
开发语言·前端·javascript
gerrgwg3 小时前
React Hooks入门
前端·javascript·react.js