JavaWeb
HTML
html的常规标签
1.HTML的注释写法
<!--这是注释-->
2.标题标签(数字越小,字越大)
<h1></h1> 一级标题
<h2></h2> 二级标题
<h3></h3> 三级标题
<h4></h4> 四级标题
<h5></h5> 五级标题
<h6></h6> 六级标题
3.字体标签 font
A.标准格式
<font> 字体的设置 </font>
B.常见属性
a.字体大小的设置 size="1" 范围1-7 数字越大,字体越大
b.字体颜色的设置 color="red" 红色 #00FF00 绿色
c.字体标签的设置 face="楷体" 一定要是自己系统当中有这个字体
C.加粗,斜体,下划线
<b>字体会加粗</b>
<i>字体会倾斜</i>
<u>字体下划线</u>
4.格式化标签
A.换行
<br> 也可以 <br/> 只有一半(无需包裹.只写一半)
B.段落
<p> 长段文字 </p>
C.水平线
<hr>
a.宽度 width 直接写数字表示像素,加上百分号表示比例.推荐百分号
b.高度 size 直接写数字表示像素,加上百分号表示比例.推荐百分号
c.颜色 color
d.对齐方式 align="right" left在左边 center在中间 right在右边
<hr color="#FF9900" width="20%" size="8%" align="right">
D.居中标签的效果
<center> 标签名称 ... </center>
5.特殊指令
A.空格效果
B.请参考 CHM格式笔记. -> E扩展补充 -> b阶段html -> 04特殊字符编码表对照
6.图片标签 img
A.基本格式
<img src="路径"> <!-- 可以是网络路径,也可以是相对路径,也可以是绝对路径.不推荐绝对路径-->
B.设置图片的大小对齐位置
a.大小设置 width 宽度, height 高度
b.设置对齐方式 align
<img src="mm01.png" width="10%" height="10%" align="right"/>
C.相对路径的问题
a.图片和网页在同一个目录 <img src="mm01.png"/>
b.图片在其他目录,网页 <img src="../img/mm01.png"/> 网页在src图片在img ../返回上一层
c.图片在其他目录,网页 <img src="img/mm01.png"/> 图片在网页的子目录
7.列表标签
A.有序列表 ol
<ol type="A">
<li> Java </li>
<li> UI </li>
<li> Python </li>
<li> PHP </li>
<li> 前端 </li>
</ol>
B.无序列表 ul
<ul>
<li> Java </li>
<li> UI </li>
<li> Python </li>
<li> PHP </li>
<li> 前端 </li>
</ul>
8.超链接标签 a
A.基础语法
<a href="http://www.baidu.com" target="_blank"> 点击访问百度网址 </a>
B.属性
href 可以是内网地址,可以是外网地址,可以是图片,可以是文本
target 不写或者写 _self 默认是在自己的页面打开,设置 _blank 在新的页面打开
9.块标签
A.两个标签
<span> 有多大空间占据多大空间 </span>
<div> 独占一行 </div>
B.语义化标签(了解)
<header> </header> HTML5后的头标签.只是阅读性高一点,没有实质的作用
<footer> </footer> HTML5后的脚标签.只是阅读性高一点,没有实质的作用
10.表格标签
A.基础代码
<table border="1px" align="center" width="80%" cellspacing="0">
<tr>
<th> 表头第一列 </th>
<th> 表头第二列 </th>
<th> 表头第三列 </th>
</tr>
<tr>
<td> 第一行第一列 </td>
<td> 第一行第二列 </td>
<td> 第一行第三列 </td>
</tr>
<tr>
<td> 第二行第一列 </td>
<td> 第二行第二列 </td>
<td> 第二行第三列 </td>
</tr>
</table>
B.合并单元格
a.两个属性
colspan:合并列
rowspan:合并行
b.操作步骤
I.确定是合并行 还是 合并列
II.确定第一次出现的单元格是哪一个
III.删除其他不要的行或者列
HTML的表单标签 form
1.form表单的基础介绍
A.格式
<form action="http://www.baidu.com" method="get"> ... </form>
B.属性
a. action存放的是URL 网址.(把表单项"输入框"当中的数据,提交到网址对应的服务器上)
b. method 设置请求的方式 get请求和post请求
get特点: 在地址栏有参数信息,数据量小,不安全
post特点: 在地址栏没有参数信息,数据量大,安全
C.注意
如果要提交数据到地址栏,必须设置 【name】属性
2.input标签
A.type属性 根据type属性的取值不同,表单项当中的类型就不一样
a. text 用户名的输入框
b. password 密码的输入框
c. radio 性别的单选按钮
d. checkbox 爱好的多选按钮
e. submit 提交按钮
f. button 普通按钮 和后期JavaScript 组合使用
g. image 图片按钮
h. file 上传的文件选择框
i. hidden 隐藏域.看不到UI界面,但是存在.
j. date 选择日历的
k.datetime
l.datetime-local
m.email
B.name属性
a. 提交地址栏上面的name.给服务器进行识别的标志
b. 对于单选按钮radio而言,设置相同的name属性,表示在同一组当中
c. 对于多选按钮checkbox而言,设置相同的name属性,表示在同一组当中
C.value属性
给我们那些不能让用户输入的 表单项,设置的值
D.id属性
a.可以给后面的CSS设置样式的识别器
b.可以给后面的JS设置识别具体是哪一个标签需要加特效.
E.placeholder属性
增强用户体验,给出默认提示信息的.
3.select 下拉列表
A.格式(name用于表单数据的提交,value是具体的表单数据)
<select name="guojia">
<option value="China"> 中国 </option>
<option value="USA"> 美国 </option>
<option value="England"> 英国 </option>
</select>
4.textare 文本域
A.格式 (例如:自我介绍)
<textarea cols="20" rows="5"></textarea>
CSS样式
1.CSS的概述
A.CSS的含义:
"层叠样式表"
B.CSS的作用:
a.美化HTML页面
b.解耦合,将HTML和CSS部分分离开来,多个程序员分工协作.一个写HTML.另一个写CSS
c.可以拓展HTML的标签的功能,例如:之前的字体大小有上限,使用CSS无上限。
C.三种静态网页技术的含义
a.HTML : 用于写HTML标签。例如: 建房子的毛坯房就是HTML
b.CSS :用于美化HTML界面。例如: 房子需要装修。
c.JavaScript : 用于制作特效,校验表格等效果。例如:房子的特效。智能家电,智能家居
2.CSS引入的三种方式
A.内联样式
a.作用域:
在当前的标签上面
b.格式:
<font style="font-size: 88px;color: #FF9900"> 你是真的不错!心有多大,字有多大 </font>
B.内部样式
a.作用域:
在当前的HTML页面上面
b.格式:
<head>
<meta charset="UTF-8">
<title>CSS入门</title>
<style type="text/css">
font{
font-size: 66px;
color: #0000FF
}
</style>
</head>
<body>
<font style="font-size: 88px;color: #FF9900"> 你是真的不错!心有多大,字有多大 </font>
<br><br>
<font> 牛逼啊 </font>
<br><br>
<font> 我的哥就是你哥 倪歌(你哥) </font>
</body>
C.外部样式
a.作用域:
只要你引入了外部样式,整个页面都可以使用.(需要在外部新建CSS文件)
b.格式:
<!-- HTML 代码 -->
<head>
<meta charset="UTF-8">
<title>CSS入门</title>
<link rel="stylesheet" href="css/a.css">
</head>
<body>
<font> 牛逼啊 </font>
<br><br>
<font> 我的哥就是你哥 倪歌(你哥) </font>
</body>
<!-- CSS 代码 -->
font{
font-size: 44px;
color: #FF0000
}
3.三种基本的选择器
A.ID选择器
a.含义:
(单独针对于某个HTML标签)"在一个HTML当中id要唯一"
b.语法:
#id的名称{}
B.类选择器
a.含义:
(设置同一个类的,可以是不同的标签类型)
b.语法:
.class的名称{ }
C.元素选择器(设置的是同一类的标签)
div{}
4.常见属性
border: #FF9900 1px solid; /*设置边框*/
height: 120px;/*设置高度*/
width: 480px;/*设置宽度*/
float: left; /*浮动,脱离原始文档流*/
text-align:center; /*内容居中*/
line-height:80px;/*行高*/
font-size: x-large; /*字体的大小large大字体(想一想衣服的尺码) */
color: #0000FF;/*设置颜色*/
5.盒子模型
A.外边距: margin 左上右下
B.内边距: padding 左上右下
注意事项:
内边距会影响原始的尺寸大小
可以设置 *{ box-sizing: border-box;} /*忽略边框不计算*/
JavaScript
1.JavaScript 的概述
A.Java和JavaScript的关系
没有半毛线的关系. "雷锋"和"雷峰塔"
B.JavaScript的分类
a. ECMAScript JavaScript的标准语法
b. BOM 浏览器对象模型 Browser
c. DOM 文档对象模型 Document
2.JavaScript和HTML结合
A.内部定义(可以写在HTML的任意位置,建议大家写在</body>的前面)
<script>
//简单的JavaScript语法. alert 相当于 sout
alert("HelloWorld");
</script>
B.外部引入
<!--src里面是js文件的路径-->
<script src="../javascript/a.js"></script>
3.注释
A.单行注释
//这是单行注释
B.多行注释
/*
这是多行注释
*/
4.数据类型
A.原始数据(基本数据类型)
a. number (整数,小数,NaN not a number)
b. string
c. boolean
d. null
e. undefined 未定义
B.引用数据类型(对象)
5.变量的使用
A.定义方式
var 变量名称 = 变量值;
B.了解语法(写到HTML页面当中)
document.write("<br>"); //可以把换行符写入到HTML文件当中
C.判断数据类型的操作
a.语法格式
typeof(变量名称) 返回值就是数据类型
b.注意事项
null 的typeof函数的返回值结果是 object 类型,这是JavaScript的bug
6.一元运算符
A.运算符的种类:
++ 自增
-- 自减
+ (正号)
-(负号)
B.其他数据类型转换为number的规则
a.string字符串:
情况1: 字符串的字面值,都是数字,就可以转换number类型
情况2: 字符串的字面值,不全是数字,转换出来的是 NaN (not a number)
b.boolean类型
true 转换为 1
false 转换为 0
c.null 转换:
null 转换为 number 类型的时候是 0
d.undefined 转换
undefined 转换为 NaN (not a number)
7.比较运算符
== 和 === 的区别在哪里?
a.双等比较的是 数据值 是否相等 "123"==123 true
b.三等比较的是 比较数据类型是否相等,再看数据值是否相等 "123"===123 false
8.逻辑运算符"非"!的转换
A.number: 0或NaN为false,其他为true
B.string: 空字符串""为false,其他为true
C.null和undefined: 全是false
D.对象:全部是true
ECMAScript 的特殊语法、流程控制、常用对象
1.特殊语法(了解)
A.不加分号的情况
在一行当中如果不加上分号,在这一行后面没有语句的情况下,不会报错,但是不建议。
B.定义变量不加var关键字(建议加上 var 关键字)
a.不加 var 关键字是 全局变量,在<script>标签当中都可以使用
b.加上 var 关键字是 局部变量,只能在当前的大括号里面使用
2.流程控制语句
A.常见的流程控制语句有:(语法格式和Java语法格式是一模一样的)
if ... else
switch
for 循环
while 循环
do... while 循环
B.不同点:
对于 switch 语句而言,在 Java 当中 小括号里面的取值有 数据类型的限定。在 JavaScript 没有数据类型限定。任何数据类型,都可以写在 switch 语句的小括号当中。
练习题:九九乘法表
<style>
td{
border: 1px solid #FF0000;
width: 100px;
background-color: #feffb0;
padding: 5px 5px 5px 5px;
}
font{
color: #ff39f8;
size: 20px;
}
</style>
<script>
document.write("<table align='center'>");
//外层for循环,控制行数
for(var i=1;i<=9;i++){
document.write("<tr>");
//内层for循环,控制列数
for(var j=1;j<=i;j++){
document.write("<td><center><font>");
document.write(j+"*"+i+"="+(i*j)+" ");
document.write("</font></center></td>");
}
//需要换行
document.write("</tr>");
}
document.write("</table>");
</script>
3.function对象
A.function对象的含义(如何理解)
我们可以把 function 对象看做 Java 当中的"方法"。站在Java方法的角度去理解他
B.function对象的定义和使用格式
a.定义和使用格式1:
//定义格式
function 方法名称(参数列表){
方法体;
return 返回值;
}
//使用格式
var 返回值 = 方法名称(参数值1,参数值2,参数值3);
b.定义和使用格式2:
//定义格式
var 方法名称 = function(参数列表){
方法体;
return 返回值;
}
//使用格式
var 返回值 = 方法名称(参数值1,参数值2,参数值3);
C.function对象的注意事项
a.方法名称(名称相同,前面方法失效)
在JavaScript当中,没有方法的重载,相同名称的方法,后面的会覆盖掉前面的方法。
b.返回值类型
在方法定义的时候,不需要定义返回值类型(所有类型都是var,可以省略)
如果有返回值类型,直接在方法体当中加上 return 返回值;
c.参数列表
形式参数的个数和实际参数的个数,可以不匹配。
如果 形式参数的个数>实际参数的个数。多余的形式参数,赋值是 undefined
如果 实际参数的个数>形式参数的个数。赋值给一个数组,数组的名称叫做 arguments (可变参数)
4.Array数组对象
A.Array数组对象的理解
可以把数组对象 Array 看做 Java当中 ArrayList集合
B.定义数组对象的方式(三种定义)
a. var arr1 = new Array(元素1,元素2,元素3,元素4); // var arr1 = new Array(11,4,true,'ab');
b. var arr2 = new Array(数组长度); // var arr2 = new Array(5); 表示数组的长度是5
c. var arr3 = [元素1,元素2,元素3]; // var arr1 = [11,4,true,'ab']; (推荐使用)
C.数组的特点:(两个可变)
a.数组的长度可变
b.数组的元素类型可变
D.介绍了两个方法
a.join(参数) 根据指定的分隔符,拼接数组内容.作为字符串返回. arr1.join("-"); //11-4-true-ab
b.push(参数) 在数组的末尾添加一个或者多个元素。相当于集合当中的 add()方法
5.Date对象
A.创建对象
var mDate = new Date();
B.两个方法
a.获取当前的时间 mDate.toLocaleString() 根据系统时间获取的
b.获取当前的毫秒数 mDate.getTime() 获取的是从 1970-1-1 到现在的毫秒值
6.Math对象
A.创建对象
Math 不需要创建对象,可以直接采用 Math.方法名称 或者 Math.属性名称
B.常用方法和属性
a.属性:
Math.PI 获取圆周率 3.14159265...
b.方法:
Math.random() //获取随机数,随机数的范围在 0~1 之间,包括0,不包括1的小数
Math.ceil(数据) //向上取整
Math.floor(数据) //向下取整
Math.round(数据) //四舍五入
7.正则对象
A.作用:
主要用于做表单校验.例如:判断用户名密码验证码等等是否正确
B.常见的正则表达式
a.查看API文档
b.查看川哥CHM格式笔记"A开篇说明 -> 03附录 -> 03常见正则表达式"
c.网络搜索常见正则表达式
C.使用方式
a.创建对象
方式1: var reg = new RegExp("正则表达式");
方式2: var reg = /正则表达式/;
b.调用函数
reg.test(参数); //如果匹配成功,返回true。匹配失败,返回false
8.全局对象
A.编码和解码(了解)
a.编码 encode()
b.解码 decode()
B.转换为数字类型的方法
parseInt(数据)
逐一判断前面的是否是数字,直到不是数字为止,将前面的转换为数字
例如: var number = parseInt("2019年1月"); //最终的 number = 2019
如果刚开始的时候,第一个不是数字,变成 NaN
C.将字符串作为js脚本运行
eval("字符串作为js脚本运行")
DOM
1.获取标签的对象
var html标签对象 = document.getElementById("html标签的id");
2.设置属性和内容的方法
A.设置属性的方法
html标签对象.src = "路径"; //设置路径
html标签对象.width = 10; //设置宽度
html标签对象.height = 10; //设置高度
B.修改HTML里面的内容
html标签对象.innerHTML = "需要修改的内容";
课堂案例
<body>
<!-- 定义的HTML标签 -->
<a href="http://www.baidu.com" target="_blank" id="aid"> 点我,跳转到百度首页 </a>
</body>
<script>
//弹出对话框
alert("对话框,消失之后.会重置内容")
//[1]可以获取上面的标签对象,通过id获取
var biaoqianA = document.getElementById("aid");
//[2]修改,设置 相关的内容信息
// 修改原始的属性值
biaoqianA.href = "http://www.itcast.cn";
// 修改HTML 网站当中的内容
biaoqianA.innerHTML = "传智官方网站";
</script>
3.含义
DOM 文档对象模型 document object modle
4.分类
A.DOM核心
a.节点 Node --> (父亲)
b.文档 Document
c.元素 Element
d.属性 Attribute
e.文本 Text
f.注释 Comment
B.HTMLDom
C.XMLDom
5.获取Element的对象方法
A. getElementById("id值") //通过id获取对象,返回值是唯一的一个对象(id在页面当中唯一)
B. getElementsByTagName("标签") //通过标签的名称获取所有的对象,返回的是一个数组.
C. getElementsByClassName("class值") //通过class属性,获取所有的对象,返回的是一个数组.
D. getElementsByName("name值") //通过name属性,获取所有的对象,返回的是一个数组
6.创建Document几个对象的方法
A. createAttribute() //创建属性
B. createComment() //创建注释
C. createElement() //创建元素
D. createTextNode() //创建文本节点
7.Elemnet元素相关的方法
A. removeAttribute() //删除属性
B. setAttribute() //设置属性
8.Node相关的方法
A.增删改方法
a.增 appendChild()
b.删 removeChild()
c.改 replaceChild()
B.属性
parentNode //返回父节点的对象
9.a标签的超链接
A.两个效果
a.样式
b.界面跳转
B.阻止界面跳转的代码
javascript:void(0);
HTMLDom
1.关于 innerHTML 的用法
A. 设置和获取标签
B. 控制标签样式
2.设置样式
A.自己代码设置
标签的对象.style. ...
B.用CSS现有的
标签的对象.className = CSS的class属性
事件
1.事件的四个组成部分
A. 事件 (用户的操作"点击","双击","移动","改变"...)
B. 事件源(按钮,图片,文本输入框...)
C. 监听器 (出现操作之后,需要执行的代码)
D. 注册监听器 (绑定事件源和监听器之间的操作)
2、常见的事件
A. 点击事件:
a. onclick:单击事件 //重点
b. ondblclick:双击事件
B. 焦点事件
a. onblur:失去焦点
b. onfocus:元素获得焦点。
C. 加载事件:
a. onload:一张页面或一幅图像完成加载。
D. 鼠标事件:
a. onmousedown 鼠标按钮被按下。
b. onmouseup 鼠标按键被松开。
c. onmousemove 鼠标被移动。
d. onmouseover 鼠标移到某元素之上。
e. onmouseout 鼠标从某元素移开。
E. 键盘事件:
a. onkeydown 某个键盘按键被按下。
b. onkeyup 某个键盘按键被松开。
c. onkeypress 某个键盘按键被按下并松开。
F. 选择和改变
a. onchange 域的内容被改变。
b. onselect 文本被选中。
G. 表单事件:
a. onsubmit 确认按钮被点击。 //重点(存在返回值,true提交.false不提交)
b. onreset 重置按钮被点击。
案例1: 表单提交事件(写法1)
<!-- HTML的写法 -->
<form method="get">
<input type="text" name="password"/>
<input type="submit"/>
</form>
<!-- JavaScript 脚本-->
<script>
//设置一个页面加载完毕的事件
window.onload = function (ev) {
//获取到表单标签,设置事件
var mform = document.getElementsByTagName("form")[0];
mform.onsubmit = function () {
return false;
}
}
</script>
案例2: 表单提交事件(写法2)【推荐】
<!--
1.在HTML的form表单标签上面,设置属性 onsubmit="return tijiao()"
2.在JavaScript当中定义函数,函数的返回值如果是true就可以提交.是false就不能提交
-->
<!-- HTML的写法 -->
<form method="get" onsubmit="return tijiao()">
<input type="text" name="password"/>
<input type="submit"/>
</form>
<!-- JavaScript 脚本-->
<script>
//定义函数
function tijiao() {
return false;
}
</script>
事件的简单学习
事件的绑定方式
a.方式1
//在HTML代码当中
<img src="路径" id="xx" onclick="函数名称(参数)"/>
//在JS代码当中
function 函数名称(参数){
.......
}
b.方式2(推荐使用)
//在HTML代码当中
<img src="路径" id="xx"/>
//在JS代码当中
function 函数名称(参数){
.......
}
var HTML的标签 = document.getElementById("xx");
HTML的标签.onclick = 函数名称;
BOM浏览器对象模型
1.BOM概述
A.含义:
BOM浏览器对象模型
B.组成部分
a.Window:窗口对象
b.Naigator:浏览器对象(了解即可)
c.Sceen:显示器屏幕对象(了解即可)
d.Hitory:历史记录对象
e.Loation:地址栏对象
2.Window 窗口对象
A.弹出的方法
a. alter("警告框"); //警告框
b. confirm(); //确认取消框(掌握)
c. prompt(); //输入框 参数:提示语,返回值:输入框的内容
B.打开关闭窗口的方法
a.打开窗口
var 新窗口的对象 = open("要开启的网址");
b.关闭窗口
新窗口的对象.close(); //如果不写新窗口的对象,关闭的是自己
3.定时器
A.一次性定时器
a.开启方式
var id值 = setTimeout(函数名称,毫秒值);
b.取消方式
clearTimeout(id值);
B.循环定时器
a.开启方式
var id值 = setInterval(函数名称,毫秒值);
b.取消方式
clearInterval(id值);
定时器案例(画鸭子)
<body>
<img src="../img/1.png" id="huayazi"/> <br>
<font size="5" id="zi">运行10次之后停下来</font>
<script>
//定义计数器
var count = 0;
//定义定时器的ID
var dingshiqiID;
//[1]通过id获取到img的对象
var yazi = document.getElementById("huayazi");
var shuzi = document.getElementById("zi");
//[2]定义脚标值,1,2,3,4,5...
var index = 0;
//[3]定义函数,准备赋值给定时器,循环执行
function startGame() {
//计数器累加
count++;
//A.累加的操作
index++;
//B.判断是否达到了最大值5.超过5要回来
if (index > 5) {
index = 1;
}
//C.重新设置图片img
yazi.src = "../img/" + index + ".png";
shuzi.innerHTML = "当前的次数是:" + count;
//当次数达到10次的时候,停下来
if (count >= 10) {
//取消定时器
clearInterval(dingshiqiID);
shuzi.innerHTML = "BOOM~~~~~~";
}
}
//[4]开启循环定时器
dingshiqiID = setInterval(startGame, 200);
</script>
</body>
4.window对象的属性
A. 获取其他BOM对象:
history
location
Navigator
Screen
B. 获取DOM对象
document
5.location对象
A.方法
reload() 重新加载"刷新"
B.属性
href 跳转到某个页面,获取页面地址
C.例如:
var v1 = location.href; //这里的v1 获取页面的地址
location.href = "http://www.itheima.com"; //这里就是跳转到 黑马程序员 页面
6.history历史记录
A.方法
a.forward() //前进历史记录
b.back() //后退历史记录
c.go(数字) //正数是前进,负数是后退
B.属性
length //当前的窗口历史记录的数据(注意:不是浏览器,是窗口)