JavaWEB学习笔记 2024-1-5 --HTML

JavaWEB

« 上一篇
个人整理非商业用途，欢迎探讨与指正！！

文章目录

JavaWEB
- 1.HTML
- - 1.1HTML中的三大基本标签
  - 1.2显示标签
  - - 1.2.1文本标签
    - 1.2.2表单标签
    - - 1.2.2.1input标签
      - 1.2.2.2下拉框
      - 1.2.2.3多行文本
      - 1.2.2.4表单标签的通用属性
      - 1.2.2.5form标签
      - 1.2.2.6h5中form的新特性
  - 1.3布局标签
  - - 1.3.1标题标签
    - 1.3.2段落标签
    - 1.3.3列表标签
    - 1.3.4表格标签
    - 1.3.5div和span
    - 1.3.5表单布局标签
  - 1.4功能标签
  - 1.5框架标签
  - - 1.5.1内嵌浮动框架
  - 1.6其他标签
  - - 1.6.1文本修饰
    - 1.6.2输出和引用标签

1.HTML

超文本标记语言,用于网页制作
单纯的标记语言,语法:
双标签:
<标签名></标签名>
单标签:
<标签名/>

HTML可以为两个大的方向的语法:HTML4和HTML5
HTML5不是HTML4的升级

准备工作
浏览器:开发时推荐使用谷歌,火狐,edge
开发工具:HBuilderX,HBuilder,记事本

1.1HTML中的三大基本标签

扩展名为:.html 或者 .htm
注释:
html的注释是不支持嵌套的

<html><head><!--头标签,负责当前页面的配置--></head><body><!--体标签,一个页面的主体--></body>
</html>

<!-- 当前页面的声明,可以省略,给浏览器看的,声明如下则是提示浏览器使用HTML5的形式进行解析页面 -->
<!DOCTYPE html>
<html><head><!-- 元标签,声明当前页面的编码格式 --><meta charset="utf-8"><title>我是标题,嘿嘿</title></head><body>helloworld你好世界</body>
</html>

1.2显示标签

1.2.1文本标签

标签的组成:标签名 + 属性
例如:

<body><!-- ctrl+/ 注释一行 --><!-- c+tab 生成一个注释 --><!-- 
html4中文本标签
font标签 属性 color:颜色 可以使用基本的英文单词
face:字体 安全字体,默认可以使用计算机中安装的
size:字号	1~7的 依次增大 默认大小为3
--><!-- 可以使用标签名+tab自动生成一个标签 --><!-- font*3 + tab --><font color="red" face="微软雅黑" size="7">helloworld</font><font color="green" face="宋体" size="1">helloworld</font><font color="yellowgreen" face="黑体" size="3">helloworld</font><!-- 
html5中文本标签
h5是不推荐使用font了,使用label进行代替
label没有样式属性
for属性可以和其他标签进行绑定,文字绑定
--><label for="">我是h5中字体标签</label>
</body>

1.2.2表单标签

与用户做交互使用
表单中多数标签为input,是根据不同的type显示不同的状态

1.2.2.1input标签

<body><!-- html中不能使用换行符,页面中换行使用<br>标签 -->文本框:<input type="text"><br>密码框:<input type="password"><br>单选按钮:(使用name属性将多个单选按钮进行绑定)<input type="radio" name="gender">男<input type="radio" name="gender">女<br>复选按钮:(和单选按钮类似)<input type="checkbox" name="hobby">唱<input type="checkbox" name="hobby">跳<input type="checkbox" name="hobby">rap<input type="checkbox" name="hobby">篮球<br>文件域:(可以显示当前系统下的文件)<input type="file"><br>按钮标签:<input type="button" value="点我啊!!!"><!-- 普通按钮 --><input type="reset"><!-- 重置按钮,可以重置表单上的内容 --><input type="submit"><!-- 提交按钮,可以将表单提交 --><input type="image" src="img/2.jpg" width="200" height="50"><!-- 图片按钮,功能和submit一样 --><button type="button">普通按钮</button><button type="reset">重置按钮</button><button type="submit">提交按钮</button>
</body>

<body><!-- h5中新增input标签,移动端支持,谷歌浏览器/edge浏览器可以查看部分 --><input type="number"><br><input type="color"><br><input type="date"><br><input type="datetime"><br><!-- 年月日 浏览器不能查看 --><input type="datetime-local"><br><!-- 年月日 时分秒--><input type="email"><br><!-- 调用英文键盘 --><input type="tel"><br><!-- 调用数字键盘 --><input type="search">
</body>

<body><!-- 文字绑定input标签,label中的for绑定input的id属性 -->性别:<input type="radio" name="gender" id="man"><label for="man">男</label><input type="radio" name="gender" id="woman"><label for="woman">女</label><br>爱好:<input type="checkbox" name="hobby" id="c"><label for="c">唱</label><input type="checkbox" name="hobby" id="t"><label for="t">跳</label><input type="checkbox" name="hobby" id="r"><label for="r">rap</label><input type="checkbox" name="hobby" id="l"><label for="l">篮球</label>
</body>

1.2.2.2下拉框

<body><!-- 
select:下拉框标签
size属性,列表的可见数
multiple属性,单属性(属性名和属性值相同,那么属性值可以省略),需要配合ctil键一起使用
--><label for="">部门名</label><select name=""><option value="">技术部</option><option value="">行政部</option><option value="">外派部</option><option value="">财务部</option></select><label for="">员工名</label><select name="" size="8"><option value="">王成輝</option><option value="">陈则宇</option><option value="">于龙祥</option><option value="">大佐</option></select>
</body>

1.2.2.3多行文本

<body><!-- 
cols:每行可以写的字符个数
rows:可以显示的行数
--><textarea name="" id="" cols="30" rows="10"></textarea><button>发表</button>
</body>

1.2.2.4表单标签的通用属性

id属性:是一个标签的唯一标识,所有标签都有的属性,可以确保当前页面中的标签的唯一性,便于取值/定位使用
name属性:后端取值时的key
value属性:后端取值时的value,前端使用时显示的值,内置值
在向后端发送数据时,使用name=value形成的键值对,发送数据

placeholder属性:h5新增属性,内容提示功能,用户输入内容后,提示消失
readronly属性:只读,只显示,不能修改
disabled属性:禁用,不能使用

<body><form action="test.html"><input type="text" value="helloworld" name="username"><!-- 值1可以发送到后端 和name一起使用 --><input type="radio" value="1" name="gender"><input type="text" placeholder="USERNAME"><!-- textarea没有value属性,内容就是value --><textarea id="" cols="30" rows="10" name="info" placeholder="这家伙很懒什么都没有留下..."></textarea><br><input type="text" value="专打茄子的好腿" name="name" readonly><button type="button">充钱改名</button><input type="text" value="专打茄子的好腿1" name="name1" disabled><input type="submit"></form>
</body>

1.2.2.5form标签

<body><!-- 
form是所有表单标签的父标签,可以嵌套给所有的表单元素
1.作用:当提交按钮点击时(1.input type=submit 2.button type=submit 3.button的默认形式)
会将表单提交到 action属性指定的位置(.html .jsp Servlet)
2.提交时的数据会以name=value的形式进行传输
3.method属性:表单的提交方式
get方式:
默认情况,提交的数据会附着在url之后,不安全的,效率高,对中文的支持较差,传递的数据上限为4k左右
例如:http://127.0.0.1:8848/01-HTML/welcome.html?username=admin&password=123&yzm=123
post方式:
隐式提交,但对于HBuilderX内部的服务器而言,不支持post请求
将信息存在于请求头内,安全的,效率低,对中文支持良好,数据无上限
4.重置按钮:回到表单的原始状态
5.提交按钮:将表单进行提交
--><form action="welcome.html" method="post">username:<input type="text" name="username"/><br>password:<input type="password" name="password"/><br><input type="text" placeholder="请输入验证码" name="yzm"/>假装有验证码图片<br><input type="submit"><button>提交</button><button type="submit">提交</button><input type="reset"></form>
</body>

1.2.2.6h5中form的新特性

<body><!-- 
提交表单可以写在form标签之外,需要通过form属性的id进行页面跳转的绑定
--><form id="UserForm"><input type="text" placeholder="请输入用户名" name="user"><br><input type="password" placeholder="请输入密码" name="pwd"><br></form><!-- 提交标签可以写到form之外,使用formaction属性进行不同页面的跳转(指定不同的url) --><input type="submit" value="用户登录" form="UserForm" formaction="index.html"><input type="submit" value="管理员登录" form="UserForm" formaction="admin.html"><input type="submit" value="VIP用户" form="UserForm" formaction="VIP.html" disabled>
</body>

1.3布局标签

可以对网页视图进行排版

1.3.1标题标签

h标签,共有6个,h1~h6的,标题大小依次减小
属性:align 文字的对齐方式;有left center right三个值
默认换行的

<body><!-- h${内容}*6 $从1开始自增的值 {表示内容}--><h1 align="left">标题内容h1</h1><h2 align="center">标题内容h2</h2><h3 align="right">标题内容h3</h3><h4>标题内容h4</h4><h5>标题内容h5</h5><h6>标题内容h6</h6>
</body>

1.3.2段落标签

p标签,段落文字
hr标签,水平线,单标签
br标签,换行标签,单标签

<body><p>段落内容0001<br>段落内容0001</p><p>段落内容0002</p><hr><p align="left">段落内容0003</p><p align="center">段落内容0004</p><p align="right">段落内容0005</p><p>段落内容0006</p>
</body>

1.3.3列表标签

以列表的形式展示内容

<body><!-- ol>li*6 >表示子标签--><!-- ol属性 type=1 a A I i --><h2>JDBC的连接步骤</h2><ol type="i"><li>加载驱动</li><li>创建连接</li><li>获取语句对象</li><li>执行SQL语句</li><li>处理结果</li><li>关闭连接</li></ol>
</body>

<body><h2>白酒的类别</h2><!-- ul属性 type=disc实心圆(默认) circle空心圆 square实心的方块 --><ul type="square"><li>飞天茅台</li><li>五粮液</li><li>二锅头</li><li>老烧郭</li><li>江小白</li><li>梦之蓝</li></ul>
</body>

<body><!-- dl>dt+dl*4 +表示兄弟标签--><dl><dt><h2>四大名著</h2></dt><dl>水浒传</dl><dl>西游记</dl><dl>红楼梦</dl><dl>三国演义</dl></dl>
</body>

1.3.4表格标签

以表格的形式显示页面,以前多用于布局,现在多用于展示数据

<body><!-- 
table:表格
属性:
border:边框线,1设置边框线,0去除边框线(默认为0),>1的值是外部边框线的粗细
cellspacing:内外边线之间的距离
cellpadding:内容和内边线之间的距离
align:针对父标签(body)的对齐方式
tr:行
属性和table类似
align:内容的水平对齐方式 left center right
valign:内容的垂直对齐方式 top middle bottom
td:单元格
和tr类似--><!-- table>tr*4>td*5 --><table border="1" cellspacing="0" cellpadding="10" width="500" height="400" bgcolor="pink" bordercolor="blue" background="img/1.jpg" ><tr align="center"><td>用户编号</td><td>用户姓名</td><td>用户性别</td><td>用户生日</td><td>用户年龄</td></tr><tr align="right" valign="bottom"><td>1</td><td>zs</td><td>男</td><td>1990-01-23</td><td>35</td></tr><tr><td align="right">2</td><td valign="top">zs</td><td>男</td><td>1990-01-23</td><td>35</td></tr><tr><td>3</td><td>zs</td><td>男</td><td>1990-01-23</td><td>35</td></tr></table>
</body>

<body><!-- 
td的属性
colspan:横向合并单元格
rowspan:纵向合并单元格th:表格的表头单元格,默认居中且加粗的 和td一样
thead和tbody:将表格分为头和主体,一般可以省略,添加的话可以严格的区分头和体的内容
--><table border="1" cellspacing="0" cellpadding="10" width="400"><thead><tr><th colspan="4">xxx系统的数据显示</th></tr></thead><tbody><tr><td>编号</td><td>姓名</td><td rowspan="2">性别</td><td rowspan="2">爱好</td></tr><tr><td>编号</td><td>姓名</td></tr></tbody></table>
</body>

1.3.5div和span

div和span是常用的布局标签,可以css配合使用
div:一个块级的盒子
span:一个内联的盒子
盒子的分类:
块级:换行,可以通过css设计宽高,例如:hn,p,table,form,div等
内联:不换行,不可以通过css设置宽高,例如:label,a,b,i,u,span等
内联块:不换行,可以通过css设计宽高,例如:input,img等


```html
<head><meta charset="utf-8"><title></title><style>/* css样式表 */div {width: 200px;height: 200px;border: 1px solid pink;}span {width: 200px;height: 200px;border: 1px solid pink;}input {width: 200px;height: 200px;border: 1px solid pink;}</style>
</head>
<body><!-- 默认换行的,可以设置宽高 --><div>div的内容</div><div>div的内容</div><div>div的内容</div><!-- 默认在一行的,不可以设置宽高 --><span>span的内容</span><span>span的内容</span><span>span的内容</span><!-- 默认在一行的,可以设置宽高 --><input type="text"><input type="text">
</body>

1.3.5表单布局标签

fieldset:一个表单容器,默认有边框有内边距
legend:fieldset子标签,设置容器的局部内容

<body><fieldset style="width: 200px;height: 200px;"><legend>xxxx管理平台登录页面</legend><form action="xxx.html"><p>username:<input type="text"/></p><p>password:<input type="password"/></p><p><input type="submit" value="登录"></p></form></fieldset>
</body>

1.4功能标签

在页面中没有特别的效果,但有功能特点
form:表单,可以用于和用户之间进行交互
img:图片,可以显示图片
a:超链接,点击时可以进行指定页面的跳转

<body><!-- 
a:href属性可以指定跳转的位置
--><a href="VIP.html">VIP功能</a><a href="https://www.baidu.com">百度</a><a href="javascript:alert('helloworld');">js脚本</a><!-- img标签 --><!-- img:src属性是路径的位置,路径类似于java中file的路径表示 alt属性为百度等搜索引擎时使用 --><img src="img/1.jpg" alt="" width="200" height="200"><img src="img/2.jpg" alt="" width="200" height="200"><img src="img/3.jpg" alt="" width="200" height="200"><!-- 图片连接 --><a href="index.html"><img src="img/2.jpg" alt="">该商品售价xxx元</a>
</body>

<body><!-- 使用锚链接可以用于跳转到指定位置
使用#指向标签的id或者name属性
--><hr><div style="position: fixed;bottom: 0px;left: 0px;"><span><a href="#div1">位置1</a></span><span><a href="#div2">位置2</a></span><span><a href="#div3">位置3</a></span><span><a href="#div4">位置4</a></span></div><hr><div id="div1" style="height: 1500px;background: #0cc;">商品展示区1</div><div id="div2" style="height: 1500px;background: orange;">商品展示区2</div><div id="div3" style="height: 1500px;background: gray;">商品展示区3</div><div id="div4" style="height: 1500px;background: pink;">商品展示区4</div>
</body>

1.5框架标签

1.5.1内嵌浮动框架

可以在当前页面引入其他页面

<body><table width="100%"><tr><td align="left"><span>欢迎使用xxx管理平台</span></td><td align="right">尊敬<font color="pink">李昊阳</font>用户欢迎您【<a href="">退出</a>】</td></tr><tr><td valign="top"><ul><li><a href="emp.html" target="main">员工管理</a></li><li><a href="dept.html" target="main">部门管理</a></li><li><a href="meeting.html" target="main">会议管理</a></li></ul></td><td><!-- src页面连接 name属性为当前的iframe定义名字,可以使用a的target进行配置 --><iframe src="emp.html" frameborder="1" name="main" width="800" height="1000"></iframe></td></tr></table>
</body>

1.6其他标签

1.6.1文本修饰

<body><!-- h4 --><b>加粗,文字加粗</b><i>斜体</i><u>下划线</u><!-- h5 --><del>删除线</del><strong>加粗,语气加粗</strong><em>斜体</em><small>小号文字</small><hr><h1>震惊!xxx公司,5楼出现xxxxx<small>本台记着:zcx为您报道</small></h1><!-- &nbsp;空格 --><small><del>$998</del></small>&nbsp;￥9.8<hr>H<sub>2</sub>O<br>x<sup>3</sup>
</body>

1.6.2输出和引用标签

<body><code>System.out.println("helloworld");</code><kbd>ctr+a</kbd>全选<var>变量</var><var>int a = 10;</var><!-- 预格式化,在html中空格和回车符都是没有效果的 -->public static void main(){System.out.println("helloworld");}<!-- pre和textarea都有预格式化的效果 --><pre>public static void main(){System.out.println("helloworld");}</pre><textarea name="" id="" cols="30" rows="10">public static void main(){System.out.println("helloworld");}</textarea><hr>JDBC学习<abbr title="Java DataBase Connectivity">JDBC</abbr>网址为<address>xx省xx市xx区xx街道904号</address>
</body>