JavaEE学习第一天（HTML、CSS、js）

HTML知识点

1.开发项目的简单图解

在这里插入图片描述

2.HTML的作用加粗样式

 Web浏览器的作用是读取html文档，并以网页的形式显示它们。
 浏览器不会显示html标签，而是使用标签来解释页面上的内容.
 简单说，html就是用于展示信息【图片，文件，视频，颜色…】的。

3.文件标签

html标签

 整个文件都处于<html>标签中.
 <HTML>用以声明这是 HTML 文件，让浏览器认出并正确处理此 HTML 文件。
 在HTML文件有两部分<head>与<body>

head标签

 <head>用于加载一些重要的资讯,它的内容不会被显示，只有<body>的内容才会被显示

title标签

 <title>只能出现于<head>中。它代表的是标题

body标签

 <body>中的内容会被显示。
 常用属性:
 text:用于设定文字颜色
 background：用于设定背景图片
 bgcolor:用于设定背景色

4.块标签

div标签

 用于在文档中设定一个块区域。
 常用属性：align:left center right

span标签

 用于在行内设定一个块区域。
 Html中绝大多数元素被定义为块级元素或内联元素。
 块级元素在浏览器显示时，通常会以新行来开始。例如 div p等
 内联元素在浏览器显示时，通常不会以新行来开始。Span

5.排版标签

注释

 在html中注释是<!–注释 -->
 在html中使用注释的目的与java中一样。

p标签

 <p>标签是段落标签，可以将html文档分割为若干段落。浏览器会自动在段落前后添加空行。
 <p>标签常用属性
align:用于设定对齐方式可选值 left right center 默认值是left.

br标签

 <br>标签是换行标签。
 因为浏览器会自动的忽略空白与换行，因此<br>标签成为了我们最常用的标签。

hr标签

 <hr>标签会生成一条水平线。
常用属性:
align:设置水平线对齐方式可选值 left right center
size:设置水平线厚度以像素为单位。默认为2
width:设置水平线长度.可以是绝对值或相对值。默认为100%
color:设置水平线颜色.默认为黑色

6.字体标签

font

 <font>标签用于规定文本的字体，大小，颜色。
常用属性:
face:规定文本的字体 verdana Arial 【开发中比较少用，一般用style来设置字体】
size:规定文本的大小
color:规定文本的颜色

h1-h6

 <h1>-<h6>标签用于定义标题.
 <h1>最大标题
 <h6>最小标题

7.列表标签(重点)

 <ul>标签表示的是一个无序列表。
常用属性:
type:规定列表的项目符号类型,可取值 disc,square,circle.默认值为disc

 <li>标签表示的是一个列表项
常用属性:
type:这个属性只适用于无序列表，用于设定项目符号，默认值为disc
value:这个属性只适用于有序列表，用于设定列表的项目数字

 <ol>表示的是一个有序列表。
常用属性:
type:这个属性规定列表中使用的标记类型。可取值1 A a I i. 【平时比较少用】
start:这个属性规定列表的起始值

\<ul type="square">
		\<li>AAAA\</li>
		\<li>BBBB\</li>
		\<li>CCCC\</li>
	\</ul>
	\<hr>
	\<ol start="2" type="i">
		\<li>AAAA\</li>
		\<li>BBBB\</li>
		\<li>CCCC\</li>
		\<li>DDDD\</li>
	\</ol>

在这里插入图片描述

8.图形标签

img 标签

 <img>是一个图片标签，用于在页面上引入图片.
 常用属性：
src:用于设定要引入的图片的url
alt:用于设定图像的替代文字,如果图片不存在时，会出现
width:用于设定图片的宽度
height:用于设定图片的高度
border：图片边框厚度

9.链接标签

a 标签

 <a>标签用于定义超连接，用于从一个页面链接到另一个页面。
 常用属性:
href:用于设定链接指向页面的url.
name:用于设定锚的名称
target:用于设定在何处打开链接页面。_blank:在新页面中打开

10.表格标签（重点）

table

 <table>标签用于定义表格
 常用属性:
align:用于设定表格的对齐方式
bgcolor:用于设定表格的背景颜色。
border:用于设定表格边框的宽度
width:用于规定表格的宽度。

 <tr>标签用于定义表格的行,包含一个或多个th或td元素。
 <tr>常用属性:
align:用于设定表格中行的内容对齐方式。
bgcolor:用于设定表格中行的背景颜色。

 <td>标签用于定义表格单元
 td元素中的文本一般显示为正常字体且左对齐。
 <td>常用属性:
align:用于设定单元格内容的对齐方式。
bgcolor:用于设定单元格背景颜色。
height:用于设定单元格的高度。
width:用于设定单元格的宽度。
colspan:用于设定列合并
rowspan:用于设定行合并。

caption

 <caption>用于定义表格标题
 <caption>标签必须紧随<table>标签之后，一个表格只能有一个标题。通常这个标题会被居中于表格之上。

 <th>标签用于定义表格的表头，<th>内部的文本通常呈现为居中加粗文本。
 Html表格中有两种类型的单元格：
 表头单元格th:包含表头信息。
 标准单元格td:包含数据。

thead

 <thead>标签用于定义表格的页眉
 <thead>标签用于组合HTML表格的表头内容。
 <thead>元素应该与<tbody>和<tfoot>元素结合起来使用。
 注意:<thead>内部必须有<tr>标签。

tbody

 <tbody>标签用于定义表格的主体
 <tbody>标签用于组合HTML表格的主体内容。

tfoot

 <tfoot>标签用于定义表格的页脚
 <tfoot>标签用于组合HTML表格中的表注内容。

在这里插入图片描述

11.表单标签（重点）

form标签

 <form>标签代表一个表单，表单用于向服务器传输数据。
 <form>标签能够包含<input>，可以是文本字段，复选框，单选框或提交按钮等。还可以包含<textarea> <select>等。
 <form>常用属性:
 name:用于定义表单的名称
 action:用于规定提交表单时向何处发送表单数据。
 method:用于规定提交的方式。一般取值 POST或GET
 关于POST与GET方式区别:
 get方式只能少量数据,而post可以携带大数据。
 get方式提交时，数据会在地址栏上显示，安全性差。Post方式提交不会在地址栏上显示数据，更加安全。

input种类

 <input> 标签用于搜集用户信息。
 根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
 关于<input>标签type属性值说明 :

在这里插入图片描述
text

 <input type=”text”>
 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
 其它常用属性:
 name:定义标签名称
 value:定义标签值
 size:定义输入字段的长度
 maxlength:定义可输入最大字符个数
 Placeholder: 提示内容

password

 <input type=”password”>
 定义密码字段。该字段中的字符被掩码.
 其它常用属性:
 name:定义标签名称
 value:定义标签值
 size:定义输入字段的长度
 maxlength:定义可输入最大字符个数

radio
<input type=”radio”>
定义单选按钮。
其它常用属性:
name:定义标签名称.注意，对于单选按钮，如果要想做到单一选择，多个radion的name值必一样。
value:定义标签值
checked:定义该标签默认被选中。
button
<input type=”button”>
定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）
其它常用属性:
name:定义标签名称
value:按钮显示名称
hidden
<input type=”hidden”>
定义隐藏的输入字段。
其它常用属性:
name:定义标签名称
value:定义标签值
file
<input type=”file”>
定义输入字段和 "浏览"按钮，供文件上传。
其它常用属性:
name:定义标签名称
submit
<input type=”submit”>
定义提交按钮。提交按钮会把表单数据发送到服务器。
其它常用属性:
name:定义标签名称
value:按钮显示名称
reset
<input type=”reset”>
定义重置按钮。重置按钮会清除表单中的所有数据。
其它常用属性:
name:定义标签名称
value:按钮显示名称
image
定义图像形式的提交按钮。
这个标签主要是用了替换submit按钮，因为默认产生的提交按钮并不漂亮，这个标签允许你采用指定的图片做为提交按钮。
其它常用属性:
name:定义标签名称
src:定义作为提交按钮显示的图像的url
alt:定义作用图像的替代文本。
select与option标签
 <select>用于定义一个下拉列表
 常用属性:
 name:定义下拉列表的名称
 size:定义下拉列表中可见选项的数目
 multiple:定义可选择多个选项
 <option>用于定义下拉列表中的选项。
 <option>需要位于<select>标签内部
 常用属性:
 value:定义送往服务器的选项值
 selected:定义选项为选中状态。
在这里插入图片描述
textarea标签
 <textarea>标签用于定义一个多行文本输入控件(多行文本框,文本域)
 常用属性:
 name:定义多行文本框名称
 cols:定义多行文本框可见宽度
 rows:定义多行文本框可见行数
 wrap:规定多行文本框中文字如何换行。
在这里插入图片描述

12.表格的应用场景

 用于登录和注册
在这里插入图片描述

13.特殊字符

在这里插入图片描述

CSS知识点

1.css作用

 样式表解决了html的内容与表现分离
 使用样式表极大的提高了工作效率。

2.css书写规则

css书写规则
本语法
 Css规则主要由两部分组成 1.选择器 2.一条或多条属性声明
 选择器主要作用是为了确定需要改变样式的HTML元素
 每一条声明由一个属性和一个值组成，使用花括号来包围声明，属性与值之间使用冒号(:)分开
 如图:
在这里插入图片描述

3.导入css3种方式

第一种：内联样式表
<div style=”border:1px solid black”>这是一个DIV</div>
第二种：内部样式表
在这里插入图片描述
第三种：外部样式表

4. CSS选择器（重点）

id选择器
 id选择器使用#引入，它引用的是id属性中的值。

#div2{
		border: 1px dashed red;
	}
	
\<div id="div1">
	今天天气不错...
\</div>

类选择器
 类选择器使用时,需要在类名前加一个点号(.)
在项目开发中，给标签添加属性都是通过类选择器

.weather{
		color:red;
		border: 1px dashed green;
	}
\<div class="weather">今天天气不错4...\</div>

元素选择器
这是最常见的选择器，简单说，文档中的元素就是选择器

div{
		width: 200px;
		height: 200px;
		border: 1px solid red;
	}
	
	span {
		border: 1px solid green;
	}
	
\<div>习还你\</div>
\<div>李克\</div>

\<span>汪海\</span>\<br>

属性选择器
 如果需要选择有某个属性的元素，而不论属性是什么，可以使用属性选择器

input[type="text"]{
		background-color: yellow;
		border: 1px solid blue;
	}
\<input type="text" placeholder="请输入用户名">\<br>
\<input type="password" placeholder="请输入密码">\<br>

伪类选择器

a:link{color: red;}/* 未访问的连接颜色 */
	a:visited{color:green;}/* 已经访问后，显示颜色 */
	a:hover{color:blue;}/* 鼠标移动到连接颜色 */
	a:active{color:yellow};/* 长按连接颜色 */

\<a href="http://www.baidu.com">百度\</a>
\<a href="http://www.taobao.com">淘宝\</a>
\<a href="http://www.jd.com">京东\</a>

层级选择器
是类选择器、id选择器、元素选择器的结合

div div .p1{
		border: 1px solid red;
	}



\<div>
	\<p>段落.....\</p>
	\<div>
		\<p class="p1">段落.....\</p>
		\<span>饿了...\</span>
	\</div>
\</div>

5.属性

字体

\<style type="text/css">
/* 	Css字体属性定义文本的字体系列，大小，加粗，风格(如斜体)和变形(如小型大写字母)
	常用属性:
	font:简写属性，作用是把所有针对字体的属性设置在一个声明中。【style size family】
	font-family:定义字体系列
	font-size:定义字体的尺寸
	font-style:定义字体风格 */
	
	#p1{
/* 		font-family: "黑体";
		font-size: 42px;
		font-style: italic; */
		/* font内容是有固定顺序  style，size family*/
		font: italic 22px "黑体";
	}
	
/* 	文本属性
	color:定义文本颜色
	text-align:定义文本对齐方式
	letter-spacing:定义字符间隔 */
	
	#p2{
		color: red;
		text-align: right;
		letter-spacing:20px; 
	}
\</style>
\</head>
\<body>

\<p id="p1">今天你努力没？别人在努力，你在干啥???\</p>
\<p id="p2">今天你努力没？别人在努力，你在干啥???\</p>
\</body>

背景

\<style type="text/css">
/* 常用属性:
background:简写属性，作用是将背景属性设置在一个声明中
background-color:定义背景颜色
background-image:定义背景图片
background-position:定义背景图片的起始位置
  background-repeat:定义背景图片是否及如何重复。 */
  
  p{
  	width: 450px;
  	height: 450px;
  	border: 1px solid red;
  	background-color: gray;
  	background-image: url("./m1.png");
  	background-position:center; 
  	background-repeat:repeat-y;
  }
\</style>
\</head>
\<body>

\<p id="p1">今天你努力没？别人在努力，你在干啥???\</p>
\</body>

列表

\<style type="text/css">
/* list-style:简写属性。用于把所有用于列表的属性设置于一个声明中。
  list-style-image:定义列表项标志为图象
  list-style-position:定义列表项标志的位置
  		inside:里面
  		outside:外面
	list-style-type:定义列表项标志的类型。 */
	
	li{
		/* list-style: disc; */
		/* list-style-image: url("./forward.gif");
		border: 1px dotted red;
		list-style-position: inside;
		list-style-type: square; */
		border: 1px dotted red;
		list-style:inside url("./forward.gif");
	}
\</style>
\</head>
\<body>

\<ul>
	\<li>张艺\</li>
	\<li>吴刚\</li>
	\<li>李子柒\</li>
	\<li>李阳\</li>
\</ul>

\</body>

表格

\<style type="text/css">
/* 常用属性:
	border-collapse:定义是否把表格边框合并为单一的边框。
		collapse:合并
		separate:分隔
	  border-spacing:定义分隔单元格边框的距离
	caption-side:定义表格标题的位置 */
	table {
		/* border-collapse: separate; */
		/* border-spacing: 20px;  */
		/* caption-side:top; */
	}
	
/* 	outline:在一个声明中设置所有的轮廓属性
	outline-color:定义轮廓的颜色
	outline-style:定义轮廓的样式
	outline-width:定义轮廓的宽度 */
	
	table {
		border: 1px solid red;
		/* outline: 1px dashed blue; */
		/* 等于下面三行代码 */
		outline-color: blue;
		outline-style: dashed;
		outline-width: 3px;
	}

\</style>
\</head>
\<body>

\<table border="1" width="300px">
	\<caption>中国领导团队\</caption>
	\<tr>
		\<td>名字\</td>
		\<td>产地\</td>
	\</tr>
	\<tr>
		\<td>习喜喜\</td>
		\<td>陕西\</td>
	\</tr>
	\<tr>
		\<td>李克克\</td>
		\<td>安徽\</td>
	\</tr>
\</table>



\</body>

6.定位（重点）

相对定位

\<style type="text/css">

/* 	相对定位是一个非常容易掌握的概念。
	如对一个元素进行相对定位，
	它将出现在它所在的位置上。
	然后通过设置垂直或水平位置，
	让这个元素“相对于”它的起点进行移动。 
	
	top:定义了定位元素的上外边距边界与其包含块上边界之间的偏移量
right: 定义了定位元素右外边距边界与其包含块右边界之间的偏移
left: 定义了定位元素左外边距边界与其包含块左边界之间的偏移
bottom: 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
	*/
	
	.div1{
		width: 200px;
		height: 200px;
		border: 1px solid red;
	}

	.div2{
		width: 200px;
		height: 200px;
		border: 1px solid green;
		/* 定位:relative定位 */
		position:relative; 
		left: 100px;/* 在原本的位置从左往右边移动200px */
		top: 50px;/* 在原本的位置从下往下移动50px */
		
	}
\</style>
\</head>
\<body>

\<div class="div1">\</div>
\<div class="div2">\</div>

\</body>

绝对布局

\<style type="text/css">

	/* 绝对布局 */
	
	.div1{
		width: 200px;
		height: 200px;
		border: 1px solid red;
	}

	.div2{
		width: 200px;
		height: 200px;
		border: 1px solid green;
		/* 定位：absolute 绝对布局 
		   默认情况下，元素距离顶部，还有左边有8个像素的距离
		*/
		position: absolute;/*脱离文档流  */
		left: 208px;
		top: 8px
	
	}
\</style>
\</head>
\<body>

\<div class="div1">\</div>
\<div class="div2">\</div>

\</body>

浮动布局

\<style type="text/css">

	/* 浮动布局 */
	
	.div1{
		width: 100px;
		height: 100px;
		border: 1px solid red;
		float: right;
	}

	.div2{
		width: 100px;
		height: 100px;
		border: 1px solid green;
		float: right;
	}
	.div3{
		width: 100px;
		height: 100px;
		border: 1px solid blue;
		float: right;
		
	}
\</style>
\</head>
\<body>

\<div class="div1">\</div>
\<div class="div2">\</div>
\<div class="div3">\</div>

\</body>

js知识点

1.导入JS方式

第一种：
 在html页面中直接插入javascript
 如需在 HTML 页面中插入 JavaScript，请使用

2.JS的变量声明

<script type="text/javascript">

/*JS的变量声明
  1.javascript中的变量与我们在java中的变量不一样。
  	String s = "hello";
2.在javascript中使用 var 运算符（variable 的缩写）加变量名定义的
     js中字符可以是单引号，也可以是双引号
     js在声明，不需要声明类型
3.JavaScript 变量名称的规则：
   变量对大小写敏感（y 和 Y 是两个不同的变量） 
   变量必须以字母或下划线开始  */

	var x = 1;//undefined
	var y = null;//null
	/* 变量的类型 */
	/* alert(typeof(y)); */
    //alert(typeof y)
    alert(x == y);//判断两个变量是否相等

</script>

3.数据类型转换

<script type="text/javascript">

	//数据类型转换
	//1.转字符
	//原始类型:string,number,boolean,undefined,null
	var x = 12;
	//在控制台打印
	console.log(typeof x);
	
	//把number转成字符串
	var y = x.toString();
	console.log(typeof y);
	
	var z = true;
	console.log(typeof z);
	//把boolean类型转成字符串
	var a = z.toString();
	console.log(typeof a);
	
	
	//2.转数字
	var s1 = '12';
	var b = parseInt(s1);
	console.log(typeof b);
	//3.强制类型转转换
	//3.1把数据转成boolean类型
	var x = -112;
	var b = Boolean(x);//0:false,1:true
	console.log(typeof b);
	console.log(b);
	
	//3.1 把数据转成number
	var s = '12';
	var n = Number(s);
	console.log(typeof n);
	
	//3.2 把数据转成字符串
	var b1 = true;
	var s1 = String(b1);
	console.log(typeof s1)
</script>

4.运算符

<script type="text/javascript">
	//加法运算
	var x = '10';
	var y = 20;
	console.log(x + y);
	
	//===:全等：类型与值都要相等
	//==:只判断值，不判断类型
	var a = '20';
	var b = 20;
	console.log(a === b);
	
/* 	类型运算符
	typeof:判断数据类型 返回我的数据类型
	instanceof：判断数据类型 是否是某种类型 */
	var t = '12';
	console.log(typeof t);
	
	//js也是有面向对象概念
	var obj = new Object();
	console.log(obj instanceof Object);
	
	//for循环
	for(var i=0;i<10;i++){
		console.log(i);
	}
	
	//for in 循环数组
	console.log('=======for in 循环数组=========')
	var arr = [120,119,110];
	for(idx in arr){
		console.log(arr[idx]);
	}
	
</script>

5.js常用对象

<script type="text/javascript">
	//js的对象
	
	//1.Boolean对象
	var v1 = new Boolean('true');//构造方法
	var v2 = Boolean('true');//转换方法
	console.log(typeof v1);
	console.log(typeof v2);
	
	//2.Number对象
	var v3 = new Number(10);
	console.log(typeof v3);
	
	//3.数组对象
	/* var arr1 = [23,1,2,3]; */
	var arr2 = new Array(); 
	arr2.push(120);//添加元素
	arr2.push(110);
	arr2.push(119);
	arr2.push(210);
	
	console.log(arr2);
	
	arr2.pop();//移除最后的元素
	console.log(arr2.toString());//把数组转成字符串
	
	
	arr2.sort();//排序
	console.log(arr2.toString());
	
	
	var arr3 = new Array('zhangsan','lisi','wangwu');
	console.log(arr3.toString());
	
	//4.String对象
	var s1 = 'JS四不象';
	var s2 = new String(s1);//把原始类型转成引用类型
	console.log(typeof s2);
	
	//返字符串的索引
	console.log(s2.indexOf('不'));
	
	//5.Date 对象用于处理日期和时间。
	var date = new Date();
	console.log(date);
	console.log('年:' + date.getFullYear());
	console.log('月:' + (date.getMonth() + 1));
	console.log('日:' + date.getDate());
	console.log('时:' + date.getHours());
	console.log('分:' + date.getMinutes());
	console.log('秒:' + date.getSeconds());
	
	//6.RegExp 正则表达式
	var email = '[email protected]'
	
	//创建正则表达式对象
	//var reg = new RegExp(pattern);
	//var reg = /^[1~9]\\d{4,14}$/;//qq表达式
	
	var reg = /^[A-z0-9_]+@[A-z0-9]+\.[A-z]+$/
	console.log(reg.test(email));
	
	//7.js的自定义对象的创建
	var stu = {name :'gyf',height: 19};
	console.log(typeof stu);
	console.log(stu.name);
</script>

6.js的方法

<script type="text/javascript">
	/*  js方法的声明3种 */
	
	/* 第一种：
	function 	函数名称(参数列表){
			函数体;
	} 
	js的方法：不需要声明返回值,参数不需要声明类型
	*/
	function add(a, b) {
		console.log(a + b);
	}
	
	add(12,12);
	add('12',12);
	
	//声明有返回值的方法
	function plus(a,b){
		console.log('参数长度:' + arguments.length);
		
		//遍历方法实际传的参数
		for(var i=0;i<arguments.length;i++){
			console.log('参数' + i + '---'+ arguments[i]);
		} 
		return a + b;
	}
	
	/* function plus(a,b,c){
		return a + b + c;
	} */
	
	var r = plus(12,110,13,10);
	console.log('r=' + r);
	
	/* 第二种：
	var 函数名称=function(参数列表){
		函数体;
	}
	*/
	
	var add = function(a,b) {
		//打印a+ b 的值
		console.log(a + b);
	}
	
	add(112,12);
	
	/* 第三种：
	var 函数名称=new Function(参数列表,函数体);
	*/
	
	var add = new Function('a','b','return a + b;');
	
	console.log(add(10,10)); 
</script>

7.js的全局函数

<script type="text/javascript">
	//js的全局函数，内置一些函数
	
	//encodeURI/encodeURIComponent 编码URL
	//1.encodeURI 把url的中文改成%号形式
	var url1 = 'http://www.baidu.com?key=中国';
	console.log('url1:' + url1);
	var url2 = encodeURI(url1);
	console.log('url2:' + url2);
	
	//2.不仅把url的中文改成%号形式，把特殊字符也改成%形式
	var url3 = encodeURIComponent(url1);
	console.log('url3:' + url3);
	
	//3decodeURI/decodeURIComponent  解码URL
	var url4 = 'http%3A%2F%2Fwww.baidu.com%3Fkey%3D%E4%B8%AD%E5%9B%BD';
	var url5 = decodeURIComponent(url4);//可以解码特殊字符
	console.log('url5:' + url5);
	
	var url6 = 'http://www.baidu.com?key=%E4%B8%AD%E5%9B%BD';
	var url7 = decodeURI(url6);
	console.log('url7:' + url7);
	
	//4.escape 编码uncide
	console.log(escape('中国'));
	console.log(unescape('%u4E2D%u56FD'));
	
	//5.eval 把字符串当成js执行
	var s = 'var i = 10;alert(i)';
	eval(s);
</script>

8.js的事件（重点）

1.onclick:点击事件
2.Onchange事件：改变

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>js的事件</title>

<script type="text/javascript">
	//onclick:点击事件
	/*
	按钮：事件源
	点击：事件
	方法:  响应行为
	*/
	
	function myclick() {
		alert('想看球赛不？');
	}
	
	//Onchange事件：改变
	
	//改变区域
	function changeDistrict() {
		//alert('xxx');
		//1.获取选中城市
		//1.1获取city的select标签
		var cityTag = document.getElementById('city');
		
		//1.2获取选中的值
		var code = cityTag.value;
		
		
		//1.3获取区域标签
		var districtTag = document.getElementById('district');
		switch (code) {
		case 'gz':
			districtTag.innerHTML = '<option>天河区</option><option>越秀区</option><option>番禺区</option><option>黄圃区</option>';
			break;
		case 'sz':
			districtTag.innerHTML = '<option>盐田区</option><option>龙岗区</option><option>南山区</option><option>宝安区</option>';
			break;
		case 'zh':
			districtTag.innerHTML = '<option>拱北区</option><option>香洲区</option>'	;
			break;
		
		}
	}
	
</script>
</head>
<body>

<button onclick="myclick()">点我有惊喜</button>

城市：<select name="city" id="city" onchange="changeDistrict()">
		<option value="gz">广州</option>
		<option value="sz">深圳</option>
		<option value="zh">珠海</option>
	 </select>

区:<select id="district">
	<option>天河区</option>
	<option>越秀区</option>
	<option>番禺区</option>
	<option>黄圃区</option>
</select>
</body>
</html>

3.onfoucus:获得焦点的事件
4.onblur:失去焦点的事件

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>焦点事件</title>

<script type="text/javascript">

	/* onfoucus:获得焦点的事件
	onblur:失去焦点的事件 */
	
	function start() {
		console.log('文本框编辑中...');
		
		//通过id获取span标签
	/* 	var spanTag = document.getElementById('tip');
		spanTag.innerHTML = '文本框编辑中...'; */
		document.getElementById('tip').innerHTML = '文本框编辑中...';
	}
	
	function end() {
		console.log('文本框编辑结束...');
		
		var spanTag = document.getElementById('tip');
		spanTag.innerHTML = '文本框编辑结束...';
	}
</script>
</head>
<body>

用户：<input type="text" placeholder="请输入用户名" onfocus="start()" onblur="end()">
<span id="tip"></span>
</body>
</html>

5.onmouseover:鼠标悬浮的事件
6.onmouseout:鼠标离开的事件

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>焦点事件</title>

<script type="text/javascript">
	/* onmouseover:鼠标悬浮的事件
	onmouseout:鼠标离开的事件 */
	
	function over() {
		document.getElementById('div1').innerHTML = '鼠标在框内';
	}
	
	function out() {
		document.getElementById('div1').innerHTML = '鼠标在框外';
	}
</script>
</head>
<body>

<div id='div1' style="width: 200px;height: 200px;border: 1px solid red;" onmouseover="over()" onmouseout="out()"></div>
</body>
</html>

7.onload:加载完毕的事件

等到页面加载完毕在执行onload事件所指向的函数

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>加载事件</title>

<script type="text/javascript">
	/* onload:加载完毕的事件
	等到页面加载完毕在执行onload事件所指向的函数 */
	//document.getElementById('tip').innerHTML = '刘教练';
	window.onload = function(){
		document.getElementById('tip').innerHTML = '刘教练';
	} 
	
	function myclick() {
		document.getElementById('tip').innerHTML = '刘老师';
	}
	
</script>
</head>

<body>
	<span id='tip'></span>
	<button onclick="myclick()">点击</button>
</body>
</html>

9.this

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	window.onload = function(){
		//给div绑定了点击事件
		document.getElementById('div1').onclick = function () {
			//document.getElementById('div1').innerHTML= '点击';
			//this代表当前事件事件源
			this.innerHTML = '点击';
		}
		
	}
</script>
</head>
<body>

</body>

<div id="div1" style="width: 100px;height: 100px;border: 1px solid red;"></div>
</html>

10.阻止事件行为

阻止事件默认行为

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	//阻止事件默认行为
	function fun(e) {
		//window.event.returnValue = false;
		//w3c,IE代表是浏览器实现技术
		//大部份浏览器实现技术都是w3c
		if(e && e.preventDefault){
			alert("w3c");
			e.preventDefault();//阻止事件
		}else{
			alert("IE");
			window.event.returnValue = false;////阻止事件
		} 
	}
</script>
</head>
<body>
<a href="http://www.baidu.com" onclick="fun(event)">百度 </a>
</body>
</html>

阻止事件的传播

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//阻止事件的传播
	function fun2() {
		alert('点击了红色');
	}
	
	function fun1(e) {
		alert('点击了黄色');
		if(e && e.stopPropagation){
			//alert("w3c");
			e.stopPropagation();//停止事件传递
		}else{
			//alert("IE");
			window.event.cancelBubble = true;//停止事件传递
		}
	}
	
	fun1(null);
</script>
</head>
<body>
	<div style="width: 200px; height: 200px; background-color: red"
		onclick="fun2()">
		<div style="width: 100px; height: 100px; background-color: yellow"
			onclick="fun1(event)"></div>
	</div>
</body>
</html>

11.window对象的方法

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//window对弹框的三个方法,alert,confirm,prompt
	function click1() {
		window.alert('美女');
		//alert('美女...');window对象可以省略
	}
	
	function click2() {
		//提示选择框,点击确定或者取消按钮时，会有返回boolean值
		var r = confirm('你喜欢长腿美女?');
		console.log(r);
		if(r){
			console.log('李同学有资源，找他');
		}else{
			console.log('难道你是同性恋');
		}
	}
		
	function click3() {
		//prompt 输入提示
		var r = prompt('请输入名字');
		console.log(r);
		if(r == null){
			console.log('点击取消');
		}else{
			console.log(r);
		}
	}
	
	function click4() {
		//通过js跳转到其它页面
		//window.open('http://www.baidu.com');
		window.open('./test.html');
	}
	
	//定时器(指定时间执行任务)
	var timer;//全局变量
	function start() {
		//5秒后执行任务
		timer = setInterval(function() {
			console.log(new Date() + '任务...')
		},2000);
	}
	
	//结束定时任务
	function end(){
		clearInterval(timer);
	}
	
</script>
</head>
<body>

<button onclick="click1()">1号点击</button>
<button onclick="click2()">2号点击</button>
<button onclick="click3()">3号点击</button>
<button onclick="click4()">4号点击</button>

<button onclick="start()">开始定时任务</button>
<button onclick="end()">结束定时任务</button>
</body>
</html>

12.页面定时功能（订单业务可用）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>定时跳转页面</title>

<script type="text/javascript">

	/* 开始倒计时 */
	var timer;
	var second = 5;
	function start() {
		
		//1.设置定时器
		timer = setInterval(function(){
			if(second == 0){
				//2.结束定时器
				clearInterval(timer);
				
				//3.跳转
				//open('./order.html');//新窗跳转
				window.location = './order.html';//当前页面跳转
			}
			
			//显示span内容
			document.getElementById('time').innerHTML = second;
			second --;
			
			
		},1000);
	}
	
	//加载完后开始任务
	window.onload = function () {
		start();
	}
</script>
</head>
<body>


支付成功，<span id="time">5</span>秒后自动跳转定单页面
</body>
</html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>定时跳转页面</title>
</head>
<body>


iphonex购买定单：<br>
价格：10000.00<br>
地址: xxxxxx
</body>
</html>

13.dom操作（重点）

1.getElementById() 方法(*)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//1.getElementById() 方法
	function myClick() {
		//1.getElementById() 方法 【通过ID找到节点】
		var  usernameTag = document.getElementById('username');
		
		//2.获取标签、节点 属性
		console.log(usernameTag.type);
		
		//3.获取标签内容
		console.log(usernameTag.value);
	}
	
	
	//6.4 getElementsByTagName方法 通过标签名字找节点
</script>
</head>
<body>


<input type="text" placeholder="请输入用户名" id="username"><br>
<input type="password" placeholder="请输入密码" id="password"><br>
<button onclick="myClick()">点击</button>
<br>

</body>
</html>

2. getElementsByTagName方法通过标签名字找多个节点
3 .getElementsByName() 方法通过标签的name属性获取节点

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	/* 掌握通过DOM操作，获取标签节点，获取标签内的属性的值 */
	
	//2 getElementsByTagName方法 通过标签名字找多个节点
	function myClick() {
		//返回是一个数组，把所有节点存在数组
		var inputTags = document.getElementsByTagName('input');
		//console.log(typeof inputTags );
		console.log(inputTags.length);
		
		//遍历数组
		for(var i=0;i<inputTags.length;i++){
			var inputTag = inputTags[i];
			console.log(inputTag.type + '----' + inputTag.value);
		}
	}
	
	//3 getElementsByName() 方法 通过标签的name属性获取节点
	function myClick2() {
		var inputTags = document.getElementsByName('name1');
		
		//遍历
		for(var i=0;i<inputTags.length;i++){
			var inputTag = inputTags[i];
			console.log(inputTag.type + '----' + inputTag.value);
		}
	}
</script>
</head>
<body>


<input type="text" value="Java开发工程师" name="name1"><br>
<input type="text" value="Android开发工程师" name="name1"><br>
<input type="text" value="Python开发工程师" name="name3"><br> 
<input type="text" value="iOS开发工程师" name="name4"><br> 
<input type="password" value="123456"><br> 
<button onclick="myClick2()">点击</button>
<br>

</body>
</html>

4.hasChildNodes() 判断当前的节点有没子节点
firstChild/lastChild

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	//hasChildNodes() 判断当前的节点有没子节点
	function myClick() {
		//1.获取form标签/节点
		var formTag = document.getElementById('form1');
		
		//2.是否有子节点
		console.log(formTag.hasChildNodes());
		
		//firstChild/lastChild
		//通过firstChild/lastChild来获取标签时，每个标签之间不能有空格或者换行
		//3.获取第一个节点
		var firstTag = formTag.firstChild;
		console.log(firstTag.type + '---' + firstTag.value);
		
		//4.获取最后一个节点
		var lastTag = formTag.lastChild;
		console.log(lastTag.type + '---' + lastTag.value);
	}
</script>
</head>
<body>

<!-- 一般的input标签都是放在form标签里面 -->
<form action="" id="form1"><input type="text" placeholder="请输入用户名" id="username">
<input type="password" placeholder="请输入密码" id="password">
<input type="text" placeholder="请输入生日" id="birthday">
</form>

<button onclick="myClick()">点击</button>

</body>
</html>

5.getAttribute/setAttribute 属性(*)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	
	function myClick() {
		//replaceChild 
		//1.获取节点
		var clTag = document.getElementById('cl');
		var ldhTag = document.getElementById('ldh');
		
		//2.替换
		//获取父节点
		var ul = clTag.parentNode;
		
		//替换 : 
		//ul.replaceChild(ldhTag,clTag);
		
		
		//getAttribute/setAttribute 属性
		//获取陈粒的一些属性
		console.log(cl.getAttribute('dog'));
		console.log(cl.getAttribute('name'));
		
		//给标签设置属性
		cl.setAttribute('dog','笑天犬');
		console.log(cl.getAttribute('dog'));
		
		//加强：标签属性的获取
		var inputTag = document.getElementById('username');
		console.log(inputTag.type + '====' + inputTag.value);
		
		console.log(inputTag.getAttribute('type'));
		console.log(inputTag.getAttribute('value'));
	}
</script>
</head>
<body>

<input type="text" value="Java Gosling" id="username">

<ul id>
	<li id='cl' dog="泰迪" name="chengli">陈粒</li>
	<li>胡歌</li>
	<li>周杰伦</li>
</ul>

<ul>
	<li id='ldh'>刘德华</li>
	<li>古天乐</li>
</ul>


<button onclick="myClick()">点击</button>

</body>
</html>

6.节点地增删改查
document.createElement 创建HTML标签
document.createTextNode 创建文本节点
appendChild 添加子节点
insertBefore 在前面添加节点
insertAfter 在后面添加节点
removeChild 移除节点

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

/* 	节点地增删改查
	document.createElement 创建HTML标签
	document.createTextNode 创建文本节点
	appendChild 添加子节点
	insertBefore 在前面添加节点
	insertAfter  在后面添加节点
	removeChild  移除节点
		
	*/
	
	function myClick2(){
		//获取上海的节点
		var shTag = document.getElementById("sh");
		
		//创建深圳节点
		var szTag = document.createElement('li');
		var txtTag = document.createTextNode('深圳');
		szTag.appendChild(txtTag);
		
		//获取父节点
		var ul = document.getElementById('city');
		
		
		//insertBefore 在前面添加节点
		//ul.insertBefore(szTag,shTag);
		
		//insertAfter  在后面添加节点
		//ul.insertAfter(szTag,shTag);
		
		//removeChild  移除节点
		ul.removeChild(shTag);//删除上海的节点
	}
	
	function myClick() {
		//在尾部添加一个深圳
		//1.创建li标签
		var szTag = document.createElement('li');
		
		//2.创建文本节点
		var txtTag = document.createTextNode('深圳');
		
		//3.li节点添加内容
		szTag.appendChild(txtTag);
		
		//4.获取城市标签
		var cityTag = document.getElementById('city');
		cityTag.appendChild(szTag);
	}
	
	function myClick3() {
		//innerHTML
		var city2Tag = document.getElementById('city2');
		city2Tag.innerHTML = '<li>北京</li><li>广州</li>';
	}
</script>
</head>
<body>

<ul id="city">
	<li>北京</li>
	<li id="sh">上海</li>
	<li>广州</li>
</ul>


<ul id="city2">
	<li>广州</li>
	<li>北京</li>
</ul>
<button onclick="myClick3()">点击</button>

</body>
</html>

练习题

1.网上书店

\<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
\<html>
\<head>
\<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
\<title>网上书城\</title>
\</head>
\<body>
\<div id="page">
    \<!--top部分 -->
    \<div id="top">
    \<table width="100%">
    	\<tr>
    		\<td>
    			\<img alt="" src="./bookstore/images/logo.png">
    		\</td>
  			\<td align="right">
  				\<img alt="" src="./bookstore/images/cart.gif">
  			\<a>购物车\</a>|\<a>帮助中心\</a>|\<a>我的账户\</a>|\<a>新用户注册\</a>
  			\</td>
    	\</tr>
    \</table>
    \</div>
    
    \<!--menu部分 -->
    \<!-- \<dir id="menu"> 把div错写成dir,浪费了40分钟找错，切记！！！！！-->
    \<div>
    \<table width="100%" bgcolor="gray">
    	\<tr align="center">
    			\<td>\<a href="#">\<font color="white">文化\</font>\</a>\</td>
    			\<td>\<a href="#">\<font color="white">生活\</font>\</a>\</td>
    			\<td>\<a href="#">\<font color="white">计算机\</font>\</a>\</td>
    			\<td>\<a href="#">\<font color="white">外语\</font>\</a>\</td>
    			\<td>\<a href="#">\<font color="white">少儿\</font>\</a>\</td>
    			\<td>\<a href="#">\<font color="white">艺术\</font>\</a>\</td>
    			\<td>\<a href="#">\<font color="white">原版\</font>\</a>\</td>
    			\<td>\<a href="#">\<font color="white">科技\</font>\</a>\</td>
    			\<td>\<a href="#">\<font color="white">考试\</font>\</a>\</td>
    			\<td>\<a href="#">\<font color="yellow">全部商品目录\</font>\</a>\</td>
    		\</tr>
    	\</table>
    	
    \<!-- \</dir> -->
    \</div>
    \<!--search部分 -->
    \<div id="search">
    	\<table width="100%" bgcolor="#B4B486">
    		\<tr>
    			\<td align="right">search&nbsp;&nbsp;\<input type="text">\<input type="button" value="搜索">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\</td>
    		\</tr>
    	\</table>
    \</div>
    \<!--content部分 -->
    \<div>
    	\<table width="100%">
    		\<tr>
    			\<td align="right">首页&nbsp;&nbsp;>&nbsp;&nbsp;旅游&nbsp;&nbsp;>&nbsp;&nbsp;图书列表&nbsp;&nbsp;\</td>
    		\</tr>
    	\</table>
    	\<h1>商品目录\</h1>\<br>
    	\<hr>
    	\<h1>计算机类\</h1>\<br>
    	共xx种产品
    	\<hr>
    	\<img width="100%" src="./bookstore/images/productlist.gif">
    	\<table width="100%">
    		\<tr align="center">
    			\<td>
    				\<div>\<img src="./bookstore/bookcover/101.jpg">\</div>
    				\<span>书名:Java教程\</span>\<br>
    				\<span>价格:15.99\</span>
    			\</td>
    			\<td>
    				\<div>\<img src="./bookstore/bookcover/102.jpg">\</div>
    				\<span>书名:C教程\</span>\<br>
    				\<span>价格:15.99\</span>
    			\</td>
    			\<td>
    				\<div>\<img src="./bookstore/bookcover/103.jpg">\</div>
    				\<span>书名:HTML教程\</span>\<br>
    				\<span>价格:15.99\</span>
    			\</td>
    			\<td>
    				\<div>\<img src="./bookstore/bookcover/104.jpg">\</div>
    				\<span>书名:PHP教程\</span>\<br>
    				\<span>价格:15.99\</span>
    			\</td>
    		\</tr>
    		\<tr align="center">
    			\<td>
    				\<div>\<img src="./bookstore/bookcover/105.jpg">\</div>
    				\<span>书名:Java教程\</span>\<br>
    				\<span>价格:14.99\</span>
    			\</td>
    			\<td>
    				\<div>\<img src="./bookstore/bookcover/106.jpg">\</div>
    				\<span>书名:C教程\</span>\<br>
    				\<span>价格:19.99\</span>
    			\</td>
    			\<td>
    				\<div>\<img src="./bookstore/bookcover/107.jpg">\</div>
    				\<span>书名:HTML教程\</span>\<br>
    				\<span>价格:13.99\</span>
    			\</td>
    			\<td>
    				\<div>\<img src="./bookstore/bookcover/101.jpg">\</div>
    				\<span>书名:PHP教程\</span>\<br>
    				\<span>价格:11.99\</span>
    			\</td>
    		\</tr>
    	\</table>
    \</div>
    \<!--foot部分 -->
    \<div id="foot">
    	\<table width="100%">
    		\<tr>
    			\<td rowspan="2" width="50%" align="center">\<img alt="" src="./bookstore/images/logo.png">\</td>
    			\<td>CONTACT US\</td>
    		\</tr>
    		\<tr>
    			\<td>版权&copy;襄阳市品创科技有限责任公司&nbsp;盗版必究\</td>
    		\</tr>
    	\</table>
    \</div>
 \</div>
\</body>
\</html>

效果图：
在这里插入图片描述

总结

通过一天的学习,总结了HTML、CSS、JS的重点知识。HTML的表格标签table,表单form里的12种常用注册标签；CSS要掌握选择器，其中类选择器，ID选择器用的比较多，然后就是三种定位是重点；Js要掌握页面定时功能，以后项目会用到，另外dom操作是重中之重，尤其是getElementById,setAttribute,getAttribute的灵活使用。学习编程要多敲代码，有科学的学习计划和复习计划。（今天insertAfter 没用出来，两外对li的id属性）

Itheimapro

发布了24 篇原创文章 · 获赞 4 · 访问量 600

私信关注