HTML综合案例练习_html案例_安苒_的博客-程序员秘密

技术标签：前端 html

一、展示简历内容

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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>
    邮箱：[email protected]<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快捷键提高输入效率
图标图片可以去这个网站上找

本文链接：https://blog.csdn.net/moteandsunlight/article/details/129224396

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

vue项目中使用echarts_欧阳呀的博客-程序员秘密

1. 安装npm install echarts --savepackage.json中有此项，代表安装成功2.引入全部组件如果你项目里需要用到各种各样的图表，建议使用本条。main.js 中引入// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts使用export default { name: 'hello', data () { retu...

数据结构笔记-----数据结构与算法_数据结构与算法笔记_碧海蓝天观潮涌的博客-程序员秘密

程序是为了解决实际问题而存在的例如：怎样把大象放到冰箱里？程序如下：那么该如何编写程序，在理解C语言语法后，首先理解实际问题。1.确认问题类型如：数值计算，求最小值 2.确认求解步骤打开文件，读数据，关闭文件，计算和程序部件之数据结构

js原生获取某个div下的所有子节点_js获取div下的子元素_小橙几的博客-程序员秘密

var parentNode = document.getElementById('wrapper');var inputArray = parentNode.getElementsByTagName('input');

MATLAB数组矩阵的拼接_matlab数组拼接_旦旦发电机的博客-程序员秘密

MATLAB数组矩阵的拼接函数

并发编程之JMM内存模型（一）— 底层实现原理_jmm内存模型的实现_想坐飞机的乌鸦的博客-程序员秘密

一丶前言什么是JMM?JMM(Java Memory Model)即Java内存模型，Java语言规范中提到过，JVM中存在一个主存区（Main Memory或Java Heap Memory），Java中所有变量都是存在主存中的，对于所有线程进行共享，而每个线程又存在自己的工作内存（Working Memory），工作内存中保存的是主存中某些变量的拷贝，线程对所有变量的操作并非发生在主...

再次紫光_lqs1985的博客-程序员秘密

<br />今天又去面试了紫光，还是那个公司，还是那个题目，但是我怎么就没有信心做下来呢？不知道怎么回事了！<br />似乎昨天的那场球踢得有点过了，呵呵，搞得今天完全不在状态，有失水准。<br />到了紫光，前台的小妞正在处理离职员工的事宜，然后我被安排去了笔试，哎~<br />等待工作的电话号码。。。3月底至今，只有唯一一个公司给我复试面试的机会，可想而知我的面试效果很差，不是一般的差，连争取职位的资格都没有。杯具。昨天的那场球和那场酒局，完全明白了一个道理，或者是真理：在中国这个世界，还是以人际利益交

随便推点

模型压缩文章总结_frostjsy的博客-程序员秘密

1、模型压缩好文章汇https://zhuanlan.zhihu.com/p/94359189(tinybert)在统计学中，均方误差（英语：mean-square error、MSE）是对于无法观察的参数X的一个估计函数T；其定义为：MSE(T)=E((X-T)^2)在文中针对各层介绍了几种损失函数：1、embedding层：teacher和student的词嵌入层的蒸馏均方误差损失2、transform层蒸馏：隐层损失和attention损失3、预测层损失，teache.

Go安装配置_jaronho的博客-程序员秘密

文章目录查看环境变量命令查看环境变量命令go env

【剑指offer刷题】JZ7：斐波那契数列_Spikeloiter的博客-程序员秘密

转载请注明出处：https://blog.csdn.net/loiter2/article/details/108089114【剑指offer刷题】JZ6：找到旋转数组的最小数字1、题目分析1.1题目描述与理解1.2 解法分析2、代码实现2.1 递归2.2 空间换时间2.3 动态规划该文章只是用来记录一下刷题过程，本文的记录和解答用的Java语言。在刷到这道题之前，在帅地的《程序员内功修炼》中看到过对应的题，对刷这道题启发很大，很棒的一个博主，推荐关注其公众号：帅地玩编程。1、题目分析1.1题目描述