当前位置: 首页 > 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.lryc.cn/news/583303.html

相关文章:

  • 微信小程序控制空调之微信小程序篇
  • 双esp8266-01s间TCP通讯
  • 图像硬解码和软解码
  • RAM带宽计算及分析
  • 区块链系统开发技术应用构建可信数字生态链
  • 以太坊智能合约核心技术解析与应用实践
  • Android 组件内核
  • NO.2数据结构线性表|线性表|顺序表|链表|单链表|双向链表|循环链表|静态链表|插入|删除
  • Qt-翻金币案例
  • 鸿蒙商城开发:ZKmall开源商城系统特性适配与性能优化
  • upload-labs靶场通关详解:第18关 条件竞争
  • CMake构建项目报错“No CUDA toolset found.”
  • android——热修复(补丁)
  • [Pytest][Part 4]多种测试运行方式
  • 三、Docker常用命令
  • 安装nvm管理node.js,详细安装使用教程和详细命令
  • 字体 Unicode 区块字符展示 PDF 生成器
  • 身份证识别api-便捷生活与安全社会的双重保障
  • Ubuntu 下 MySql 使用
  • 【Unity】MiniGame编辑器小游戏(十)连连看【Link】
  • VsCode 接入Continue 远程调用(持续扩展 + DeepSeek R1)— 免本地算力
  • Vim 编辑器常用操作详解(新手快速上手指南)
  • 【Unity】MiniGame编辑器小游戏(十一)消消乐【Crush】
  • 【AI】环境——深度学习cuda+pytorch配置
  • 项目进度管控缺乏闭环,如何形成反馈机制
  • 【c++八股文】Day5:const和constexpr,define
  • 【话题长廊测试报告】
  • 【算法深练】DFS题型拆解:沿着路径“深挖到底”、递归深入、回溯回探的算法解题思路
  • Day21
  • 自然灾害应急响应场景数据资产化研究报告