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>
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我是标题,嘿嘿title>
head>
<body>
helloworld
你好世界
body>
html>
1.2显示标签
1.2.1文本标签
标签的组成:标签名 + 属性
例如:
<body>
<font color="red" face="微软雅黑" size="7">helloworldfont>
<font color="green" face="宋体" size="1">helloworldfont>
<font color="yellowgreen" face="黑体" size="3">helloworldfont>
<label for="">我是h5中字体标签label>
body>
1.2.2表单标签
与用户做交互使用
表单中多数标签为input,是根据不同的type显示不同的状态
1.2.2.1input标签
<body>
文本框:
<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">
<button type="button">普通按钮button>
<button type="reset">重置按钮button>
<button type="submit">提交按钮button>
body>
<body>
<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 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">raplabel>
<input type="checkbox" name="hobby" id="l"><label for="l">篮球label>
body>
1.2.2.2下拉框
<body>
<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>
<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">
<input type="radio" value="1" name="gender">
<input type="text" placeholder="USERNAME">
<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 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 id="UserForm">
<input type="text" placeholder="请输入用户名" name="user"><br>
<input type="password" placeholder="请输入密码" name="pwd"><br>
form>
<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>
<h1 align="left">标题内容h1h1>
<h2 align="center">标题内容h2h2>
<h3 align="right">标题内容h3h3>
<h4>标题内容h4h4>
<h5>标题内容h5h5>
<h6>标题内容h6h6>
body>
1.3.2段落标签
p标签,段落文字
hr标签,水平线,单标签
br标签,换行标签,单标签
<body>
<p>段落内容0001<br>段落内容0001p>
<p>段落内容0002p>
<hr>
<p align="left">段落内容0003p>
<p align="center">段落内容0004p>
<p align="right">段落内容0005p>
<p>段落内容0006p>
body>
1.3.3列表标签
以列表的形式展示内容
<body>
<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="square">
<li>飞天茅台li>
<li>五粮液li>
<li>二锅头li>
<li>老烧郭li>
<li>江小白li>
<li>梦之蓝li>
ul>
body>
<body>
<dl>
<dt><h2>四大名著h2>dt>
<dl>水浒传dl>
<dl>西游记dl>
<dl>红楼梦dl>
<dl>三国演义dl>
dl>
body>
1.3.4表格标签
以表格的形式显示页面,以前多用于布局,现在多用于展示数据
<body>
<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>1td>
<td>zstd>
<td>男td>
<td>1990-01-23td>
<td>35td>
tr>
<tr>
<td align="right">2td>
<td valign="top">zstd>
<td>男td>
<td>1990-01-23td>
<td>35td>
tr>
<tr>
<td>3td>
<td>zstd>
<td>男td>
<td>1990-01-23td>
<td>35td>
tr>
table>
body>
<body>
<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
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="VIP.html">VIP功能a>
<a href="https://www.baidu.com">百度a>
<a href="javascript:alert('helloworld');">js脚本a>
<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>
<hr>
<div style="position: fixed;bottom: 0px;left: 0px;">
<span><a href="#div1">位置1a>span>
<span><a href="#div2">位置2a>span>
<span><a href="#div3">位置3a>span>
<span><a href="#div4">位置4a>span>
div>
<hr>
<div id="div1" style="height: 1500px;background: #0cc;">商品展示区1div>
<div id="div2" style="height: 1500px;background: orange;">商品展示区2div>
<div id="div3" style="height: 1500px;background: gray;">商品展示区3div>
<div id="div4" style="height: 1500px;background: pink;">商品展示区4div>
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>
<iframe src="emp.html" frameborder="1" name="main" width="800" height="1000">iframe>
td>
tr>
table>
body>
1.6其他标签
1.6.1文本修饰
<body>
<b>加粗,文字加粗b>
<i>斜体i>
<u>下划线u>
<del>删除线del>
<strong>加粗,语气加粗strong>
<em>斜体em>
<small>小号文字small>
<hr>
<h1>震惊!xxx公司,5楼出现xxxxx<small>本台记着:zcx为您报道small>h1>
<small><del>$998del>small> ￥9.8
<hr>
H<sub>2sub>O
<br>
x<sup>3sup>
body>
1.6.2输出和引用标签
<body>
<code>System.out.println("helloworld");code>
<kbd>ctr+akbd>全选
<var>变量var><var>int a = 10;var>
public static void main(){
System.out.println("helloworld");
}
<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">JDBCabbr>网址为
<address>xx省xx市xx区xx街道904号address>
body>