HTML-CSS
Web 标准
- Web 标准也称网页标准，有一系列的标准组成，大部分由W3C（World Wide Web Consortium，万维网联盟）负责制定。
- 三个组成部分：
- HTML：负责网页的结构（页面元素和内容）
- CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）
- JavaScript：负责网页的行为（交互效果）
HTML 快速入门
- 创建一个文本文档，改 .txt 后缀名为 .html
- 编写 HTML 的基本骨架，定义标题
- 在
<body></body>中填写内容
测试文件如下：
<html>
<!-- 网页头部：用来存放给浏览器看的信息，如：CSS 样式 -->
<head>
<title>HTML快速入门</title>
</head>
<!-- 网页主体：用来存放给用户看的信息，如：文字、图片、视频 -->
<body>
<h1>Hello HTML</h1>
<img src="img/1.jpg" alt="Hollow Knight">
</body>
</html>
效果图如下：
HTML 标签特点
- html 标签不区分大小写，一般来说用小写
- html 标签使用单引号 / 双引号都可以，推荐使用双引号
- html 标签语法结构比较松散，但是为可读性，还是建议规范书写
VS Code
在使用 vscode 编写前端代码前，需要安装以下插件
在 vscode 中书写 html 骨架非常简单，输入!然后按 Enter 键即可获得如下的默认骨架
再根据自己的需求自行编写即可
<!-- 声明文档的类型是html -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 字符集 -->
<meta charset="UTF-8">
<!-- 设置网页在移动设备上的显示宽度及缩放比例 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML快速入门</title>
</head>
<body>
<h1>Hello HTML</h1>
<img src="img/1.jpg" alt="Hollow Knight">
</body>
</html>
常见标签&样式
标题排版
- 标题标签：
<h1>-<h6> - 超链接标签：
<a href="" target=""></a>- href：链接地址 - url 地址
- target：打开方式
- _blank：在新窗口打开
- _self：在当前窗口打开（默认）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
</head>
<body>
<!-- 定义一个标题，标题内容：【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
<h1>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
<!-- 定义一个超链接，可以跳转到央视网https://news.cctv.com/ -->
<!-- a 超链接标签：
href：链接地址 - url 地址
target：打开方式
_blank：在新窗口打开
_self：在当前窗口打开（默认）
-->
<a href="https://news.cctv.com/" target="_blank">央视网</a>
<span>2024年05月15日 20:07</span>
</body>
</html>
标题样式
-
CSS 引入方式：
-
行内样式：写在标签的 style 属性里面（配合 JavaScript 使用）
-
内部样式：写在 style 标签中（可以写在页面任何位置，但通常约定写在 head 标签中）
-
外部样式：写在一个单独的 .css 文件中（需要通过 link 标签在网页中引入）
-
颜色表示：
| 表示方式 | 属性值 | 说明 | 示例 |
|---|---|---|---|
| 关键字 | 颜色英文单词 | red、green、blue | red、green、blue... |
| rgb 表示法 | rgb(r, g, b) | 红绿蓝三原色，取值：0-255 | rgb(0, 0, 0)、rgb(255, 0, 0) |
| rgba表示法 | rgba(r, g, b, a) | 红绿蓝三原色，a 表示透明度，取值：0-1 | rgba(0, 0, 0, 0.3)、rgba(255, 0, 0, 0.5) |
| 十六进制表示法 | #rrggbb | #开头，将数字转换成十六进制表示 | #000000、#ff0000，简写：#000、#f00 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
<!-- 方式二：内部样式 -->
<style>
span{
/* 关键字 */
/* color:grey; */
/* RGB表示法 */
/* color:rgb(128, 128, 128); */
/* RGBA表示法 */
/* color:rgba(128, 128, 128, 0.5); */
/* 十六进制表示法 */
color:#b7b7b7;
}
</style>
<!-- 方式三：外部样式 -->
<!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body>
<!-- 定义一个标题，标题内容：【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
<h1>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
<!-- 定义一个超链接，可以跳转到央视网https://news.cctv.com/ -->
<a href="https://news.cctv.com/" target="_blank">央视网</a>
<!-- 方式一：行内样式 -->
<!-- <span style="color:grey">2024年05月15日 20:07</span> -->
<span>2024年05月15日 20:07</span>
</body>
</html>
span{
color:grey;
}
- CSS 选择器是用来选取需要设置样式的元素（标签）的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
<style>
/* 优先级：id选择器 > 类选择器 > 元素选择器 */
/* 元素选择器 */
/* span{
color:#f00;
} */
/* 类选择器 */
/* .source{
color:#0f0;
} */
/* id选择器 */
#time{
color:#b2b2b2;
}
a{
/* 去除超链接的下划线 */
text-decoration: none;
}
</style>
</head>
<body>
<!-- 定义一个标题，标题内容：【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
<h1>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
<!-- 定义一个超链接，可以跳转到央视网https://news.cctv.com/ -->
<a href="https://news.cctv.com/" target="_blank">央视网</a>
<span id="time" class="time">2024年05月15日 20:07</span>
<!-- <span id="source" class="source">来源：央视网</span>
<span id="author" class="source">作者：央视网</span> -->
</body>
</html>
正文排版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
<style>
#time{
color:#b2b2b2;
}
a{
/* 去除超链接的下划线 */
text-decoration: none;
}
</style>
</head>
<body>
<!-- ----------------------------新闻标题-------------------------------- -->
<!-- 定义一个标题，标题内容：【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
<h2>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h2>
<!-- 定义一个超链接，可以跳转到央视网https://news.cctv.com/ -->
<a href="https://news.cctv.com/" target="_blank">央视网</a>
<span id="time" class="time">2024年05月15日 20:07</span>
<br>
<!-- ----------------------------新闻正文-------------------------------- -->
<!-- 定义一个视频，引入 video/news.mp4 -->
<!-- video 标签属性：
src：视频的访问地址
controls：添加视频控制器
width：视频的宽度(一般来说只用设置一个，高度会根据宽度自适应)
单位：px 像素
% 百分比（% 表示视频宽度占父元素宽度的比例百分比）
height：视频的高度
-->
<video src="video/news.mp4" controls width="800px"></video>
<br>
<p>
央视网消息（新闻联播）：作为共抓长江大保护的标志性工程，长江十年禁渔今年进入第四年。国家领导人指出，
长江禁渔是为全局计、为子孙谋的重要决策。牢记***嘱托，沿江省市持续推进长江水生生物多样性恢复，努力保障退捕渔民就业生活。
这段时间，记者深入长江两岸，记录下禁渔工作取得的重要阶段性成效和广大干部群众坚定不移推进长江十年禁渔的扎实行动。
</p>
<p>行走在长江沿线，科研人员发现很多可喜现象。</p>
<!-- 定义一张图片，引入 img/1.gif -->
<!-- img 标签属性：
src：图片的访问地址
1. 绝对路径
1.1 绝对磁盘路径：E:\tool\Java\01. 央视新闻\img\1.gif
1.2 绝对网络路径：https://p3.img.cctvpic.com/photoworkspace/contentimg/2024/05/15/2024051520034237647.gif
2. 相对路径
2.1 ./ 当前目录(可以省略)
2.2 ../ 上一级目录
width：视频的宽度(一般来说只用设置一个，高度会根据宽度自适应)
单位：px 像素
% 百分比（% 表示视频宽度占父元素宽度的比例百分比）
height：视频的高度
-->
<img src="img/1.gif" alt="推进长江十年禁渔 谱写长江大保护新篇章" width="800px">
<p>
在长江南源，一处小头裸裂尻鱼新的栖息地被发现，鱼的数量大约超3万尾，为水生态保护提供了珍贵数据。
</p>
<p>
在长江中游，追踪显示，人工增殖放流的中华鲟成功入海率已经从45%左右提升至60%以上；
鄱阳湖鱼类小型化、低龄化趋势得到遏制，栖息地生存环境得以改善。
</p>
<p>
在长江下游，今年3月起，南京秦淮河入江口首次出现野生中华绒螯蟹大规模洄游现象，种群数量明显增加。
</p>
<img src="img/2.jpg" alt="环境改善" width="800px">
<p>水生生物资源恢复向好，见证了长江十年禁渔三年多来的阶段性成果。</p>
<p>
实施长江十年禁渔，是以国家领导人为核心的党中央从中华民族长远利益出发作出的重要决策。党的十八大以来，
***多次深入长江沿线考察调研，详细了解长江十年禁渔的实施情况，他指出，要坚定推进长江十年禁渔，巩固好已经取得的成果。
</p>
<img src="img/3.jpg" alt="在推进人与自然和谐共生的中国式现代化进程中" width="800px">
<p>
按照部署，自2021年1月1日起，在长江干流、大型通江湖泊、重要支流和长江口部分海域实行为期十年的禁渔，
常年禁止天然渔业资源的生产性捕捞。禁渔三年多来，相关评估显示，
长江干流和鄱阳湖、洞庭湖水生生物完整性指数由禁渔前最差的“无鱼”提升了两个等级。
2022年，长江江豚数量达到1249头，实现历史性止跌回升。长江干流水质连续4年全线保持Ⅱ类。
</p>
<p>
实施长江十年禁渔，解决好渔民上岸后的 生产生活问题，禁渔才有稳定扎实的社会基础。
</p>
<img src="img/4.jpg" alt="推进长江十年禁渔 谱写长江大保护新篇章" width="800px">
<p>
安徽退捕转产的3万多名渔民，在政府的引导下接受就业培训。在当涂县，免费学习养殖技术，养殖生态螃蟹成了退捕渔民的新选择。
</p>
<p>
在拥有洞庭湖超六成水域的湖南岳阳，政府帮扶上岸渔民建起养殖场，发展风干鱼产业，还带领他们学习直播带货，拓宽销路。
</p>
<p>
在渔民退捕上岸的鄱阳湖棠荫岛，当地在继续保护好生态的前提下，正探索规划利用独特的自然资源发展旅游产业。
禁渔三年多来，有关部门对23.1万退捕渔民逐一建档立卡，多渠道提升就业、社保水平。
</p>
<img src="img/5.jpg" alt="退捕渔民就业" width="800px">
<p>
长江十年禁渔实施以来，沿江省市合力攻坚、久久为功，长江大保护不断向纵深推进，持续巩固禁渔成果。
下一步，沿江省市还将加强水生生物重要栖息地修复，
建立退捕渔民动态精准帮扶服务，完善跨区域、跨部门执法合作机制，确保一江清水绵延后世、惠泽人民。
</p>
</body>
</html>
正文样式
| 标签 | 作用 | 属性 / 说明 |
|---|---|---|
<b> / <strong> |
加粗 | <strong>具有强调语义 |
<u> / <ins> |
下滑线 | <ins>具有强调语义 |
<i> / <em> |
倾斜 | <em>具有强调语义 |
<s> / <del> |
<del>具有强调语义 |
| 字符实体 | 属性 / 说明 |
|---|---|
|
空格 |
< |
< |
> |
> |
最终复现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</title>
<style>
#time{
color:#b7b7b7;
}
a{
/* 去除超链接的下划线 */
text-decoration: none;
color:#00008b;
}
p{
/* 设置行高1.75倍 */
line-height: 1.75;
/* 设置首行缩进2个字符 */
text-indent: 2em;
font-size:18px;
}
#news{
width:55%;
margin-left: auto;
margin-right: auto;
}
/* 整体版面居中显示 */
#source{
/* 设置首行缩进0个字符 */
text-indent: 0em;
font-size:16px;
line-height: 1.5;
}
</style>
</head>
<body>
<div id="news">
<!-- ----------------------------新闻标题-------------------------------- -->
<!-- 定义一个标题，标题内容：【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
<h2>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h2>
<!-- 定义一个超链接，可以跳转到央视网https://news.cctv.com/ -->
<p id="source">
<a href="https://news.cctv.com/" target="_blank">央视网</a>
<span id="time" class="time"> 2024年05月15日 20:07</span>
</p>
<br>
<!-- ----------------------------新闻正文-------------------------------- -->
<!-- 定义一个视频，引入 video/news.mp4 -->
<!-- video 标签属性：
src：视频的访问地址
controls：添加视频控制器
width：视频的宽度(一般来说只用设置一个，高度会根据宽度自适应)
单位：px 像素
% 百分比（% 表示视频宽度占父元素宽度的比例百分比）
height：视频的高度
-->
<video src="video/news.mp4" controls width="100%"></video>
<br>
<p>
<!-- 加粗字体 -->
<!-- <b>央视网消息</b> -->
<strong>央视网消息</strong>
（新闻联播）：作为共抓长江大保护的标志性工程，长江十年禁渔今年进入第四年。国家领导人指出，
长江禁渔是为全局计、为子孙谋的重要决策。牢记***嘱托，沿江省市持续推进长江水生生物多样性恢复，努力保障退捕渔民就业生活。
这段时间，记者深入长江两岸，记录下禁渔工作取得的重要阶段性成效和广大干部群众坚定不移推进长江十年禁渔的扎实行动。
</p>
<p>行走在长江沿线，科研人员发现很多可喜现象。</p>
<!-- 定义一张图片，引入 img/1.gif -->
<!-- img 标签属性：
src：图片的访问地址
1. 绝对路径
1.1 绝对磁盘路径：E:\tool\Java\01. 央视新闻\img\1.gif
1.2 绝对网络路径：https://p3.img.cctvpic.com/photoworkspace/contentimg/2024/05/15/2024051520034237647.gif
2. 相对路径
2.1 ./ 当前目录(可以省略)
2.2 ../ 上一级目录
width：视频的宽度(一般来说只用设置一个，高度会根据宽度自适应)
单位：px 像素
% 百分比（% 表示视频宽度占父元素宽度的比例百分比）
height：视频的高度
-->
<img src="img/1.gif" alt="推进长江十年禁渔 谱写长江大保护新篇章" width="100%">
<p>
在长江南源，一处小头裸裂尻鱼新的栖息地被发现，鱼的数量大约超3万尾，为水生态保护提供了珍贵数据。
</p>
<p>
在长江中游，追踪显示，人工增殖放流的中华鲟成功入海率已经从45%左右提升至60%以上；
鄱阳湖鱼类小型化、低龄化趋势得到遏制，栖息地生存环境得以改善。
</p>
<p>
在长江下游，今年3月起，南京秦淮河入江口首次出现野生中华绒螯蟹大规模洄游现象，种群数量明显增加。
</p>
<img src="img/2.jpg" alt="环境改善" width="100%">
<p>水生生物资源恢复向好，见证了长江十年禁渔三年多来的阶段性成果。</p>
<p>
实施长江十年禁渔，是以国家领导人为核心的党中央从中华民族长远利益出发作出的重要决策。党的十八大以来，
***多次深入长江沿线考察调研，详细了解长江十年禁渔的实施情况，他指出，要坚定推进长江十年禁渔，巩固好已经取得的成果。
</p>
<img src="img/3.jpg" alt="在推进人与自然和谐共生的中国式现代化进程中" width="100%">
<p>
按照部署，自2021年1月1日起，在长江干流、大型通江湖泊、重要支流和长江口部分海域实行为期十年的禁渔，
常年禁止天然渔业资源的生产性捕捞。禁渔三年多来，相关评估显示，
长江干流和鄱阳湖、洞庭湖水生生物完整性指数由禁渔前最差的“无鱼”提升了两个等级。
2022年，长江江豚数量达到1249头，实现历史性止跌回升。长江干流水质连续4年全线保持Ⅱ类。
</p>
<p>
实施长江十年禁渔，解决好渔民上岸后的 生产生活问题，禁渔才有稳定扎实的社会基础。
</p>
<img src="img/4.jpg" alt="推进长江十年禁渔 谱写长江大保护新篇章" width="100%">
<p>
安徽退捕转产的3万多名渔民，在政府的引导下接受就业培训。在当涂县，免费学习养殖技术，养殖生态螃蟹成了退捕渔民的新选择。
</p>
<p>
在拥有洞庭湖超六成水域的湖南岳阳，政府帮扶上岸渔民建起养殖场，发展风干鱼产业，还带领他们学习直播带货，拓宽销路。
</p>
<p>
在渔民退捕上岸的鄱阳湖棠荫岛，当地在继续保护好生态的前提下，正探索规划利用独特的自然资源发展旅游产业。
禁渔三年多来，有关部门对23.1万退捕渔民逐一建档立卡，多渠道提升就业、社保水平。
</p>
<img src="img/5.jpg" alt="退捕渔民就业" width="100%">
<p>
长江十年禁渔实施以来，沿江省市合力攻坚、久久为功，长江大保护不断向纵深推进，持续巩固禁渔成果。
下一步，沿江省市还将加强水生生物重要栖息地修复，
建立退捕渔民动态精准帮扶服务，完善跨区域、跨部门执法合作机制，确保一江清水绵延后世、惠泽人民。
</p>
</div>
</body>
</html>
复现结果
盒子模型
- 盒子：页面中所有的元素（标签），都可以看作是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便进行页面布局
- 盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）
- 布局标签：网页开发中，会使用 div 和 span 这两个没有语义的布局标签
- 特点：
<div>标签 |
<span>标签 |
|---|---|
| 一行只显示一个（独占一行） | 一行可以显示多个 |
| 宽度默认是父元素的宽度，高度默认由内容撑开 | 宽度和高度默认由内容撑开 |
| 可以设置宽高（width、height） | 不可以设置宽高（width、height） |
演示 html 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
</head>
<body>
<div id="div1">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A</div>
<div id="div2">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A</div>
<span id="span1">B B B B B B B B B B B B B B B B B B B B B B B</span>
<span id="span2">B B B B B B B B B B B B B B B B B B B B B B B</span>
</body>
</html>
用浏览器打开，按F12进入检查页面，再输入 Ctrl + Shift + C 可对页面中一个元素进行选取，通过这个我们可以看出，<div>标签不管多少字符，都会占用一整行，而且<span>标签不会
而我们将div1设置了width 400px，height 300 px，盒子就发生变化了
最终代码如下，建议从上至下一行一行写，然后看效果对比，能提高自身对盒子模型的理解，我这里就不一一展示了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
<style>
#div1{
width:400px;/* 宽度：400像素；默认是内容显示区域的宽度 */
height: 300px;/* 高度：300像素；默认是内容显示区域的高度 */
background-color: #ff0;
padding: 20px 30px;/* 内边距：20像素 */
box-sizing: border-box;/* 盒子模型：边框盒；宽度和高度包括内边距和边框；
默认是内容盒（content-box：宽度和高度只包括内容区域，不包括内边距和边框） */
border: 20px red;/* 边框：20像素，边框颜色：红色 */
margin: 20px auto;/* 外边距：20像素，外边距方向：水平方向 */
}
</style>
</head>
<body>
<div id="div1">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A</div>
<!-- <div id="div2">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A</div>
<span id="span1">B B B B B B B B B B B B B B B B B B B B B B B</span>
<span id="span2">B B B B B B B B B B B B B B B B B B B B B B B</span> -->
</body>
</html>
案例：参照页面原型，完成员工管理页面制作
页面原型：指在应用程序开发初期，由产品经理制作的一个早期项目模型，它用于展示页面的基本布局、功能和交互设计。通常用来帮助设计师、开发者等更好地理解和讨论最终产品的外观和行为。
- 顶部导航栏
- 搜索表单区域
- 表格数据展示区域
- 底部版权区域
顶部导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tlias案例-顶部导航栏</title>
<style>
.top{
width:80%;
height: 50px;
background-color: #aaaaaa;
display:flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 0 auto;
}
.top h1{
color:white;
/* 更改字体为楷体 */
font-family: "楷体";
}
.top button{
background: transparent;
border: none;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
font-size: 16px;
}
</style>
</head>
<body>
<div id="top" class="top">
<h1>tlias 智能学习辅助系统</h1>
<button>
<img src="img/u5.png" alt="退出登录">
退出登录
</button>
</div>
</body>
</html>
flex 布局
- flex 是 flexible Box 的缩写，意为“弹性布局”，是一种一维的布局模型。flex 布局可以为元素之间提供强大的空间分布和对齐能力。
- 通过给父容器添加 flex 的相关属性，来控制子元素的位置和排列方式。
搜索表单区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tlias案例-搜素表单区域</title>
<style>
.top{
width:80%;
height: 50px;
background-color: #aaaaaa;
display:flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 0 auto;
}
.top h1{
color:white;
/* 更改字体为楷体 */
font-family: "楷体";
}
.top button{
background: transparent;
border: none;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
font-size: 16px;
}
.search{
width:80%;
height: 100px;
display:flex;
flex-direction: row;
align-items: center;
margin: 0 auto;
gap: 30px;
font-size: 13px;
}
.search input,
.search select{
padding: 12px 0px;
color: #aaaaaa;
width: 200px;
}
.search button{
padding:9px 23px;
color:#aaaaaa
}
#search-btn{
background-color: #02a7f0;
color: #fff;
border: none;
}
#reset-btn{
background-color: #aaaaaa;
color: #fff;
border: none;
}
.search-space{
flex-grow: 1;
}
.search-btn{
display: flex;
gap: 10px;
}
</style>
</head>
<body>
<div id="top" class="top">
<h1>tlias 智能学习辅助系统</h1>
<button>
<img src="img/u5.png" alt="退出登录">
退出登录
</button>
</div>
<form action="https://httpbin.org/post" method="post">
<div id="search" class="search">
<label for="username">姓名</label>
<input type="text" name="username" id="username" placeholder="请输入员工姓名">
<label for="gender">性别</label>
<select name="gender" id="gender">
<option value="" disabled selected hidden>请选择</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
<label for="position">职位</label>
<select name="position" id="position">
<option value="" disabled selected hidden>请选择</option>
<option value="1">班主任</option>
<option value="2">讲师</option>
<option value="3">学工主管</option>
<option value="4">校研主管</option>
<option value="5">咨询师</option>
</select>
<div class="search-space"></div>
<div class="search-btn">
<button type="submit" id="search-btn">查询</button>
<button type="reset" id="reset-btn">清空</button>
</div>
</div>
</form>
</body>
</html>
表单标签
-
表单：在网页中主要负责数据采集功能，如：注册、登录等数据采集
-
标签：
<form> -
表单项：不同类型的 input 元素、下拉列表、文本域等。
<input>：定义表单项，通过 type 属性控制输入形式（text/password/...）
-
<select>：定义下拉列表 -
<textarea>：定义文本域 -
属性：
- action：规定当提交表单时向何处发送表单数据，URL
- method：规定用于发送表单数据的方式。GET、POST
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单标签</title>
</head>
<body>
<!-- form 表单：
action：表单数据提交的 url 地址
method：表单数据提交的方式
get：默认，表单数据会出现在 url 后面，形式：?name=value&name2=value2
特点：
1. 如果表单中包含了隐私数据，get 方式并不安全，不推荐使用该方式
2. 在浏览器中 get 请求的大小是有限制的，不适合提交大数据的表单
post：表单数据会在消息体 / 请求体中提交到服务器
特点：
1. 安全
2. 请求大小没有限制
注意：表单项要想能够采集数据，必须得设置 name 属性，表示当前表单项的名字
-->
<!-- 专门用来测试 HTTP 请求的免费工具网站 https://httpbin.org/ -->
<form action="https://httpbin.org/post" method="post">
<p>
<label for="username">用户名：</label>
<input type="text" name="username" id="username" placeholder="请输入用户名">
</p>
<p>
<label for="password">密码：</label>
<input type="password" name="password" id="password" required placeholder="请输入密码">
</p>
<p>
<input type="submit" value="登录">
</p>
</form>
</body>
</html>
表格数据展示区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tlias案例-表格数据展示区域</title>
<style>
.top{
width:80%;
height: 50px;
background-color: #aaaaaa;
display:flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 0 auto;
}
.top h1{
color:white;
/* 更改字体为楷体 */
font-family: "楷体";
}
.top button{
background: transparent;
border: none;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
font-size: 16px;
}
.search{
width:80%;
height: 100px;
display:flex;
flex-direction: row;
align-items: center;
margin: 0 auto;
gap: 30px;
font-size: 13px;
}
.search input,
.search select{
padding: 12px 0px;
color: #aaaaaa;
width: 200px;
}
.search button{
padding:9px 23px;
color:#aaaaaa
}
#search-btn{
background-color: #02a7f0;
color: #fff;
border: none;
}
#reset-btn{
background-color: #aaaaaa;
color: #fff;
border: none;
}
.search-space{
flex-grow: 1;
}
.search-btn{
display: flex;
gap: 10px;
}
table{
width:80%;
border-collapse: collapse;
margin: 0 auto;
font-size: 13px;
}
th, td{
border: 1px solid #aaaaaa;
padding: 10px;
text-align: center;
}
th{
background-color: #f2f2f2;
font-weight: bold;
}
td{
background-color: white;
padding: 5px 10px;
}
.operation{
gap: 20px;
}
.operation button{
color:orange;
border: none;
background-color: white;
}
</style>
</head>
<body>
<div id="top" class="top">
<h1>tlias 智能学习辅助系统</h1>
<button>
<img src="img/u5.png" alt="退出登录">
退出登录
</button>
</div>
<form action="https://httpbin.org/post" method="post">
<div id="search" class="search">
<label for="username">姓名</label>
<input type="text" name="username" id="username" placeholder="请输入员工姓名">
<label for="gender">性别</label>
<select name="gender" id="gender">
<option value="" disabled selected hidden>请选择</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
<label for="position">职位</label>
<select name="position" id="position">
<option value="" disabled selected hidden>请选择</option>
<option value="1">班主任</option>
<option value="2">讲师</option>
<option value="3">学工主管</option>
<option value="4">校研主管</option>
<option value="5">咨询师</option>
</select>
<div class="search-space"></div>
<div class="search-btn">
<button type="submit" id="search-btn">查询</button>
<button type="reset" id="reset-btn">清空</button>
</div>
</div>
</form>
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>头像</th>
<th>职位</th>
<th>入职时间</th>
<th>最后操作时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>赵敏</td>
<td>女</td>
<td><img src="img/u6.png" alt="赵敏"></td>
<td>班主任</td>
<td>2008-12-18</td>
<td>2023-07-22 12:05:20</td>
<td class="operation">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>王伟</td>
<td>男</td>
<td><img src="img/u6.png" alt="王伟"></td>
<td>讲师</td>
<td>2010-05-01</td>
<td>2023-07-22 12:05:20</td>
<td class="operation">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>王芳</td>
<td>女</td>
<td><img src="img/u6.png" alt="王芳"></td>
<td>讲师</td>
<td>2010-05-01</td>
<td>2023-07-22 12:05:20</td>
<td class="operation">
<button>编辑</button>
<button>删除</button>
</td>
</td>
</tr>
<tr>
<td>王伟</td>
<td>男</td>
<td><img src="img/u6.png" alt="王伟"></td>
<td>讲师</td>
<td>2010-05-01</td>
<td>2023-07-22 12:05:20</td>
<td class="operation">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>王伟</td>
<td>男</td>
<td><img src="img/u6.png" alt="王伟"></td>
<td>讲师</td>
<td>2010-05-01</td>
<td>2023-07-22 12:05:20</td>
<td class="operation">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>王伟</td>
<td>男</td>
<td><img src="img/u6.png" alt="王伟"></td>
<td>讲师</td>
<td>2010-05-01</td>
<td>2023-07-22 12:05:20</td>
<td class="operation">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>王伟</td>
<td>男</td>
<td><img src="img/u6.png" alt="王伟"></td>
<td>讲师</td>
<td>2010-05-01</td>
<td>2023-07-22 12:05:20</td>
<td class="operation">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>王伟</td>
<td>男</td>
<td><img src="img/u6.png" alt="王伟"></td>
<td>讲师</td>
<td>2010-05-01</td>
<td>2023-07-22 12:05:20</td>
<td class="operation">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>王伟</td>
<td>男</td>
<td><img src="img/u6.png" alt="王伟"></td>
<td>讲师</td>
<td>2010-05-01</td>
<td>2023-07-22 12:05:20</td>
<td class="operation">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>王伟</td>
<td>男</td>
<td><img src="img/u6.png" alt="王伟"></td>
<td>讲师</td>
<td>2010-05-01</td>
<td>2023-07-22 12:05:20</td>
<td class="operation">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>
- 表格标签
| 标签 | 描述 |
|---|---|
<table> |
定义表格整体 |
<thead> |
用于定义表格头部（可选） |
<tbody> |
定义表格中的主体部分（可选） |
<tr> |
表格的行，可以包裹多个<td> |
<td> |
表格单元格（普通），可以包裹内容；如果是表头单元格，可以替换为<th> |
底部版权区域
最终复现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tlias案例-底部版权区域</title>
<style>
.top{
width:80%;
height: 50px;
background-color: #aaaaaa;
display:flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 0 auto;
}
.top h1{
color:white;
/* 更改字体为楷体 */
font-family: "楷体";
}
.top button{
background: transparent;
border: none;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
font-size: 16px;
}
.search{
width:80%;
height: 100px;
display:flex;
flex-direction: row;
align-items: center;
margin: 0 auto;
gap: 30px;
font-size: 13px;
}
.search input,
.search select{
padding: 12px 0px;
color: #aaaaaa;
width: 200px;
}
.search button{
padding:9px 23px;
color:#aaaaaa
}
#search-btn{
background-color: #02a7f0;
color: #fff;
border: none;
}
#reset-btn{
background-color: #aaaaaa;
color: #fff;
border: none;
}
.search-space{
flex-grow: 1;
}
.search-btn{
display: flex;
gap: 10px;
}
table{
width:80%;
border-collapse: collapse;
margin: 0 auto;
font-size: 13px;
}
th, td{
border: 1px solid #aaaaaa;
padding: 10px;
text-align: center;
}
th{
background-color: #f2f2f2;
font-weight: bold;
}
td{
background-color: white;
padding: 5px 10px;
}
.operation{
gap: 20px;
}
.operation button{
color:orange;
border: none;
background-color: white;
}
.footer{
width:80%;
background-color: #d7d7d7;
text-align: center;
margin: 20px auto;
padding: 13px 0px;
}
.footer p{
color:white;
margin: 0px;
font-size: 14px;
}
</style>
</head>
<body>
<div id="top" class="top">
<h1>tlias 智能学习辅助系统</h1>
<button>
<img src="img/u5.png" alt="退出登录">
退出登录
</button>
</div>
<form action="https://httpbin.org/post" method="post">
<div id="search" class="search">
<label for="username">姓名</label>
<input type="text" name="username" id="username" placeholder="请输入员工姓名">
<label for="gender">性别</label>
<select name="gender" id="gender">
<option value="" disabled selected hidden>请选择</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
<label for="position">职位</label>
<select name="position" id="position">
<option value="" disabled selected hidden>请选择</option>
<option value="1">班主任</option>
<option value="2">讲师</option>
<option value="3">学工主管</option>
<option value="4">校研主管</option>
<option value="5">咨询师</option>
</select>
<div class="search-space"></div>
<div class="search-btn">
<button type="submit" id="search-btn">查询</button>
<button type="reset" id="reset-btn">清空</button>
</div>
</div>
</form>
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>头像</th>
<th>职位</th>
<th>入职时间</th>
<th>最后操作时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>赵敏</td>
<td>女</td>
<td><img src="img/u6.png" alt="赵敏"></td>
<td>班主任</td>
<td>2008-12-18</td>
<td>2023-07-22 12:05:20</td>
<td class="operation">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>王伟</td>
<td>男</td>
<td><img src="img/u6.png" alt="王伟"></td>
<td>讲师</td>
<td>2010-05-01</td>
<td>2023-07-22 12:05:20</td>
<td class="operation">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>王芳</td>
<td>女</td>
<td><img src="img/u6.png" alt="王芳"></td>
<td>讲师</td>
<td>2010-05-01</td>
<td>2023-07-22 12:05:20</td>
<td class="operation">
<button>编辑</button>
<button>删除</button>
</td>
</td>
</tr>
<tr>
<td>王伟</td>
<td>男</td>
<td><img src="img/u6.png" alt="王伟"></td>
<td>讲师</td>
<td>2010-05-01</td>
<td>2023-07-22 12:05:20</td>
<td class="operation">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>王伟</td>
<td>男</td>
<td><img src="img/u6.png" alt="王伟"></td>
<td>讲师</td>
<td>2010-05-01</td>
<td>2023-07-22 12:05:20</td>
<td class="operation">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>王伟</td>
<td>男</td>
<td><img src="img/u6.png" alt="王伟"></td>
<td>讲师</td>
<td>2010-05-01</td>
<td>2023-07-22 12:05:20</td>
<td class="operation">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>王伟</td>
<td>男</td>
<td><img src="img/u6.png" alt="王伟"></td>
<td>讲师</td>
<td>2010-05-01</td>
<td>2023-07-22 12:05:20</td>
<td class="operation">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>王伟</td>
<td>男</td>
<td><img src="img/u6.png" alt="王伟"></td>
<td>讲师</td>
<td>2010-05-01</td>
<td>2023-07-22 12:05:20</td>
<td class="operation">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>王伟</td>
<td>男</td>
<td><img src="img/u6.png" alt="王伟"></td>
<td>讲师</td>
<td>2010-05-01</td>
<td>2023-07-22 12:05:20</td>
<td class="operation">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td>王伟</td>
<td>男</td>
<td><img src="img/u6.png" alt="王伟"></td>
<td>讲师</td>
<td>2010-05-01</td>
<td>2023-07-22 12:05:20</td>
<td class="operation">
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</tbody>
</table>
<footer class="footer">
<p>江苏传智播客教育科技股份有限公司</p>
<p>版权所有 Copyright 2006-2024 All Rights Reserved</p>
</footer>
</body>
</html>
复现结果
浙公网安备 33010602011771号