前端三剑客: html,css,js(javascript)
html: Hyper Text Markup Language:超文本标记语言
针对字体,图片,视频,音频等等进行操作,设置字体颜色,大小,设置图片的宽度和高度
h5的一些标签对视频或者音频操作!
通过html标签 写半成品的网页 ----- 类似于房屋的主体结构
通过css(层叠样式表):能针对html标签进行修饰 ----类似于房屋的装修
通过js(javascript):实现效果(轮播图,js事件编程)----类似房屋中的功能
html页面----- 通过js完成和后台通信(Jquery框架: 封装js库)
HTML
1.文本标签
1.标题h1
<h1>JavaEE</h1>
<h2>JavaEE</h2>
<h3>JavaEE</h3>
<h4>JavaEE</h4>
<h5>JavaEE</h5>
<h6>JavaEE</h6>
2.滚动marquee
<marquee behavior="scroll"direction
="right" scrollamount="25" bgcolor="pink">hello,123123html</marquee>
<marquee behavior="scroll"direction
="right" scrollamount="50" bgcolor="pink">hello,123123html</marquee>
<marquee behavior="scroll"direction
="right" scrollamount="100" bgcolor="pink">hello,123123html</marquee>
<marquee behavior="scroll"direction
="right" scrollamount="200" bgcolor="pink">hello,123123html</marquee>
3.段落p
<p>
高圆圆，原名高园园，1979年10月5日出生于北京市丰台区，祖籍河北唐山，中国内地影视女演员、模特。
</p>
<p>
1996年，被广告公司发掘，随后拍摄大量的商业广告，在广告圈中崭露头角。1997年，主演个人首部大银幕作品《爱情麻辣烫》，从此开始了她的演艺生涯。
</p>
4.换行br
hello,高圆圆 <br />
hello,马三奇<br />
<hr/>
5.上下标sup和sub
数学公式:x^2 <br />
x<sup>2</sup> <br />
化学公式: H<sub>2</sub>O
6.转义字符
xxx公司版权所有2021-2022<sup>©
</sup> <br/>
xx公司注册商品<sup>®</sup><br/>
中  国<br />
7.加粗strong和b
<strong>阿富汗</strong>
<b>奥拉夫</b><br />
8.倾斜em 和 i
<em>毛爷爷</em>
<i>毛爷爷</i>
9.居中center
<center>HTML</center>
10.原样输出pre
<pre>
举头望明月,低头思故乡.
funciton hello(){
alert("hello") ;
}
</pre>
11.列表标签
<br/>
以下的明星喜欢谁?
<ul type="square">
<li>高圆圆</li>
<li>姆巴佩</li>
<li>赵又廷</li>
</ul>
<hr/>
以下的明星喜欢谁?
<ol>
<li>高圆圆</li>
<li>姆巴佩</li>
<li>赵又廷</li>
<li>赵又廷</li>
<li>赵又廷</li>
</ol>
2.超链接标签
超链接a标签来表示
属性
href: 后面跟统一资源定位符 url 以后本地地址或者服务器地址
需要加上协议
http://www.baidu.com
http协议请求规则
C:\Windows\System32\drivers\etc
hosts文件
记录ip地址 域名
127.0.0.1(本地回环地址) localhost
如果在hosts文件本地找不到www.baidu.com对应的ip地址那么就会调用网卡联网操作
DNS服务器(网络运营商)
ip地址1 www.baidu.com
ip地址2 www.sina.com.cn
....
回显百度首页给用户
指定服务器地址
http://locahost:8080/后台地址
url地址:统一资源定位符
http:// 域名:端口号/
端口号:80端口可以省略不写
协议:
ftp
http协议
thunder://
超链接的用法:
1)作为资源跳转进行使用
2)作为锚链接来使用
同一个页面(使用居多)
a)打锚点(创建一个跳转标记)
<a name="锚点名称"></a>
b)创建跳转链接
<a href="#锚点名称">跳转</a>
不同页面跳转
a)打锚点(创建一个跳转标记) :在另一个页面的某个位置
<a name="锚点名称"></a>
b)在当前的某个位置创建跳转链接
<a href="链接到指定的页面上+#锚点名称">跳转</a>
<a href="00_html文本标签.html#ul" target="_self">跳转到指定页面的某个位置</a><br/>
<a name="top"></a>
<a href="#foot">[跳转底部]</a><br/>
<a href="http://www.baidu.com:80">链接到百度</a><br/>
<a href="http://14.215.177.39:80">链接到百度</a><br/>
<a href="thunder://www.dytt8.net"><<特种部队.中英双字>></a>
<p>
20世纪90年代，硬件领域出现了单片式计算机系统，这种价格低廉的系统一出现就立即引起了自动控制领域人员的注意，因为使用它可以大幅度提升消费类电子产品（如电视机顶盒、面包烤箱、移动电话等）的智能化程度。Sun公司为了抢占市场先机，在1991年成立了一个称为Green的项目小组，帕特里克、詹姆斯·高斯林、麦克·舍林丹和其他几个工程师一起组成的工作小组在加利福尼亚州门洛帕克市沙丘路的一个小工作室里面研究开发新技术，专攻计算机在家电产品上的嵌入式应用。
</p>
<a name="foot"></a>
<a href="#top">[跳转顶部]</a>
<center>xxx公司版权所有<sup>©</sup></center>
```
#### 3.表格标签
```markdown
table表格标签
1.属性:显示表格样式 必须指定border 边框
algin:对齐方式
width/height:宽度和高度(px/百分比(占当前系统分辨率权重百分比))
bgColor:背景色
cellspacing:设置边框线和单元格的距离
2.子标签
capation:表格表格标签
tr:行标签
td:单元格标签
th:表格的表头标签:特殊的单元(自动居中,加粗)
3.单元格合并:td的属性
合并行: rowspan属性
占用的单元格数量
合并列:colspan属性
占用单元格数量
<table border="1px" width="100%" height="300px" cellspacing="0"
bgcolor="greenyellow">
<caption>xxx学校成绩表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>班级</th>
<th>成绩</th>
</tr>
<tr align="center">
<td>1</td>
<td>高圆圆</td>
<td>Java基础班</td>
<td>98</td>
</tr>
<tr align="center">
<td>2</td>
<td>赵又廷</td>
<td>Java基础班</td>
<td rowspan="2">89</td>
</tr>
<tr align="center">
<td>3</td>
<td>张三丰</td>
<td>计算机1班</td>
</tr>
<tr align="center">
<td colspan="3">平均分</td>
<td>80</td>
</tr>
</table>
4.表单标签
表单标签:form
属性:
method:提交方式 默认get请求(用户直接在浏览器访问)
post
action:url 本地提交或者提交后台服务器地址
http://localhost:8080/xxx
表单标签的应用场景:
注册/登录
注册: (同步)
需要输入用户相关的信息 点击----"注册"------用户的数据提交后台服务器
---查询用户名是否存在,如果存在,不能进行注册了,"请更换用户名""
登录(同步)
输入用户名和密码---- 点击登录----服务器里面先通过查询用户名是否存在,
如果存在,就在通过获取到的用户对应的密码和前台提交的密码如果匹配,登录成功,否则登录失败!
get方式和post方式的区别
get方式
1)将用户提交的数据 -----提交到后台地址上地址上
url?key1=value1&key2=value2...
2)因为提交到地址栏上,提交数据大小有限制的
3)不适合提交私密数据,相对post不安全
post方式
1)不会将用户的数据提交地址上
通过浏览器进行查看:
f12---network网络部分查看 post提交参数
request header 请求头
form-data (实体参数)
key1=value1&key2=value2
2)这种方式不提交到地址栏上,提交大小没有限制
3)相对get方式,安全一些
密码后期都需要处理 加密方式 (md5加密)
123456 ---- "随机字符的值是固定的
springSecurity:安全卫士(密码进行加密) 更好一些
123456 每次密码随机不一样
<form action="server.html" method="post">
用户名:<input type="text" name="username" placeholder="请输入用户名" /><br/>
密  码:<input type="password" name="password" placeholder="请输入密码"
/><br/>
<input type="submit" value="登录" />
</form>
2.表单常用标签
form action属性:提交后台地址/本地提交 method属性:提交方式 常用get/post
表单项 必须要指定name属性
1）输入型 文本输入框,密码输入框,日期组件,邮箱.....
input
type="text" 文本输入框
type="password" 密码输入框
type="radio"单选按钮
type="checkbox"复选框
type="date"日期格式
type="eamil" 必须符合邮箱格式@字符
type="hidden":隐藏域(没有效果,可以携带数据)
2）下拉菜单
select标签:普通下拉菜单 选择一个
option:下列选项
3）文本域 textarea
属性:rows:文本域中指定多少行内容
cols:一行里面指定多少个字符
4）按钮相关的
a）特殊按钮:提交按钮
input
type="submit"提交按钮(将表单中的所有表单项中的内容全部提交后台)
跟 input type="submit"等价的一个标签 button
<button>提交<button>
b）type="reset" 重置按钮
c）普通按钮
type="button" value="点击...."
<h3>注册会员</h3>
<form action="server.html" method="get">
用户名:<input type="text" name="username" placeholder="请输入用户名" /><br />
密  码:<input type="password" name="password" placeholder="请输入密码" /><br />
确认密码:<input type="password" name="repassword" placeholder="请再次输入密码" /><br/>
性别:
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女<br />
出生日期
<input type="date" name="birthday" />
<br/>
技术栈:
<input type="checkbox" name="tecknology" value="Spring" />Spring
<input type="checkbox" name="tecknology" value="JDBC" />JDBC
<input type="checkbox" name="tecknology" value="MySQL" />MySQL
<input type="checkbox" name="tecknology" value="MyBatis" />Mybatis<br />
学历:
<select name="edu" >
<option value="请选择">请选择</option>
<option value="大专">大专</option>
<option value="本科">本科</option>
<option value="研究生">研究生</option>
</select>
<br />
上传照片:
<input type="file" name="img" />
<br />
自我介绍
<textarea rows="5" cols="20">
优秀!
</textarea><br />
普通按钮
<input type="button" value="点我试试" /><br />
提交按钮
<input type="submit" value="注册" /><input type="reset" value="清空" />
</form>
3.格式优雅的表单
<html>
<head>
<meta charset="utf-8">
<title>格式优雅的表单</title>
</head>
<body>
<form action="server.html" method="get">
<div>会员注册</div>
<table border="1px" cellspacing="0" width="300px" height="200px">
<tr>
<td>用户名</td>
<td>
<input type="text" name="username" placeholder="请输入用户名" />
</td>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" placeholder="请输入密码" />
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="date" name="birthday" />
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobit" value="跑步" />跑步
<input type="checkbox" name="hobit" value="lol" />lol
</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</body>
</html>
4.table布局
<html>
<head>
<meta charset="utf-8">
<title>table进行布局</title>
</head>
<body>
<table border="1" width="100%" height="100%">
<tr>
<td>
<table>
<tr>
<td>
<img src="img/logo2.png" width="100%" />
</td>
<td>
<img src="img/header.png" />
</td>
<td>
<a href="#">登录</a>
<a href="#">注册</a>
</td>
</tr>
</table>
</td>
</td>
</tr>
<tr style="background-color: black;">
<td>
<a href="#">首页</a>
<a href="#">手机数码</a>
<a href="#">笔记本专区</a>
<a href="#">其他</a>
</td>
</tr>
</table>
</body>
</html>
5.图像标签
图像标签
<img src="图片资源地址" />
src:加载的图片资源地址 使用的是相对路径
width和height:宽度和高度属性指定像素,或者指定占当前整个宽高分辨率的百分比
alt:替代文本,当图片失效是起作用,描述这个图片
title:给图片设置标题内容,当鼠标悬浮在图片时候,提示文字
超链接的href属性以及img的src属性:都会加载资源(就会给服务器发送请求)
如果一个html页面中有三张图片,发送几次请求?(访问服务器)
四次请求
请求html页面
三张图片每一张都需要加载:每一个都需要发送请求
<img src="../img/1.jpg" width="200px" height="300px" alt="手机图片" /><br />
<img src="../img/mm.jpg" width="200px" height="300px" title="高圆圆" />
6.frameset框架集
frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。必须使用cols或rows属性。
不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。
<frame> 标签定义 frameset 中的一个特定的窗口（框架）。
cols pixels% , * 定义框架集中列的数目和尺寸。有关 cols 属性的详细信息。
rows pixels% , * 定义框架集中行的数目和尺寸。有关 rows 属性的详细信息。
<html>
<head>
<meta charset="utf-8">
<title>logo</title>
</head>
<body>
<img src="../img/index_2.jpg" height="100px" width="95%" />
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>底部页面</title>
</head>
<body>
<center>xxx公司版权所有<sup>©</sup>2021-2025</center>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>
<a href="../03_表格table标签.html" target="main">用户管理</a>
</li>
<li>
<a href="http://www.jd.com" target="main">订单管理</a>
</li>
<li><a href="#">用户管理</a></li>
</ul>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>主页</title>
</head>
<body>
<p> 欢迎访问该系统</p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>框架标签</title>
</head>
<frameset rows="10%,*,10%">
<frame src="header.html"/>
<frameset cols="15%,*">
<frame src="menu.html" />
<frame src="main.html" name="main" />
</frameset>
<frame src="footer.html" />
</frameset>
</html>
1415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
