目录
HTML基本标签
<!---p段落标签-->
<!---h1-6标题标签-->
<!--br:换行-->
<!--hr水平线-->
<!--color width 都是标签属性-->
<!--pre 预留格式,写的什么格式展示什么格式-->
<del>删除字</del>
<ins>插入子</ins>
<b>粗体字</b>
<i>斜体字</i>
<!--sup右上角加字 sub右下角加字-->
<!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>HTML基本标签</title>
</head>
<body>
<!---p段落标签-->
<p>大部分的互联网密码都已经泄漏了。地下的黑产出售很全的数据库,一查邮箱或手机号,密码就出来了。你不妨认定,自己的密码已经泄漏了。如果为每个网站设置不一样的密码,情况可能会好一点,但也无法保证某个账号就是安全的。</p>
<p>大部分的互联网密码都已经泄漏了。地下的黑产出售很全的数据库,一查邮箱或手机号,密码就出来了。你不妨认定,自己的密码已经泄漏了。如果为每个网站设置不一样的密码,情况可能会好一点,但也无法保证某个账号就是安全的。</p>
<!---h1-6标题标签-->
<h2>biaoti</h2>
<h3>biaoti</h3>
<h4>biaoti</h4>
<h5>biaoti</h5>
<h6>biaoti</h6>
<h1>biaoti</h1>
<!--br:换行-->
Hello<br>World
<!--hr水平线-->
<!--color width 都是标签属性-->
<hr color="red" width = 50%>
<!--pre 预留格式,写的什么格式展示什么格式-->
<pre>
1
2
</pre>
<del>删除字</del>
<ins>插入子</ins>
<b>粗体字</b>
<i>斜体字</i>
<!--sup右上角加字 sub右下角加字-->
10<sup>2</sup>
10<sub>m</sub>
</body>
</html>
实体符号
<!--实体符号特点:以&开始,以;结束<是小于号>是大于号-->
<!--空格-->a 
<!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>
<!--实体符号特点:以&开始,以;结束<是小于号>是大于号-->
b<a>c
<!--空格-->
a nbsp;b
</body>
</html>
表格
<!--table:表格标签,tr:行;td:列-->
<!--border=“1px”:设置表格的边框为一像素宽度-->
<!--align对齐方式-->
<!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>
<!--table:表格标签,tr:行;td:列-->
<!--border=“1px”:设置表格的边框为一像素宽度-->
<!--align对齐方式-->
<br><br><br>
<center><h1>员工信息表</h1></center>
<hr>
<table border="1px" width = 60% height = "300px" align="center">
<tr align="center">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
</table>
</body>
</html>
单元格合并,th标签
<!--rowspan 合并列删除下边单元格-->
<!--colspan 合并列-->
<!--thead,tbody,tfood将内容分为三部分不是必须加的只是便于后边js代码编写-->
<!--th标签也是单元格标签,比td多的事居中、加粗-->
<!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>单元格合并,th标签</title>
</head>
<body>
<table border="1px" width = 60%>
<!--rowspan 合并列删除下边单元格-->
<!--colspan 合并列-->
<!--thead,tbody,tfood将内容分为三部分不是必须加的只是便于后边js代码编写-->
<!--th标签也是单元格标签,比td多的事居中、加粗--> <!--<tr>
<td>员工编号</td>
<td>员工薪资</td>
<td>员工名称</td>
</tr>-->
<thead>
<tr>
<th>员工编号</th>
<th>员工薪资</th>
<th>员工名称</th>
</tr></thead>
<tbody>
<tr>
<td>4</td>
<td>5</td>
<td rowspan="2">6</td>
</tr>
<tr>
<td colspan="2">7</td>
<!--<td>9</td>-->
</tr></tbody>
<tfoot>
<th>员工编号</th>
<th>员工薪资</th>
<th>员工名称</th>
</tfoot>
</table>
</body>
</html>
背景颜色和图片
<!--bgcolor背景色 background:背景图片-->
<!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>
<!--bgcolor背景色 background:背景图片-->
<body bgcolor="pink" background="./1.jpeg">
</body>
</html>
图片
<!--设置图片高度和宽度时只设置宽度,高度会随着缩放
img是图片标签
title设置鼠标悬停时显示的信息
alt设置图片加载失败时显示的提示信息
-->
<!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>
<!--设置图片高度和宽度时只设置宽度,高度会随着缩放
img是图片标签
title设置鼠标悬停时显示的信息
alt设置图片加载失败时显示的提示信息
-->
<img src="./1.jpeg" width="100px" title="我是图片" alt="图片显示失败">
<br><br><br>
<img src="./1.jpeg" >
</body>
</html>
超链接
<!--超连接的作用
通过超链接可以从浏览器向服务器发送请求
浏览器向服务器发送数据(请求,request)
服务器向浏览器发送数据(响应:response)
B/s结构的系统,每一个请求都会对应一个响应
B-----请求------S
S------响应-----B
用户点击超链接和用户在浏览器地址栏上直接输入URL,有什么区别?
本质上没有区别,都是向服务器发送请求
从操作上来讲,超链接使用更方便
a:超链接标签 超链接特点:有下划线,鼠标放超链接上有小手,点击超链接直接跳转到相应路径
href:后跟URL,已解释一个资源地址可以是相对路径,可以是网络中某个资源的路径,也可以是本地资源的路径
target可取值:
_blank:新窗口_self:当前窗口_top顶级窗口
_parent父窗口
<!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>
<a href="http://www.baidu.com">百度</a>
<a href="http://nwes.baidu.com">百度新闻</a>
<a href ="http://wwww.jd.com">京东</a>
<a href="图片.html">图片</a>
<!--图片超链接-->
<a href="图片.html" target="_blank"><img src="./1.jpeg" width="120px"></a>
</body>
</html>
列表
<!--有序列表 <ol><li></li></ol> -->
<!--无序列表 <ul><li></li></ul>-->
<!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>
<!--有序列表-->
<ol type="1">
<li>水果
<ol type = "a">
<li>苹果</li>
<li>桃子 </li>
</ol>
</li>
<li>蔬菜</li>
<li>桃子</li>
</ol>
<!--无序列表-->
<ul type = "circle">
<li>中国
<ul type = "square">
<li>北京
<ul type = "disc">
<li>东城区</li>
<li>西城区</li>
<li>海淀区</li>
<li>朝阳区</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>美国</li>
</ul>
</body>
</html>
表单(对Java程序员来说相对重要
1表单有什用?
收集用户信息,表单展现后,用户填写表单,点击提交按钮提交数据给服务器
2怎么画一个表单
使用form标签画表单
3一个网页当中可以有多个表单form
4表单最终提交数据是需要移交给服务器的,form标签有一个action属性,这个属性用来指定服务器地址
action属性用来指定数据提交给那个服务器
action属性和超链接中的href属性一样
5 http://192.168.111.3:8080/oa/save oa:项目 这是表单请求路径,表单提交数据最终提交给192.168.111.3机器上的8080端口对应的软件
画一个提交按钮,这个按钮可以提交表单,画按钮可以使用input输入域
画按钮·可以使用input输入域,type=“submit”表示该按钮是一个提交按钮,具有提交表单的能力
“button”这是一个普通按钮不具备提交表单能力
“text”文本框
“password密码框
”CheckBox“复选框
“radio”单选按钮
"reset"清空
<!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>
<input type="submit" value="设置按钮上显示的文本">
</form>
<form action="http://www.baidu.com">
<input type="submit" value="百度"><br>
</form>
<form action = "http://127.0.0.1:8080/jd/login">
用户名<input type = "text"><br>
密码<input type="password"><br>
<input type="submit" value="登录">
<br><br>
</form>
<form action="http://127.0.0.1:3306/test/student">
<table>
<tr>
<td> 用户名</td>
<td> <input type="text" name="userName"> </td>
</tr>
<tr>
<td> 密码</td>
<td><input type="password" name="userPass"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit"name="user" value="登录">
<input type="reset" value="清空"></td>
</tr>
</table>
</form>
</body>
</html>
用户注册表单和下拉多选
method属性
get 采用get方式提交时,用户提交的信息会展示在浏览器地址栏上 默认get
post采用post方式提交时,用户提交的信息不会展示在浏览器地址栏上
下拉多选<select multiple="multiple" >
<!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>
<form action="http://127.0.0.1/3306/text/student" method="post">
用户名
<input type="text" name="userName">
<br>
密码
<input type="password" name="userpwd">
<br>
确认密码
<input type="password" >
<br>
性别
<input type="radio" name="gender" value="1" checked>男
<input type = "radio" name="gender" value="0">女
<br>
爱好
<input type="checkbox" name="instert" value="0">吃饭
<input type="checkbox" name="instert" value="1">睡觉
<input type="checkbox" name="instert" value="2">打豆豆
<br>
学历
<select name="grade">
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk" selected>本科</option>
<option value="ss">硕士</option>
</select>
<br>
简介<!--textarea没有返回值-->
<textarea rows="10" cols="10" name="introduct"></textarea>
<br>
<input type="submit" value="注册">
<input type="reset" value="清空">
<!--下拉多选,按住Ctrl可多选
-->
<select multiple="multiple" size =3>
<option>河南省</option>
<option>山东省</option>
<option>湖南省</option>
<option>河北省</option>
<option>河南省</option>
<option>河南省</option>
</select>
</form>
</body>
</html>
file控件和hidden控件
file上传文件
hidden不在浏览器上显示 ,和text做对比,post不在地址栏显示
<!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>file控件</title>
</head>
<body>
<!--file上传文件-->
<input type="file">
<form action="http://localhost:3306/text/student" method="post">
<!--hidden不在浏览器上显示 ,和text做对比,post不在地址栏显示-->
<!--<input type="text" name="userid" value="111">-->
<input type="hidden" name="userid" value="111">
用户代码
<input type="text" name="userCode" >
<input type="submit" value="提交">
</form>
</body>
</html>
readonly 和 disable
<!--readonly disable 都是只可读不可改
但eadonly提交给服务器另一个不给-->
<!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>readonly disable</title>
</head>
<body>
<!--readonly disable 都是只可读不可改
但eadonly提交给服务器另一个不给-->
<form action="http://127.0.0.1:3306/tese/student">
用户代码 <input type="text" name="user" value="110" readonly>
用户名
<input type="text" name="usercode" value="111" disabled>
</form>
</body>
</html>
maxlength属性
<!--限制输入字数-->
<!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>maxlength</title>
</head>
<body>
<input type="text" maxlength="3">
<!--限制输入字数-->
</body>
</html
id属性
div和span![](https://i-blog.csdnimg.cn/blog_migrate/ff6fed4862675e312b3ad4a14821fb46.png)
HTML引入css的三种方式
对Java程序员来说知道就好
第一种
第三种
传建一个独立的.class文件
列表样式
绝对定位