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

运行结果如下

相关推荐
namekong85 小时前
清理谷歌浏览器垃圾文件 Chrome “User Data”
前端·chrome
开发者小天6 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
李少兄9 小时前
HTML 表单控件
前端·microsoft·html
学习笔记10110 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-194310 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧10 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#
勿在浮沙筑高台10 小时前
海龟交易系统R
前端·人工智能·r语言
歪歪10010 小时前
C#如何在数据可视化工具中进行数据筛选?
开发语言·前端·信息可视化·前端框架·c#·visual studio
Captaincc11 小时前
AI 能帮你写代码,但把代码变成软件,还是得靠人
前端·后端·程序员
吃饺子不吃馅12 小时前
如何设计一个 Canvas 事件系统?
前端·canvas·图形学