提交数据的方式:get和post两种方式

get方式提交数据:在地址栏拼接数据,可以方便的查看数据,但是不安全,长度受限

post方式提交数据:安全,数据大小不受限,但是不方便查找数据

form标签拥有两个重要属性:

method用来指定数据提交的方式,默认是get

action属性用来指定数据提交给哪段java程序来处理

表单总结:
1,标签:form表单用来提交数据,table表格,h1标题,tr表里的行,td行里的列,input输入框
select用来定义下拉框,option定义下拉选项,img图片,button是按钮,textarea文本域
2,属性:method是用来指定form提交数据的方式,action是用来指定form提交数据到哪段程序
bgcolor设置表格的背景色,border设置表格的边框,width设置表格的宽度,
cellspacing设置单元格间距,type是设置输入框的类型,src用来指定图片的位置
name是用来作为数据提交时的标识,colspan用来设置列合并
3,问题: 单选框和多选框,默认提交的都是on
4,解决方案:给单选框和多选框提供value属性用来指定提交时要使用的值(不再提交on了)

 是一个块级元素。这意味着它的内容自动地开始一个新行。
 标签定义段落。
 标签被用来组合文档中的行内元素。

	
	
大家好
大家好
	
	
	
 Nice
 Nice
	
	
	 hello hello

placeholder 属性规定可描述输入字段预期值的简短的提示信息（比如：一个样本值或者预期格式的短描述）。

该提示会在用户输入值之前显示在输入字段中。

{}

是用来修饰HTML网页的一门技术，增强网页的展示能力

CSS 节省了大量工作。它可以同时控制多张网页的布局

语法:选择器{属性名:属性值;样式2;…}

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明,每条声明由一个属性和一个值组成。

使用位置:内联CSS,内部CSS,外部CSS

在HTML网页中,嵌入一段css代码,使用style标签

font-size 属性设置文本的大小。px, %, rem,em均表示一种单位

font-family属性设置字体

background-color属性设置背景色

border设置边框 dashed设置虚线

display属性的定义是可以将页面元素隐藏或者显示出来,也可以将元素强制改成块级元素或内联元素

px是固定像素，一旦设置了就无法因为适应页面而改变。

em和rem相对于px更具有灵活性，因为他们是相对的长度单位（即长度不是定死的，更适用于响应式布局）。

em和rem的区别一句话概括:em相对于父元素，rem相对于根元素(html)

rem中的r意思是root（根源）

class属性的值能相同

	
		
		
		
	
	
		
我是div1
		
我是div2
		
我是div3
		我是a1
		我是a2
		我是a3
	

id属性的值在整个HTML中作为唯一标识的存在。

可以通过ID值选中指定的元素（#id值）

opacity透明度(通常设置图像)

	
		
		
		
	
	
		
		
		我是span1
		我是span2
	

多种选择器间用逗号隔开

根据属性或属性值来选取元素

	
		
		
		
	
	
		
		
		
		
		
		我是a1
	

指的是将HTML中所有元素都看成一个盒子，盒子与盒子之间的距离，包括盒子的边框以及盒子边框和盒子内容的距离都可以设置,默认值是零。。

外边距margin ,是指盒子间的距离

内边距padding,这是一个盒子的现象,是指内容到边距的距离

边框border,是指每个盒子都能设置边框

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

	
		
		
	
	
		
		男 

		
		男 

		男 

		男 

		男 

		
		
		 

		
		 

		 

		 

		 

		 

	

link把外部CSS文件引入到这个网页中 rel是指文件的类型(stylesheet是固定值是样式表) href是指定文件的位置

  它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格,在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。
  它叫“半角空格”，全称是En Space，此空格有个相当稳健的特性，就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。
   它叫“全角空格”，全称是Em Space，此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。
  叫窄空格，全称是Thin Space
‌ 它叫零宽不连字，全称是Zero Width Non Joiner
‍它叫零宽连字，全称是Zero Width Join

	
		
		
		
		
	
	
		
			
用户注册
			

			
支持中文、字母、数字、“-”、“_”的组合，4-20个字符
			

			
建议使用数字、字母和符号两种以上的组合，6-20个字符
			

			
两次密码输入不一致
			
或 
			验证邮箱
            

				我已阅读并同意《京淘用户注册协议》
			
			
立即注册
		
	

.a{width: 350px;height: 30px;
    padding: 5px;
	font-size: 16px;}
button{width: 360px;height: 40px;
	  background-color: red;
	  border-color: red;
	  color: white;
	 font-size: 20px;}
span{font-size: 5px;
	color: gray;
	padding: 20px; }
h3{
  padding-left: 130px;}
#readme{padding: 15px;}

html超文本标记语言实现了网站页面展现，展现文字、表格、图片、超链接等，css样式表实现了页面的美化，这些技术实现了静态网页。

javascript的加入，实现页面和后台系统的交互，实现用户信息的注册，实现用户的登录，实现个性化的数据展现，把这样的网页称为动态网页，把这样的网站称为动态网站。

简称JS,用来增强网站的交互

JS是一门 基于对象 和 事件驱动 的 脚本语言

基于对象：它不仅可以创建对象,也能使用现有的对象。JS没有类的概念，也没有编译的过程。是一边解释一边执行。

事件驱动：在JS中，大部分情况下都是通过事件触发驱动函数执行的，从而实现特定的功能。事件就是你在网页中常见的动作(单击.双…)

脚本语言：是指在特殊的环境才能运行.js就是在浏览器中执行的

js是一门直译式的语言是一种弱类型的语言,底层会自动类型转换增强了用户的交互性,跨平台js代码出现的位置:行内js 内部js 外部js js语法

js数据类型:
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

包括:number/string/boolean/null/undefined

number:在JS中，数值类型只有一种，就是浮点型。会自动的进行数据类型的转换

undefined:值只有一个就是undefined。表示变量没有初始化值。

null:值也只有一个，就是null。表示空值或者不存在的对象。

函数、数组、对象（自定义对象、内置对象、DOM对象、BOM对象…）

单行注释： //注释内容

多行注释：

所有类型的变量都是用var关键字定义。并且参数的类型可以随时转换。

自增自减优先级要高

JS中的运算符和Java中的运算符大致相同

算术运算符: +，-，*，/，%(取模-余数)，++(自增)，–(自减)

赋值运算符: =，+=，-=，*=，/=，%=

比较运算符: ==(等于)，!=(不等于), =(绝对等于–值与类型均相等)，!(不绝对等于–值和类型有一个不相等或两个都不相等), > ，< ，>=，<=

位运算符: &(and) ， |(or),~(取反),^(异或),<<(左移),>>(右移)

逻辑运算符: &&(and)，||(or),!(not非)

前置逻辑运算符: ! (not)

三元运算符: ? :

JS中的语句和Java中的语句用法也大致相同

if…else语句 switch…case

循环语句 (for循环 while循环 do…while)

alert()

console.log();

F12在游览器查看控制台

var没有作用域,let严格规定了作用域

alert()方法:称为警示对话框，要显示的信息放置在括号内，该对话框上包含一个“确认”按钮，用户阅读完所显示的信息后，只需单击该按钮就可以关闭对话框。
confirm()方法:该种对话框上除了包含一个“确认”按钮外，还有一个“取消”按钮，这种对话框称为确认对话框
prompt()方法:不但可以显示信息，而且还提供了一个文本框要求用户使用键盘输入自己的信息，同时她还包含“确认”或“取消”两个按钮，如果用户“确认”按钮，则prompt()方法返回用户在文本框中输入的内容（是字符串类型)或者初始值(如果用户没有输入信息);如果用户单击“取消”按钮，则prompt()方法返回null，我们称这种对话框为提示框，在这三种对话框中，它的交互性最好。

在javascript中有三种声明变量的方式：var、let、const。
var:var定义的变量可以修改，如果不初始化会输出undefined，不会报错。
      var 声明全局变量，换句话理解就是，声明在for循环中的变量，跳出for循环同样可以使用。
      声明在for循环内部的sum，跳出for循环一样可以使用，不会报错正常弹出结果
let:同一个变量，不可在声明之前调用，必须先定义再使用，否则会报错，循环体中可以用let
    let是块级作用域，函数内部使用let定义后，对函数外部无影响。并且let不能定义同名变量，否则会报错。
const:用于声明常量，也具有块级作用域 ，也可声明块级。const定义的变量不可以修改，而且必须初始化。
      它和let一样，也不能重复定义同一个变量，const一旦定义，无法修改
let和const属于局部变量，不会出现变量提升的情况

它是一门客户端脚本语言,基于对象和事件驱动的网页编程语言

客户端(client):游览器

脚本语言:不需要编译,可以直接运行,只要设备安装了游览器,就可以直接运行js语言

基于对象:指的js已将内置好了对象,我们可以直接使用

Javascript面向对象特点:先创建对象,在使用对象调用属性或方法

事件驱动:

​ *事件:指的触发网页的事件

​ *事件源:指的网页中的元素

​ *事件和事件源绑定:

​ *驱动:调用js代码

也可以Google游览器右击检查打开控制台

js代码建议放到标签最下面,加载顺序从上往下执行

Javascript组成=ECMA+DOM+BOM

ECMAscript: 规范了javascript的基本语法
DOM:  document object model : 文档对象模型（由一系列文档对象构成的模型）
      作用：操作标记性的文档(指的xml或者html文档)
BOM:  browser object model: 浏览器对象模型（由一系列浏览器对象构成的模型）
      作用：操作浏览器的。

java面向对象的编程语言,是一门强类型的编程语言
   面向对象
   强类型
js
   面向对象
   弱类型,建议使用var(variable)来表示类型
Javascript语法书写和java相似,区分大小写,建议每行结束用分号结束

注意： 书写js代码时，一定一定加上

Javascript类型

1.原始类型

number类型： 数字类型string类型： 字符串或者字符null类型：比如： 定义一个变量，赋值为null , var a =null;undefined类型：未定义类型，比如： 定义一个变量，没有赋值 ，var a;boolean类型：表示true或者false…

2.引用类型

Object,Array,Date,Function
…

标签是单标签（空标签），没有元素内容，只是显示为一条水平线，表示话题的转移；

Javascript 使用关键字 function 定义函数。

document对象(document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。)

document.write(totalPages);

typeof判断变量是什么类型

注释：单行// 多行
输入输出语句：prompt()、alert()、console.log()、document.write()
变量和常量：var或let、const
基本数据类型：boolean、null、undefined、number、string
typeof 关键字：用于判断变量的数据类型
运算符：算数、赋值、逻辑、比较、三元运算符
流程控制和循环语句：if、switch、for、while
数组：数据类型和长度没有限制，let 数组名 = [长度/元素]
函数：类似方法，抽取代码，提高复用性

变量

全局变量:在方法外部定义,可以在任意地方使用,比如:var a=10;

局部变量:在方法内部定义,只能在方法内使用

定义局部变量，可使用关键词： let

常量值（不能改变的值），关键词：const

//注意：常量值定义在方法内部或者方法外部都可以。

算数运算符

赋值运算符

比较运算符

== : 只比较值，不比较类型
=== :先比较类型，然后在比较值

逻辑运算符:&&逻辑与,并且 ||逻辑或,或者 !取反

   注意： 空串取反操作：true
         null取反操作：true 
         0取反操作：true 
         Nan取反操作：true

三元运算符

if 语句 switch 语句 for 循环 while 循环

分支结构
if
if else
if else if---else if---else
循环结构
for(初始语句;条件语句;条件控制语句){
循环体
}
while(条件语句){循环体}
do{
循环体
}while(条件控制语句)

函数(方法)概述:指的是将具有独立功能的代码封装在一起,这些代码就构成函数了

方式一： 动态函数(很少用)
var fun1 = new Function(参数，方法体);
方式二：普通函数
function 方法名称（方法的参数）{
方法体内容
}
方式三：匿名函数
var 方法名称 = function (方法的参数）{
 方法体内容
}

遵循原则：
先创建函数
再调用函数
注意细节： 在定义参数时，参数前面不加var ,let

获取参数的个数： length

java里:数组是用来存储相同数据类型的"容器"

js里(弱类型):数组是用来存储多个数据的"容器"

静态数组初始化:指的在创建数组,就要给数组赋值
   var arr = [1,“a”,“b”,true];或者
   var arr= new Array(1,“a”,“b”,true);
动态数组初始化:指的创建一个指定长度的数组,然后再赋值
   var arr=new Array(指定长度);
创建一个空的数组
   var arr=[ ]; 或者 var arr= new Array();

数组的元素类型： 可以是任意类型

数组的长度可以变化的

( 数组的长度 = 数组的最大索引值+1)

length属性： 获取数组的长度

var str = 数组对象.join(连接符号);//字符串
var endEle = 数组对象.pop();// 删除最后一个元素并返回
var lenght = 数组对象.push(ele);//向数组末尾添加一个元素ele,返回新的 长度
var arrNew = 数组对象.reverse();//颠倒数组元素的顺序，返回一个新的数组

概述: document Object Model 文档对象模型

作用：操作标记性文档（目前学过的xml，html文档）

document文档对象表示整个HTML文档

element标签对象表示网页的标签

attr 属性对象 text 文本对象

核心Dom, xml的Dom, html的Dom 大部分api都是通用的。

Dom操作标签

获取标签对象：

getElementByld(id属性)根据id获取标签对象： 获取的是一个标签对象
getElementsByTagName(标签名称)根据标签名称获取标签对象： 获取的是多个标签对象
getElementsName(name属性值)根据name属性获取标签对象：获取的是多个标签对象
getElementsName(class属性值)根据class属性获取标签对象： 获取的是多个标签对象
子元素对象.parentElement属性:获取当前父元素

操作标签对象

createElement(标签名):创建一个新元素

appendChild(子元素):将指定子元素添加到父元素中

removeChild(子元素):用父元素删除指定子元素

replaceChild(新元素,旧元素):用新元素替换子标签

Dom操作属性（设置属性，获取属性，移除属性）

setAtrribute(属性名,属性值):设置属性

getAtrribute(属性名):根据属性名获取属性值

removeAtrribute(属性名):根据属性名移除指定的属性

style属性:为元素添加样式

Dom操作文本(文本:指的标签体内容)

获取文本内容
  var text_content = 标签对象.innerText; //标签对象.innerHTML;
设置文本内容（把原有的文本内容给覆盖）
  标签对象.innerText=“新的文本内容”；
  标签对象.innerHTML=“新的文本内容”；
注意：
  innerText属性：解析纯文本，即使是标签，也看成纯文本
  innerHTML属性：可以解析纯文本，也可以解析标签
注意：以上操作必须是对围堵标签进行，只有围堵标签才有标签体。

1.通过document获取标签对象
 根据id获取:var singleTag=getElementById("id的值");
 根据标签名称获取:var tags=getElementByTagName("标签名称");
 根据标签的name属性获取:var tag=getElementsByName("name属性的值");
 2.通过标签对象操作属性
 给属性赋值:
 方式一:标签对象.属性名称=赋值;//可以,但是在有的游览器不兼容
 方式二:标签对象.setAttribute("属性名称","赋值");
 获取属性的值
 方式一:var value=标签对象.属性名称;//可以,但是在有的游览器不兼容
 方式二:var value=标签对象.getAttribute("属性名称");
 3.操作文本
 文本:指的标签体的内容,只有围堵标签才有标签体,比如a标签,div标签...
 设置文本:
 标签对象.innerHTML=“新的文本内容”；
 获取文本
 var value = 标签对象.innerHTML;

事件: 指的操作网页,触发的动作,比如:鼠标单击,鼠标双击,按键盘等

事件源: 指的网页的元素,比如:标签,文本等

监听 (事件js代码和事件源绑定):在网页里面的监听，指的通过触发网页的元素，调用事件对应的js代码，实现网页的动态效果

直接绑定:就是在标签里面写我们的事件

间接绑定:就是通过我们的标签调用事件属性

点击事件
    onclick： 单击事件
    ondbclick: 双击事件
鼠标状态事件
    onmousedown： 鼠标按下事件
    onmouseup：鼠标松开事件
    onmousemove：鼠标移动事件（每次移动每次触发执行）
    onmouseover： 鼠标悬浮事件（触发执行一次）
焦点事件
    onfocus：获取焦点
    onblur: 失去焦点
键盘事件
    onkeydown：键盘按下事件
    onkeyup:键盘松开事件
表单事件
    onsubmit: 表单提交事件（只有提交按钮，才会触发事件）
内容改变事件
    onchange: 在内容改变时，触发该事件
页面加载事件
    onload: 等html网页完全加载完毕后，才执行事件里面的js代码

在页面中显示图片两种引入方式

绝对路径,带http(https:安全)
相对路径:同一级目录
        下一级目录
        上一级目录(../表示访问此文件所在文件夹的上一级; ./访问此文件所在文件夹; ../../访问此文件所在文件夹上一级的上一级

BOM : browser object module,浏览器对象模型(一系列对象,构成模型),操作浏览器的.

作用：操作浏览器的

window
表示窗口对象,同时也是bom的顶层对象(可以通过window对象获取其它四个bom对象)
navigator
表示浏览器对象, 获取浏览器的相关参数信息(比如:使用的是那个浏览器,版本号是多少)
screen
表示网页的屏幕带下,操作网页的大小(分辨率,比如1366*768)
location
表示地址栏对象,操作地址栏的地址(获取地址栏的地址或者改变地址栏的地址)
history
表示用户访问过的历史记录,操作用户访问过的历史记录

window对象

弹出框方法:警告框: alert(内容);// window.alert(内容);
确认框: var flag = confirm(内容);//window.confirm(内容);
输入框: var user_value= prompt(提示信息);//window.prompt(提示信息);

​ 操作窗口方法:打开窗口open() 关闭窗口close()

​ 定时器方法:

一次性定时器:
设置定时器: var id = setTimeout(js代码,毫秒值), 清除定时器: clearTimeout(定时器标识);
比如: 定时炸弹,设置时间定时爆炸, 清除炸弹: 清除的标识
循环定时器:
设置定时器: var id= setInterval(js代码,毫秒值), 清除定时器: clearInterval(定时器标识);

location对象

获取地址栏的地址
var path = location.href;// 获取值
改变地址栏的地址(资源会跳转)
location.href=“跳转的资源地址”;//设置值

…

***2022.01.05 第二阶段 day 07*** HTML超文本标记语言

结构 常用标签

标题标签h1~h6(大~小,字体加粗且自动换行)列表标签图片标签超链接标签锚定:从一个位置回到指定的另一位置Input标签表格标签表单标签***2022.01.06 第二阶段 day 08***表单标签其他标签加入音频和视频 css 全称叫层叠样式表Cascading style sheet

选择器

标签名选择器class选择器id选择器分组选择器属性选择器盒子模型

***2022.01.07 第二阶段 day 09*** css

外部css Javascript

特点js语法

基本数据类型复杂数据类型注释js变量js的运算符JS语句***2022.01.10 第二阶段 day 10*** Javascript概述Javascript和Java的区别Javascript基本语法

基本语法小结 常量和变量运算符流程控制语句函数

函数的创建函数的调用函数的属性 数组

概述定义特点数组的属性：常用方法***2022.01.11 第二阶段 day 11*** DOM

DOM分类DOM的api事件事件和事件源绑定常见的事件 BOM

BOM的五个对象常用api