<!--
bgcolor 是背景颜色属性
onclick 表示单击(点击)事件
alert()是JavaScript语言提供的一个警告框函数
它可以接受任意参数,参数就是警告框的函数信息
font标签是字体标签,它可以用来修饰文本的字体,颜色,大小
color属性修改颜色
face属性修改字体
size属性修改文本大小
-->
<!-- 特殊字符
<br> 换行标签
常用的特殊字符
< ===>>>> <
> ===>>>> >
空格 ===>>>>
-->
<!-- 标题标签
h1 - h6 都是标题标签
h1 最大 , h6 最小
align 属性是对齐属性
left 左对齐
right 右对齐
center 居中
-->
<!-- a 标签是超链接
href 属性设置连接的地址
target 属性设置那个目标进行跳转
_self 表示当前页面
_blank 表示打开新页面来进行跳转
exp:<a href="http://localhost:8080" target="_self">本地</a>
-->
<!--
ol是有序列表
ul是无序列表
type属性可以修改列表项前面的符号
exp:<ul type = "null">
</ul>
li 是列表项
-->
<!--
img标签是图片标签,用来显示图片
src属性可以设置图片的路径
width属性设置图片的宽度
height属性设置图片的高度
border属性设置图片边框的大小
alt属性设置当指定路径找不到图片时,用来代替显示的文本内容
在web中相对路径:
. 表示当前文件所在的目录
.. 表示当前文件所在上一级的目录
文件名 表示当前文件所在目录文件,相当于./文件名
绝对路径:
http://ip:port/工程名/资源路径
-->
<!--
table标签是表格标签
border设置表格标签
width设置表格宽度
height设置表格高度
align 设置表格相对于页面的对齐方式
cellspacing 设置单元格间距
tr 是行标签
th 是表头标签
td 是单元格标签
align 设置单元格文本对齐方式
b 是加粗标签
colspan 属性设置跨列
rowspan 属性设置跨行
exp:<td colspan = "2" rowspan = "2"></td> 表示跨2行2列
-->
<!--
iframe 标签可以在页面上开辟一个小区域显示一个单独的页面
iframe和a标签组合使用:
1.在iframe标签中使用name属性定义一个名称
2.在a标签的target属性设置iframe的name的属性值
<iframe src="地址" width="500" height="400"></iframe>
<a href = "http://localhost:8080" target = "abc"> 本地连接</a>
-->
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset = "UTF-8">
<title>表单的显示</title>
</head>
<body>
<!-- 创建一个个人信息注册的表单界面,包含用户名,密码,确认密码,性别,兴趣爱好(多选),国籍(下拉列表),自我评价,重置,提交
form 标签就是表单
action 属性设置提交的服务器地址
method属性设置提交的方式是GET(默认值)或是POST
GET请求的特点:
1、浏览器地址栏中的地址是:action属性[+?+请求参数]
2、不安全
3、有数据长度的限制
POST请求的特点:
1、浏览器地址栏中只有action属性值
2、相对GET安全
3、理论上来说没有长度的限制
表单提交的时候,数据没有发送给服务器的三种情况:
1、表单项没有name值
2、单选,复选(下拉列表中的option标签) 都需要加value属性
3、表单项不在form标签中
input type = text 是文件输入框 , value设置默认值显示内容
input type = password 是密码输入框 ,value设置默认是显示内容
input type = radio 是单选框 ,name属性可以对其进行分组 checked = "checked"表示默认选中
input type = checkbox 是复选框 ,checked = "checked"表示默认选中
select标签是下拉列表框
option标签是下拉列表框中的选项 selected = "selected"设置默认选中
textarea 表示多行文本输入框(起始标签和结束标签中的内容是默认值)
row 属性设置可以显示几行高度
cols 属性设置每行可以显示几个字符宽度
input type = reset是重置按钮 value 属性修改按钮上的文本
input type = submit 是提交按钮 value 属性修改按钮上的文本
input type = botton 是按钮
input type = file 是文件上传域
input type = hidden 是隐藏域 当我们要发送某些信息,而这些信息不需要用户参与,就可以使用隐藏域(提交的时候同时发送给服务器)
-->
<form >
用户名称:<input type = "text" value="默认值"/><br/>
用户密码:<input type = "password" value="abc"/><br/>
确认密码:<input type = "passeord" value="abc"/><br/>
性别:<input type = "radio" name = "sex"/>男
<input type = "radio" name = "sex" checked = "checked">女
兴趣爱好:<input type = "checkbox" checked = "checked" />Java
<input type = "checkbox" checked = "checked" />JavaSCript
<input type = "checkbox" checked = "checked" />C++
国籍:<select>
<option>--请选择国籍--</option>
<option selected = "selected">中国</option>
<option>美国</option>
<option>小日本</option>
</select>
自我评价:<textarea row = "10" cols = "20">默认值在这</textarea>
<input type = "reset" value = "hahah" />
<input type = "submit" />
<input type = "botton"/>
</form>
</body>
</html>
<!--
隐形参数 arguments
在function函数中不需要定义,可以直接使用的变量,操作类似数组
对象的定义:
var 变量名= new object();
变量名.属性名 = 值;
变量名.函数名 = function();
对象的访问:
变量名.属性/函数名();
var 变量名 ={
属性名: 值,
属性名: 值
函数名:function(){}
};
-->
<!--
常用事件:
onload 加载完成事件 页面加载完成之后,常用于做界面js代码初始化事件
onclick 单击事件 常用于按钮的点击响应事件
onblur 失去焦点事件 常用于输入框失去焦点后验证其输入内容是否合法
onchange 内容发生改变事件 常用于下拉表和输入框内容发生改变后的操作
onsubmit 表单提交事件 常用于表单提交前,验证所有表单项是否合法
事件的注册又分为静态注册和动态注册:
告诉浏览器,当事件响应后要执行那些代码,叫做事件注册或者事件绑定
静态注册事件:
通过html标签的事件属性直接赋予事件响应后的代码,为静态注册
动态注册:
指先通过js代码得到标签的dom对象,然后再通过dom对象.事件名 = function(){},这种形式赋予事件响应后的代码,为动态注册
动态注册基本步骤:
1.获取标签对象
2.标签对象.事件名 = function(){}
-->
<!--
div、span、p标签
div标签 默认独占一行
span标签 它的长度是封装数据的长度
p段落标签 默认会在段落的上方或下方各空出一行来(如果已有就不空)
-->
<!--
&& 且运算
第一种:当表达式全为真的时候,返回最后一个表达式的值
第二种:当表达式中,有一个为假的时候,返回第一个为假的表达式
|| 或运算
第一种:当表达式全为假时,返回最后一个表达式的值
第二种:只要有一个表达式为真,就会返回第一个表达式为真的值
&& 且运算和 || 或运算会短路
-->
2.JQuery
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
$(function (){
//表示页面完成加载后,相当于window.onload = function(){}
var $btnObj = $("#btnId");// 按id查询标签对象
$btnObj.click(function (){
alert("JQuery点击");
})
});
<button id="btnId">点击</button>
JQuery对象 与 dom对象之间的转换:
1.JQuery转换为dom
var dom = $obj[下标]
2.dom转换为JQuery
var $obj = $()
attr() 可以设置和获取属性的值,不推荐操作checked、readOnly、selected、disable等
还可以操作非标准的属性(自定义的数)
prop() 可以设置和获取属性的值,只推荐操作checked、readOnly、selected、disable等
使用方法: .prop("check",true);//设置选中
内部插入:
appendTo() a.appendTo(b) 把a插入到b子元素末尾,成为最后一个子元素
prependTo() a.prependTo(b) 把a插入到b所有子元素的前面,成为第一个子元素
外部插入:
insertAfter() <h1>标题1</h1>.insertAfter("div") <div></div><h1>标题1</h1>
insertBefore <h1>标题1</h1>.insertBefore("div") <h1>标题1</h1><div></div>
替换:
replaceWith() a.replaceWith(b) 用b替换a
replaceAll() a.replaceAll(b) 用a替换所有b
删除:
remove() a.remove() 删除a标签
empty() a.empty() 删除a标签里的内容
jQuery动画
基本动画:
show() 将隐藏的元素显示
hide() 将可见元素隐藏
toggle() 可见就隐藏,不可见就显示
淡出淡入动画:
fadeln() 淡入
fadeOut() 淡出
fadeTo() 指定时间内慢慢将透明度修改到指定的值,0为透明,1为完全可见,0.5为半透明
fadeToggle() 淡入/淡出 切换
以上动画可以添加参数:
1.第一个参数是动画执行时长,以毫秒为单位
2.第二个参数是动画的回调函数(动画完成后自动调用的函数)
Jquery事件操作
$(function(){});和window.onload()=function()的区别:
他们分别是什么时候触发
1.jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就马上执行;
2.原生js的页面加载完成之后,除了要等浏览器的内核解析完成标签创建好dom对象
,还要等标签显示时需要的内容加载完成
他们触发的顺序:
1.jQuery页面加载完成后先执行
2.原生js页面加载完成后
他们执行次数:
1.原生js的页面加载完成之后,只会执行最后一次赋值函数。
2.jQuery页面加载完成之后是把全部注册的function函数一次顺序全部执行
click() 可以绑定单击事件,以及触发单击事件
mouseover() 鼠标移入事件
mouseout() 鼠标移除事件
bind() 可以给元素一次性绑定一个或者多个事件
one() 使用上跟bind一样,但one方法绑定的事件只会响应一次
live() 绑定选择器匹配的所有元素事件
unbind() 跟bind方法相反的操作,解除事件的绑定
XML是可扩展的标记性语言
xml主要作用:
1.用来保存数据,而且这些数据具有自我描述性
2.作为项目或模块的配置文件
3.作为网络传输数据的格式(现在JSON为主)
Tomcat目录介绍:
bin 专门用来存放Tomcat服务器的可执行文件
conf 专门用来存放Tomcat服务器的配置文件
lib 专门用来存放Tomcat服务器的jar包
logs 专门用来存放Tomcat服务器运行时输出的日记信息
temp 专门用来存放Tomcat运行时产生的临时数据
webapps 专门用来存放部署的web工程
work 是Tomcat工作时的目录,用来存放Tomcat运行时jsp翻译为Servlet的源码
,和session钝化的目录
请求转发的特点:
1.浏览器地址栏没有变化
2.他们是一次请求
3.他们共享request域中的数据
4.可以转发到WEB-INF目录下
5.不可以访问工程以外的资源
--base标签设置页面相对路径工作时参照的地址
href属性就是参数的地址值
对于html和css的学习还是比较的欠缺,css更多的还是了解阶段,只能用一些简单的style样式,html的基本知识还是掌握的比较得全面。 JavaScript和TypeScript的学习来说,只能够初步的让简单功能跑起来,还不能灵活的调用,并且对于前端和后端的连接只能进行数据的增删改查,让数据显示到页面,对于框架的了解不清楚。