JavaEE之HTML常见标签及个人简历制作 一、前言 二、

发表于

这是我参与11月更文挑战的第16天，活动详情查看：2021最后一次更文挑战」 @TOC

一、前言

1、 HTML代码都是由各种各样的标签构成的。
2、HTML代码基础结构

1
2
3
4
5
6
7
8
9
10
11
12
html复制代码<!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>
    
</body>
</html>

二、HTML的各种标签

2.1注释标签

1
html复制代码<!-- 注释 -->

在VSCODE中可以使用 ctrl+/的快捷键注释、取消注释。与Java不同的是，HTML的注释可以在开发者工具中看到。当打开一个网页的时候按F12就可以打开开发者工具了。
在这里插入图片描述

2.2标题标签

从h1，到h6,一共6个，数字越小，字体越大。来一起看看效果。
代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
html复制代码<!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>最大的一级标签</h1>
    <h2>第二大的二级标签</h2>
    <h3>第三大</h3>
    <h4>第四大</h4>
    <h5>老五</h5>
    <h6>老弟</h6>
</body>
</html>

效果图：
在这里插入图片描述

2.3段落标签：P

顾名思义一个段落标签就代表一个段落。
假如我这里需要将一段很长的文字复制到HTML代码中。它本来是长这样的：
即是分段的。但是实际上是。。。

写作最好的老师，是写作本身， 老师最好的老师，是教学本身。

刘韧曾在2002年出版的《知识英雄2.0》结尾处反思，“我已经做了10年记者，在这10年中，与被采访对象的关系问题，一直是我需要认真回答的问题。”

20年后的今天，这个问题仍有继续追问的价值。

这里面包括两个问题，即采访对象为什么要接受记者采访？以及记者为什么要进行采访？大多数的人物采访和报道，无法达成预期，便是这两个问题没有想明白，弄清楚。

如何深度思考这两个问题？CSDN特邀《知识英雄2.0》作者刘韧先生，共建“CSDN刘韧写作班”，特招热爱写作的科技报道者，助其精进采访与写作之能力，提升持续自我进化之思维。

刘韧赞成费孝通说的：我并不认为教师的任务是在传授已有的知识，这些学生们自己可以从书本上去学习，而主要是在引导学生敢于向未知的领域进军。作为教师的人就得带个头。至于攻关的结果是否获得了可靠的知识，那是另一个问题。

刘韧想提高自己的写作水平，所以办班，借助学生的力量，探索写作新知。

实际上：粘在一起，并没有分段。
在这里插入图片描述
这时候就需要段落标签P出马了。

p标签使用样例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
html复制代码<!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>最大的一级标签</h1>
    <h2>第二大的二级标签</h2>
    <h3>第三大</h3>
    <h4>第四大</h4>
    <h5>老五</h5>
    <h6>老弟</h6> -->
  <p>写作最好的老师，是写作本身，
    老师最好的老师，是教学本身。</p>  

    <p>刘韧曾在2002年出版的《知识英雄2.0》结尾处反思，“我已经做了10年记者，在这10年中，与被采访对象的关系问题，一直是我需要认真回答的问题。”

20年后的今天，这个问题仍有继续追问的价值。</p>

<p>这里面包括两个问题，即采访对象为什么要接受记者采访？以及记者为什么要进行采访？大多数的人物采访和报道，无法达成预期，便是这两个问题没有想明白，弄清楚。

    如何深度思考这两个问题？CSDN特邀《知识英雄2.0》作者刘韧先生，共建“CSDN刘韧写作班”，特招热爱写作的科技报道者，助其精进采访与写作之能力，提升持续自我进化之思维。
    
    刘韧赞成费孝通说的：我并不认为教师的任务是在传授已有的知识，这些学生们自己可以从书本上去学习，而主要是在引导学生敢于向未知的领域进军。作为教师的人就得带个头。至于攻关的结果是否获得了可靠的知识，那是另一个问题。
    
    刘韧想提高自己的写作水平，所以办班，借助学生的力量，探索写作新知。</p>

</body>
</html>

效果展示：嗯，这次分段了，很不错。
在这里插入图片描述

2.4换行标签：br

br是break的缩写。代表换一行。需要注意的是br是单标签不需要想段落标签p一样结尾在跟一个

。
举例：

1
2
3
html复制代码  12345
    <br>
    23456

效果：12345和23456没在一行
在这里插入图片描述

2.5图片标签:img

使用格式：<img src="xxx.png">
其中src代表图片路径，可以是网络路径，也可以是本地的。

2.6:超链接标签：a

提供一个链接的标签，点击后当前页面跳转到目标网页。
使用格式：<a href="http://www.xxx.com"></a>

2.7表格标签

表格标签有以下几类：
table：表示整个表格
tr：表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域
tbody: 表格得到主体区域.

举一个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
html复制代码 <table width="600px">
        <tr>
            <td>姓名</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="gender"  checked="checked" id="male">
                <label for="male"><img src="image/男.png" width="20" height="20">男</label>
                <input type="radio" name="gender" id="famale" >
                <label for="famale"><img src="image/女.png" width="20" height="20">女</label>
            </td>
        </tr>

效果：
在这里插入图片描述

2.8列表标签

列表标签分为有序列表和无序列表：
有序列表：ul，li
无序列表：ol，li
自定义列表：dl、dt、dd

有序列表、无序列表标签演示：

1
2
3
4
5
6
7
8
9
10
html复制代码  <ul>
        <!--无序列表-->
        <li>Java</li>
        <li>C++</li>
    </ul>
    <ol>
        <!--有序列表-->
        <li>数据结构</li>
        <li>多线程</li>
    </ol>

在这里插入图片描述

三、 综合案例：

3.1展示简历

效果图：
在这里插入图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
html复制代码<!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>简历信息 </title>
</head>
<body>
<h1>张嘉文</h1>
<!--我是注释 嘿嘿嘿-->
<div>
    <h2>基本信息</h2>
    <img src="张嘉文照片/uzi.png"  width="500" height="500">
    <p><span>求职意向：Java开发工程师</span></p>
    <p><span>联系电话：123-456-7892</span></p>
    <p><span>邮箱：xxx@forxmail.com</span></p>
    <p><a href="https://gitee.com/"> 我的Gitee</a></p>
    <p><a href="https://www.csdn.net/">我的博客</a></p>
</div>

<!--教育背景,用div试试-->
<div>
    <h2>  教育背景</h2>
    <ol>
        <li>2004-2008  xxx 幼儿园</li>
        <li>2008-2012  xxx 小学</li>
        <li>2013-2016  xxx 初中</li>
        <li>2016-2020  xxx 高中</li>
        <li>2020-2024  xxx 大学</li>
    </ol>

</div>


<div>
<!--专业技能-->
<h2>专业技能</h2>

    <li>Java基础语法扎实</li>
    <li>常见数据结构都可以独立实现并熟练应用</li>
    <li>熟知计算机网络理论</li>
    <li>掌握web开发能力</li>

</div>

<div>
    <!--我的项目-->
    <h2>我的项目</h2>
<ol>
<li>
    <h3>留言墙</h3>
    <p>开发时间：2008年8月到2009年10月</p>
    <p>功能介绍:</p>
    <ul>
        <li>支持同学留言</li>
        <li>支持匿名留言</li>
    </ul>
    <li> <h3>复盘助手</h3></li>
   

<p>开发时间：2021年11月到2021年12月</p>
<p>功能介绍:
    <ul>
        <li>能复盘LPL比赛</li>
        <li>能查出谁是演员</li>
    </ul>
</p>
</ol>
</div>

<h2>个人评价</h2>   
  <p>在校期间学习优良</p>
</body>
</html>

3.2填写简历：

效果图：
在这里插入图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
html复制代码<!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>填写简历</title>
</head>
<body>
    <h3>请填写简历信息</h3>
    <table width="600px">
        <tr>
            <td>姓名</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="gender"  checked="checked" id="male">
                <label for="male"><img src="image/男.png" width="20" height="20">男</label>
                <input type="radio" name="gender" id="famale" >
                <label for="famale"><img src="image/女.png" width="20" height="20">女</label>
            </td>
        </tr>
        <tr>
            <td>出生日期</td>
            <td>
                <select> 
                    <option>--请选择年份</option>
                    <option>1999</option>
                    <option>2000</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>
                </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 cols="50" rows="10" ></textarea>
            </td>
        </tr>
        <tr>
            <td>项目经历</td>
            <td>
                <textarea cols="50" rows="10"></textarea>
            </td>
        </tr>
        <tr>
            <td></td>
                <td>
                    <input type="checkbox" id="confirm"> <label for="confirm">我已仔细阅读过公司的招聘要求</label>
                </td>
            
        </tr>
        <tr>
            <td></td>
            <td>
                <a href="#">查看我的状态</a> 
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
            <h4>应聘者确认：</h4>
            <ul>
                <li>以上信息真实有效</li>
                <li>能够尽早来公司实习</li>
                <li>能够接受公司加班文化</li>
            </ul>
            </td>
        </tr>
    </table>
</body>
</html>

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%