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

从零开始学前端html篇2

创建表格及表格标签

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

 运行结果如下

 

http://www.dtcms.com/a/270655.html

相关文章:

  • Redis:分组与设备在 Redis 中缓存存储设计
  • K线训练关键代码
  • Laravel 动态生成 PDF:基于 KnpSnappy 实现多公司页眉页脚差异化配置
  • C++如何进行性能优化?
  • 安卓设备信息查看器 - 源码编译
  • PlantUML 在 IDEA 中文版中的安装与使用指南
  • Vim 编辑器常用操作详解(新手快速上手指南)
  • LKT4304稳定可靠高兼容性国产安全加密芯片
  • JAVA观察者模式demo【设计模式系列】
  • WebSocket实现多人实时在线聊天
  • 【TCP/IP】2. 计算机网络与因特网体系结构
  • 两张图片对比clip功能
  • 后端id设置long类型时,传到前端,超过19位最后两位为00
  • 解锁DevOps潜力:如何选择合适的CI/CD工作流工具
  • 【Linux | 网络】socket编程 - 使用UDP实现服务端向客户端提供简单的服务
  • python:ImportError: cannot import name ‘ParameterSource‘ from ‘click.core‘
  • Linux 中的 .bashrc 是什么?配置详解
  • ESP32的OTA升级详解:2. OTA低层组件app_update介绍
  • 增强检索知识库系统1
  • 模型内部进行特征提取时,除了“减法”之外,还有哪些技术
  • 线程池与并发工具:优化多线程执行!
  • [特殊字符]【跨数据库支持】SQL 秒转 ArkTS 实体!HarmonyOS 开发者的数据库适配神器 gotool.top
  • Node.Js是什么?
  • AI+智慧园区 | 事件处置自动化——大模型重构园区治理逻辑
  • 【图像处理基石】如何检测到画面中的ppt并对其进行增强?
  • 洛谷 P1104 生日---排序
  • Android Studio 2024,小白入门喂饭级教程
  • 滑动窗口的初步了解
  • 记录一下:成功部署k8s集群(部分)
  • 【音视频】TS协议介绍