-
【JavaEE】HTML
JavaWeb
HTML
- 超文本：文本、声音、图片、视频、表格、连接
- 标记：有许许多多的标签组成
vscode开发工具搭建
因为我使用的IDEA是社区版，代码高亮补全缩进都有些问题，使用vscode是最好的选择~
安装
Visual Studio Code - Code Editing. Redefined
下载完毕后，一路next即可完成安装~
插件推荐
编写第一个html页面
记事本编写代码：效果，在浏览器上直接显示hello world
以上写法当然不标准
<html> <head> <title>这是页面标题title> head> <body> hello world body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
-
html：html文件根标签
-
head：编写相关页面的相关属性
-
title：页面标题
-
body：页面内容展示信息
DOM树
所有的标签都是html的子标签
head和body是兄弟标签
head和title是下兄弟标签
双标签：有始有终
单标签
快速生成代码框架 ：！+ enter
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
html标签
注释标签
<!-->- 1
标题标签
h1-h6
段落标签
<p>p>- 1
换行标签
<br/>- 1
换行后的间隙比段落的小
格式化标签
加粗：strong 、b
倾斜：em、i
删除线：del、s
下划线：ins、u
img标签
src属性
img标签必须搭配src使用（图片路径）相对路径
./xxx.png ./img/xxx.png ../xxx.png 上一层路径- 1
- 2
- 3
绝对路径
图片路径
网络上的图片资源
其他属性
-
alt：替换文本
当图片加载失败，就会出现替换文本
-
title：提示文本
鼠标放在图片上就会出现文本
-
width/height
调整大小
-
border
边框
a标签（超链接）
href
点击后就跳到哪个页面，图片也可以
target
默认是
_self,跳转新页面，覆盖原页面_blank打开新页面且跳转表格标签
table标签
表示整个表格
tr
表示表格一行
td
表示一个单元格
th
表示表头单元铬，居中加粗
thead
表格的头部区域（范围比th大）
tbody
表格得到主体区域
表格标签有一些属性可以用于设置大小边框等.但是一般使用CSS方式来设置
这些属性都要放到table标签中，align是表格相对于周围元素的对济方式.a1ign="center"(不是内部元素的对齐方式)border表示边框.1表示有边框（数字越大，边框越粗），"表示没边框cellpadding:内容距离边框的距离，默认1像素cellspacing:单元格之间的距离.默认为2像素width/height:设置尺寸
使用
表格头部+表格主体+单元格合并
-
thead里的内容居中+加粗
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <table border="1" width="500" height="300" cellspacing="0" cellpadding="50" align="center"> <thead> <tr> <th>姓名th> <th>性别th> <th>年龄th> tr> thead> <tr> <td>姓名td> <td>性别td> <td>年龄td> tr> <tr> <td>张三td> <td>男td> <td>3td> tr> <tr> <td>李四td> <td>男td> <td>4td> tr> <tr> <td>李四td> <td>女td> <td>5td> tr> table> body> html>- 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
-
rowspan、colspan
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <table border="1" width="500" height="300" cellspacing="0" cellpadding="50" align="center"> <thead> <tr> <th>姓名th> <th>性别th> <th>年龄th> tr> thead> <tr> <td>张三td> <td rowspan="2">男td> <td>3td> tr> <tr> <td>李四td> <td>4td> tr> <tr> <td colspan="2">李四/女td> <td>5td> tr> table> body> html>- 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
列表标签
无序列表
ul、li- disc：浏览器默认展示方式
- square：方块
- circle：空心圆
有序列表
ol、li通过
type控制序号的样式
start从哪个序号开始dl、dt、ddDOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <h1>这是无序列表h1> <ul> <li>这是内容1li> <li>这是内容2li> <li>这是内容3li> ul> <h1>这是有序列表h1> <ol type="A" start="3"> <li>这是有序列表1li> <li>这是有序列表2li> <li>这是有序列表3li> <li>这是有序列表4li> ol> <h1>这是自定义列表h1> <dl> <dt>自定义列表显示内容 <dd>这是自定义列表1dd> <dd>这是自定义列表2dd> <dd>这是自定义列表3dd> <dd>这是自定义列表4dd> dt> dl> body> html>- 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
表单标签
完成服务器的一次交互
表单域
form<form action="test.html"> ... [form 的内容] form>- 1
- 2
- 3
关于 form 需要结合 服务器 & 网络编程 来进一步理解. 后面再详细研究.
表单控件
input各种输入控件, 单行文本框, 按钮, 单选框, 复选框.
通过type的取值，来控制
input的类型-
文本框
<input type="text">- 1
-
密码框
<input type="password">- 1
-
单选框
<input type="radio" name="sex">男 <input type="radio" name="sex" checked="checked">女 注意: 单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果- 1
- 2
- 3
-
复选框
爱好: <input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">打游戏- 1
- 2
-
普通按钮
<input type="button" value="我是个按钮"> 当前点击了没有反应. 需要搭配 JS 使用(后面会重点研究)- 1
- 2
<input type="button" value="我是个按钮" onclick="alert('hello')">- 1
-
提交按钮
<form action="test.html"> <input type="text" name="username"> <input type="submit" value="提交"> form>- 1
- 2
- 3
- 4
提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送
-
清空按钮
<form action="test.html"> <input type="text" name="username"> <input type="submit" value="提交"> <input type="reset" value="清空">
- 1
- 2
- 3
- 4
- 5
清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置.
选择文件
<input type="file">- 1
点击选择文件, 会弹出对话框, 选择文件.
lable标签
搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验.
- for 属性 : 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)
<label for="male">男label> <input id="male" type="radio" name="sex">- 1
select标签
下拉菜单
<select> <option>--请选择年份--option> <option>1991option> <option>1992option> <option>1993option> <option>1994option> <option>1995option> select>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
无语义标签
没有固定的用途
div
独占一行，是一个大盒子
span
不独占一行，是一个小盒子
案例练习
个人简历
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <h1>蔡徐坤h1> <div> <h2>基本信息h2> <img src="./ikun.png" alt="" width="500" height="350"> <span> <p>求职意向：篮球开发p> span> <span> <p>联系电话：1008611p> span> <span> <p>个人邮箱：niganma_aiyou.comp> span> <span> <p><a href="https://gitee.com/jyutao/">厉不厉害你坤哥的Giteea>p> span> <span> <p><a href="https://blog.csdn.net/weixin_45646601/">坤哥的博客a>p> span> div> <div> <h2>教育背景h2> <ol> <li>1990 - 1996 幼黑子幼儿园 幼儿园li> <li>1996 - 2002 小黑子小学 小学li> <li>2002 - 2005 中黑子中学 初中li> <li>2005 - 2008 高黑子中学 高中li> <li>2008 - 2012 偶像练习生大学 唱跳rap专业 坤科li> ol> div> <div> <h2>专业技能h2> <ul> <li>rap 基础语法扎实，已经刷了 800 道 律师函；li> <li>常见篮球都可以独立实现并熟练应用；li> <li>熟知跳舞理论，并且可以金鸡独立；li> <li>掌握 唱歌 能力，并且独立开发了再看一眼就会爆炸。li> ul> div> <div> <h2>个人项目h2> <ol> <li> <h3>打胎h3> <p>开发时间：2021年-2023年被发现p> <p>功能介绍p> <ul> <li>触发被动律师函li> <li>隐藏技能睡未成年li> ul> li> <li> <h3>美国孝队h3> <p>开发时间：？？？？年被发现p> <p>功能介绍p> <ul> <li>三分线起跳螺旋扣篮li> <li>触发被动律师函li> ul> li> ol> div> <div> <h2>个人评价h2> <p>全民制作人大家好，我是练习时长两年半的个人练习生蔡徐坤。喜欢唱、跳、rap、篮球。p> div> body> html>- 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
填写信息
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <table> <thead> <h3>请填写简历信息h3> thead> <tr> <td> <label for="name">姓名label> td> <td> <input type="text" name="" id="name"> td> tr> <tr> <td> 性别 td> <td> <input type="radio" name="sex" id="female" checked="checked"> <label for="female"> <img src="./女.png" alt="" width="20" height="20">女 label> <input type="radio" name="sex" id="male"> <label for="male"> <img src="./男.png" alt="" width="20" height="20">男 label> td> tr> <tr> <td>出生日期td> <td> <select name="" id=""> <option value="">--请选择年份--option> <option value="">2000option> <option value="">2001option> <option value="">2002option> <option value="">2003option> <option value="">2004option> select> <select name="" id=""> <option value="">--请选择月份--option> <option value="">1option> <option value="">2option> <option value="">3option> <option value="">4option> <option value="">5option> <option value="">6option> <option value="">7option> <option value="">8option> <option value="">9option> <option value="">10option> <option value="">11option> <option value="">12option> select> <select name="" id=""> <option value="">--请选择日期--option> <option value="">2option> <option value="">3option> <option value="">4option> <option value="">5option> <option value="">6option> <option value="">7option> <option value="">8option> <option value="">9option> <option value="">10option> <option value="">11option> <option value="">12option> <option value="">13option> <option value="">14option> <option value="">15option> <option value="">16option> <option value="">17option> <option value="">18option> <option value="">19option> <option value="">20option> <option value="">21option> <option value="">22option> <option value="">23option> <option value="">24option> <option value="">25option> <option value="">26option> <option value="">27option> <option value="">28option> <option value="">29option> <option value="">30option> select> td> tr> <tr> <td> <label for="school">就读学校label> td> <td> <input type="text" name="" id="school"> td> tr> <tr> <td>应聘岗位td> <td> <input type="checkbox" name="" id="server"> <label for="server">后端开发label> <input type="checkbox" name="" id="fe"> <label for="fe">前端开发label> <input type="checkbox" name="" id="test"> <label for="test">测试开发label> <input type="checkbox" name="" id="all"> <label for="all">全栈开发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" name="" id="read"> <label for="read">我已经阅读公司的招聘要求label> td> tr> <tr> <td>td> <td> <a href="#">查看我的状态a> td> tr> <tr> <td>td> <td><h3>请应聘者确认：h3>td> tr> <tr> <td>td> <td> <ul> <li>以上信息有效li> <li>可以尽早就职li> <li>可以接受加班li> ul> td> tr> table> body> html>- 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
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
特殊字符
空格
小于号
<大于号
>按位与
&网站推荐
HTML（超文本标记语言） | MDN (mozilla.org)
HTML 只是描述了页面的骨架结构.
python（进阶篇）——selenium自动化操作浏览器
一种曲线递增策略的自适应粒子群算法研究-附代码
HJS-DE1/2时间继电器
OpenCV图像处理学习七，利用回调函数setMouseCallback和鼠标响应处理函数onMouse实现ROI感兴趣区的提取
【树莓派】yolov5 Lite，目标检测，树莓派4B，推理v5lite-e_end2end.onnx，摄像头实时目标检测
Linux系统编程_文件编程第2天：写整数、结构体，fopen等
继续 Linux 中的命令并举例
亚马逊对IP的要求是什么？
购物单-蓝桥杯