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

HTML综合案例练习

news 2025/9/13 17:11:42

一、展示简历内容

可以首先看一下我们的效果，之后再思考怎么实现

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6a8XAHrq-1677379938090)(F:\typora插图\image-20230226100835985.png)]

总的来说，这个练习不算难。

这里关于这个简历的代码编写我们不说太多，只注意以下几个内容即可：

  • 注意及时查看我们的代码是否符合预期，即一段一段测

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WQPYE8AN-1677379938091)(F:\typora插图\image-20230226091532881.png)]

  • 基本信息那里的内容应该是普通文字，但是注意加换行符

  • 项目那里注意不同级别的划分

  • 功能介绍是二级的无序

话不多说，直接看效果和源码！！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>Karry的简历</h1><img src="f:/typora插图/头像.jpg" alt="这是一个头像"  title="Julie Baker" width="400px",height="300px"><h2>基本信息</h2>求职意向：Java开发工程师<br>联系电话：123-456-789<br>邮箱：xxs@qq.com<br><a href="https://blog.csdn.net/moteandsunlight?spm=1000.2115.3001.5343">我的gitee</a><br><a href="https://blog.csdn.net/moteandsunlight?spm=1000.2115.3001.5343">我的blog</a><br><h2>教育背景</h2><ol><li>2008-2009小葵花幼儿园 幼儿园</li><li>2009-2015小葵花小学 小学</li><li>2016-2018小葵花中学 初中</li><li>2018-2021小葵花中学 高中</li><li>2021-2015小葵花大学 计算机专业 本科</li></ol><h2>专业技能</h2><ul><li>熟练掌握Java的基本语法，熟悉面向对象程序设计思想</li><li>熟悉常见的数据结构与算法，例如顺序表、链表、二叉树、堆、哈希表等</li><li>熟悉掌握操作系统中的典型概念，熟练掌握并发编程，对于多线程，线程安全，加锁等操作有深刻的理解</li><li>熟练掌握网络编程，熟悉网络通信原理，熟悉TCP/IP协议栈中的典型协议工作机制</li><li>熟练掌握SQL，能够进行基础的增删查改，熟悉mysql的索引和事务等机制</li></ul><h2>我的项目</h2><ol><li><h3>留言墙</h3>开发时间：2023年9月初到2023年12月底<br>功能介绍：<br><ul><li>支持留言发布</li><li>支持匿名留言</li></ul></li><li><h3>学习小助手</h3>开发时间：2023年9月初到2023年12月底<br>功能介绍：<br><ul><li>支持错题检索</li><li>支持同学探讨</li></ul></li></ol><h2>个人评价</h2><ul><li>善于总结记录，博客写了不少</li><li>身体健康，能跑会跳</li></ul>
</body>
</html>

二、简历内容填写

首先可以看一下我们最终的效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-twwXkUwX-1677379938092)(F:\typora插图\image-20230226100545982.png)]

接下来，我们思考怎么实现。

这里由于这个练习代码相对更多，更琐碎，所以这里列了一个思维导图，帮助理解。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-34moocxi-1677379938093)(F:\typora插图\填写简历信息.jpg)]

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table><!-- thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的) --><thead><h3>请填写简历信息</h3></thead><!-- tbody: 表格得到主体区域. --><tbody><!-- tr: 表示表格的一行 --><tr><!-- td: 表示一个单元格 --><td><!-- 搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验 --><label for="name">姓名</label></td><td><!-- 单行文本框 --><input type="text" id="name"></td></tr><tr><td>性别</td><td><!-- 要保证是单选框，要加个name="sex" --><input type="radio" name="sex" id="male" checked><label for="male"><img src="./image/男.png" alt="" width="20px">男</label><input type="radio" name="sex" id="female"><label for="female"><img src="./image/女.png" alt=""width="20px">女</label></td></tr><tr><td>出生日期</td><td><select><option>请选择年份</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option></select><select><option>请选择月份</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option></select><select><option>请选择日期</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option></select></td></tr><tr><td>就读学校</td><td><input type="text"></td></tr><tr><td>应聘单位</td><td><!-- 这里使用的是复选框 --><input type="checkbox" id="frontend"><label for="frontend">前端开发</label><input type="checkbox" id="backend"><label for="backend">后端开发</label><input type="checkbox" id="qa"><label for="qa">测试开发</label><input type="checkbox" id="op"><label for="op">运维开发</label></td></tr><tr><td>掌握的技能</td><td><textarea name="" id="" cols="30" rows="10"></textarea></td></tr><tr><td>项目经历</td><td><textarea name="" id="" cols="30" rows="10"></textarea></td></tr><tr><td></td><td><input type="checkbox" id="lisence"><label for="lisence">我以仔细阅读过公司的招聘要求</label></td></tr><tr><td></td><td><a href="#">查看我的简历状态</a></td></tr><tr><td></td><td><h3>请应聘者确认：</h3><ul><li>以上信息真实有效</li><li>能够尽早去公司实习</li><li>能接受公司的加班文化</li> </ul></td></tr></tbody></table>
</body>
</html>

三、总结

关于HTML

总的来讲，html还是比较简单的。这跟它自身的特点有关——标签化的语言，这就意味着，要想掌握好它，就要把这些常用的标签练熟，但是对于后端开发人员，这些只做一些了解即可。

我们上一篇博客总结了：注释标签、标题标签、段落标签、换行标签、格式化标签、图片标签、表格标签、列表标签、表单标签（input、select、form、textarea）等等

对于练习的一些总结建议

  • 我们可以使用标题进行布局、也可以使用table进行布局
  • 可以使用input标签和textarea实现页面的输入
  • 针对下拉框，使用emmet快捷键提高输入效率
  • 图标图片可以去这个网站上找
  • 在这里插入图片描述

相关文章：

HTML综合案例练习

一、展示简历内容 可以首先看一下我们的效果&#xff0c;之后再思考怎么实现 总的来说&#xff0c;这个练习不算难。 这里关于这个简历的代码编写我们不说太多&#xff0c;只注意以下几个内容即可&#xff1a; 注意及时查看我们的代码是否符合预期&#xff0c;即一段一段测 …...

编程日记 2023/2/26 16:23:21

MySQL运维

目录 1、日志 1、错误日志 2、二进制日志 3、查询日志 4、慢查询日志 2、主从复制 搭建 1、主库配置 2、从库配置 3、分库分表 1、简介 ​编辑 1、垂直拆分 2、水平拆分 3、实现技术 2、MyCat 3、MyCat使用和配置 配置 4、MyCat分片 1、垂直拆分 2、水平拆分…...

编程日记 2023/2/26 16:22:16

【网络原理10】构造HTTP请求、HTTPS加密

目录 一、构造HTTP请求 ①使用form表单构造HTTP请求&#xff1a; form表单是如何提交的 form提交的缺点 ②基于ajax构造http请求 如何使用Jquery框架 二、HTTPS 运营商劫持 HTTP的加密版本&#xff1a;HTTPS ①对称加密&#xff1a;客户端和服务端使用同一把密钥&…...

编程日记 2023/2/26 16:21:11

Allegro如何锁定报表界面操作指导

Allegro如何锁定报表界面操作指导 用Allegro做PCB设计的时候，进行测量的时候，比如测量器件两个PIN中间的间距，如下图，会有一个报表显示 但是当运行下一个命令的时候，报表会被自动关闭掉。 但是有时我们需要报表界面仍被保留 下面介绍如何将报表界面进行锁定，不受下一个…...

编程日记 2023/2/26 16:20:07

基于STM32的微型电子琴设计

基于STM32的微型电子琴设计报告中的图片和文字太多了&#xff0c;全部一个一个把搬过来太麻烦了,需要完整文本和代码自行q我963160156 第一章 总体设计1.1 系统功能1.2 主要技术性能指标第二章硬件设计2.1 整体硬件图2.2 按键模块2.3 扬声器模块2.4 显示模块2.5 主控模块第三章…...

编程日记 2023/2/26 16:19:03

Shell输入输出重定向

一、文件描述符 文件描述符是一个非负整数。它是一个索引值&#xff0c;指向进程打开的文件。 Linux 程序在执行任何形式的 I/O 操作时&#xff0c;都是在读取或者写入一个文件描述符。 每个文件描述符会与一个打开的文件相对应 不同的文件描述符也可能指向同一个文件 在L…...

编程日记 2023/2/26 16:17:57

华为OD机试-运维日志排序

文章目录题目描述输入描述输出描述&#xff1a;示例Java 代码实现题目描述 运维工程师采集到某产品线网运行一天产生的日志n条&#xff0c;现需根据日志时间先后顺序对日志进行排序&#xff0c;日志时间格式为H:M:S.N。 H表示小时(0~23) M表示分钟(0~59) S表示秒(0~59) N表…...

编程日记 2023/2/26 16:16:50

1Kotlin基础知识

1 变量 1.1 用法 Kotlin中的变量定义有2个关键字&#xff0c;val和var val用来定义不可变变量&#xff0c;第一次赋值后就不能再被修改了&#xff0c; var定义可变变量&#xff0c; 随便修改。一个好的编程习惯是&#xff0c; 能用val的就不要用var&#xff0c; 原因是安全&a…...

编程日记 2023/2/26 16:15:41

Redis Lua脚本

文章目录一.引言二.eval简介三.lua数据类型和redis数据类型之间转换四.脚本的原子性五.错误处理六.纯函数脚本七.选择内部脚本一.引言 eval和evalsha命令使用内置的lua解释器&#xff0c;可以对lua脚本进行求值。 二.eval简介 第一个参数是一段脚本程序第二个参数是参数的个…...

编程日记 2023/2/26 16:14:34

web自动化测试-执行 JavaScript 脚本

JavaScript 是一种脚本语言&#xff0c;有的场景需要使用 js 脚本注入辅助我们完成 Selenium 无法做到的事情。 当 webdriver 遇到无法完成的操作时&#xff0c;可以使用 JavaScript 来完成&#xff0c;webdriver 提供了 execute_script() 方法来调用 js 代码。 执行 js 有两种…...

编程日记 2023/2/26 16:13:30

libevent笔记——简单介绍

背景 libevent libevent – an event notification library 官方定义&#xff1a;libevent是一个事件通知的库。更详细的介绍参考官方的就够了&#xff0c;这里我摘抄一下&#xff0c;并做一些注释 The libevent API provides a mechanism to execute a callback function whe…...

编程日记 2023/2/26 16:12:25

C++学习笔记-多态

多态的概念 多态的概念&#xff1a;通俗来说&#xff0c;就是多种形态&#xff0c; 具体点就是去完成某个行为&#xff0c;当不同的对象去完成时会 产生出不同的状态 。 举个例子&#xff1a;比如 买票这个行为 &#xff0c;当 普通人 买票时&#xff0c;是全价买票&#xff1b…...

编程日记 2023/2/26 16:11:19

5632: 三角形

描述平面坐标系下&#xff0c;给定不共线的三个点组成一个三角形&#xff0c;问三角形最短的边长和最长的边长各为多少&#xff1f;输入输入包含3行&#xff0c;每行两个整数&#xff0c;表示一个点的坐标x和y。输出输出包括2个小数&#xff0c;分别为最短的边长和最长的边长。…...

编程日记 2023/2/26 16:10:14

Java基础--IO操作

一、IO原理及分类 一、IO原理 1、I/O是Input/Output的缩写&#xff0c;I/O技术是非常实用的技术&#xff0c;用于处理设备之间的数据传输&#xff0c;如读写文件&#xff0c;网络通信等。 2、java程序中对于数据的输入/输出操作一般都是以流的方式进行 3、java.io包下提供各…...

编程日记 2023/2/26 16:09:07

C++多线程

目录一、C线程库1. 认识thread类2. 线程函数的参数3. this_thread二、原子操作三、C互斥锁1. mutex2. lock_guard3. unique_lock四、C条件变量1. condition_variable2. 实现两个线程交替打印奇偶数一、C线程库 1. 认识thread类 在C11之前没有多线程的概念&#xff0c;涉及到的…...

编程日记 2023/2/26 16:08:02

【Arduino使用nRF24L01 】

【Arduino使用nRF24L01 】 1. 概述2. nRF24L01 收发器模块2.1工作原理2.2 NRF24L01模块变体2.3 nRF24L01 模块引脚排列3. 如何将 nRF24L01 连接到 Arduino3.1 原理接线图3.2 Arduino 和 nRF24L01 代码3.3 代码说明4. 故障排除5. 两个NRF24L01和Arduino进行双向无线通信5.1 nRF2…...

编程日记 2023/2/26 16:06:58

Appium自动化测试框架是一种较为优雅的使用方式

以操作小米商城下单为例流程是 启动小米商城app, 点击分类&#xff0c;点击小米手机&#xff0c; 点击小米10 至尊版&#xff0c;点击加入购物车&#xff0c;点击确定....原脚本Copyfrom time import sleep from appium import webdriver from selenium.common.exceptions impo…...

编程日记 2023/2/26 16:05:52

Linux c编程之应用交互协议分析与设计

在实际编程应用中，两个或多个功能服务（模块）之间 需要通过消息交互进行协作完成用户想要的逻辑功能，这里的消息交互指的是应用层的交互。最终数据传输（无论是TCP/IP还是其它）都是以二进制形式完成，但对于应用层协议来说有两种，一种是二进制协议，一种是文本协议。不管是…...

编程日记 2023/2/26 16:04:47

基于YOLOv5的细胞检测实战

数据及代码链接见文末 1.任务与数据集介绍 如下图所示，我们有一个医学细胞数据集，需要从数据集中检测出三种不同的细胞。标签中已经标注了细胞的类别和位置。 我们也可以看到，三种细胞有着不同的形态和颜色，同时数据集的标签也存在没有标注到的细胞 2.数据与标签配置方…...

编程日记 2023/2/26 16:03:42

【经典蓝牙】蓝牙AVRCP协议分析

协议简介 蓝牙AVRCP协议是蓝牙设备之间音视频的控制协议。定义了音频/视频的控制、浏览、查询、通知等一系列的命令集。常用来蓝牙耳机对手机的音乐进行控制&#xff0c;以及获取手机的音乐信息等场景。AVRCP协议有两个角色&#xff0c;分别是controller&#xff08;CT&#x…...

编程日记 2023/2/26 16:02:38

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2025/9/12 21:37:26

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2025/9/13 15:30:52

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

编程新知 2025/9/5 21:48:13

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2025/9/8 21:10:29

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/7/9 21:22:02

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2025/8/30 23:51:46

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2025/9/13 0:07:58

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

编程新知 2025/7/31 23:29:00

Chromium 136 编译指南 Windows篇：depot_tools 配置与源码获取（二）

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

编程新知 2025/9/9 16:52:54

掌握 HTTP 请求：理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

编程新知 2025/7/9 20:52:19