Java22：HTMLCSSJS

一：HTML

1.html入门

1.html文件的根标签<html></html>所有的其他标签都要在这个标签中间

2.html根标签下有两个一级子标签
   <head></head> 头标签定义那些不直接展示在页面主题上但是又很重要的内容
   1.字符集<meta charset="utf-8"/> 告诉浏览器用什么字符集对文件解码
                   2.css引入
                   3.js引入
                   4.其他...
                     <body> </body> 体标签
   1.定义要展示到页面主体的标签---

3.专业词汇
   标签 tag 页面的一对<>
           属性 attribute 对标签特征进行设置的一种方式属性一般在开始标签中定义
           文本 text 双标签中间的文字
           元素 element 开始标签+属性

4.html 更多的语法细节
   1）根标签有且只能有一个
   2）无论是双标签还是单标签都需要正确关闭
   3）标签可以嵌套但不能交叉嵌套
   4）注释语法为《!-- --》,注意不能嵌套
   5）属性必须有值，值必须加引号，H5中属性名和值相同时可以省略属性值
   6）HTMl中不严格区分大小写，但是不能大小写混用
   7）HTML 标签不严格区分大小写，但是不能大小写混用
   8）HTML 中不允许自定义标签名，强行自定义则无效

5.html 开发工具

   1） vscode 开发工具
   2）安装 live server控件，编写好html后，点击右下角golive 然后右键选择open with live server 运行文档
2.常见标签

1.标题，段落,换行标签
<h1>-<h6> 表示6个标题标签，为双标签
<p></p> 为段落标题，为双标签
<br/>换行标签，单标签
2.列表和列表项标签（类似目录）
<ol></ol> 有序标签，为双标签 order list 简称
<li></li> 标签项，为双标签 list item 简称
<ul></ul> 无序标签，为双标签

2.超链接
<a></a> 双标签
属性：href 用于定义要跳转的目标资源的地址
1完整的ur http://www.qq.com
   2相对路径
   以当前资源所在路径为出发点去找目标资源
               ./表示当前资源的所在路径，可以省略不写
               ../表示当前资源的上一层路径，需要时必须要显示的写出

       3绝对路径
       无论当前资源在哪里，使用固定的位置作为出发点去找目标资源
           以/开头

   属性：target 用于定义目标资源的打开方式

   _self 在当前窗口打开目标资源

       _blank 开启新窗口打开目标资源
3 多媒体标签
<img> 单标签
属性 src ：定义图片的路径

   属性 title：定义鼠标悬停时提示的文字

   属性 alt ：定义图片加载失败时提示文字
4.表格标签
<table></table> 双标签
table 整张表格
   thead 表头
       tbody 表体
       tfoot 表尾
       tr 表格中的一行
       td 行中的一个单元格
       th 自带加粗居中的td

5.表单标签
<form></form> 双标签

属性 action : 表单提交的地址
属性 method ：表单提交的方法
get
       ：参数会以键值对的方式放到url后面 url？key=value&key=value&key=value
       数据会暴漏在地址栏，相对不安全
           地址长度有限，所以提交数据量不大
           地址栏上只能是字符，不能提交文件
           相比于post效率高一些

       post
       参数默认不放在url后面
       数据不直接暴漏在地址栏上，相对安全
       数据是单独打包通过请求体发送，提交的数据量比较大
       请求体中可以是字符也可以是字节数据，可以提交文件
       相比于get效率略低些

6.表单项目标签

input 单标签

属性 type ：输入信息的表单类型

text 单行普通文本
   如果设置为只读可以使用 readonly属性 readonly="readonly" 省略写为readonly
   readonly 只读，提交会携带
   disable 不可用，提交不携带

password 密码框
submit 提交按钮
reset 重置按钮
radio 单选框
   多个单选框使用相同的name 属性可以实现互斥效果
   使用属性 checked="checked"实现默认勾选效果，如果属性和属性值一样，可以省略属性值，直接写 checked
   checkbox 多选框
   hidden 隐藏域
textArea ：多行文本框，双标签

select ：下拉框，双标签，name 需定义该标签内

属性 :option 定义选项，双标签
如果实现默认选择使用 selected 属性，值一样，可以省略

7.页面布局

块元素：自己独占一行的元素，块元素的CSS样式的宽高等等都是生效的
div
行业元素：
不会独自占一行的元素，行内的CSS样式的宽高等等都是不生效的
span

CSS 设置样式：
通过元素的style属性进行设置
style="样式名：样式值;样式名：样式值;样式名：样式值;样式名：样式值;.......

二：CSS

1. css样式引入方式

方式1：行内式
   通过元素的style 属性引入样式
   语法：style="样式名：样式值；样式名：样式值；样式名：样式值；..."
   缺点：
   1代码复用率低，不利于维护
   2 css样式代码和html结构交织在一起，影响阅读，影响文件大小，影响性能
   方式2:内嵌式
   通过在head标签中的sytle 标签定义文本页面的公共样式
   通过选择器确定样式的作用元素
   方式3 外部样式
   将css代码单独放入一个.css文件中，哪个html需要这些代码就在head中通过link标签引入
   <link href="css/ban.css rel="stylesheet">

2.css 选择器

1.元素选择器：根据标签的名字确定样式的作用元素
   语法：标签名{}
   缺点：某些同名的元素不希望使用某些样式，某些不同名的元素也使用该样式，都无法协调

   2.id选择器：根据标签的id值确定样式的作用元素
   一般每个元素都有id属性，但是一个页面中id的值不应该相同，id具有唯一性
       语法：#id值{}
       缺点：id值有唯一性，样式只能作用到一个元素上

   3. class 选择器根据元素的class 属性确定样式的作用元素
   元素的class 属性值可以重复，而且一个元素的class属性可以有多个值
       语法 .class属性值{}

3.css 浮动

css的浮动使元素脱离文档流，按照指定的方向（左或者右发生移动），直到
它的外边缘碰到包含框或者另外一个浮动框的边框为止

属性float
值 left right

4.css 定位

position 属性指定了元素的定位类型
   static 默认
   absolute 绝对
   relative 相对相对元素原本的位置
   fixed 相对相对浏览器窗口

   left
   right
   top
   bottom

5.css盒子模型

margin ：外边距
padding：内边距

分别调整4个方向的外边距（内边距相同）：可以按f12 选择div 查看右侧的样式的盒子模型
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;

三：Javascript

1.简介：

1.javascript是一种解释型脚本语言
   2.基于对象
   3.弱类型
   4.事件驱动
   5.跨平台
   6.运行在浏览器中

2.引入方式

1.内嵌式在head 中通过一个对 script 标签定义脚本代码
2.引入外部脚本文件在head中通过一对script标签引入外部js文件

注意：
1. 一个html中可以有多个script标签
   2.一对script标签不能在引入外部js文件的同时定义内部脚本
   3.script 标签如果用于引入外部js文件，中间最好不要有任何字符，包括空格和换行

3.数据类型

JS 是弱类型的，不是没有类型，是变量在声明时不指定类型，赋值时才能确定类型，JS中的声明变量统统使用var

1)JS中的常见的数据类型
数值类型 number 整数，小数
字符输类型 string
布尔类型 boolean
引用类型 Object
function类型 funciton

2)js中使用var声明变量的特点
1.弱类型变量，可以统一声明为var
2.var声明的变量可以再次声明
3.变量可以使用不同的数据类型多次赋值
4.js的语句可以以;结尾，也可以不用；结尾
5.变量标识符严格区分大小写
6.标识符的命名规则参照java
7如果使用了一个没有声明的变量，那么运行时会报告uncaught ReferecneError：** is notdefined
8.如果一个变量只声明，没赋值，那么值时undefined
9 使用console.log(变量) 在控台输出变量
10 使用 typeof 变量，查看变量类型

4.常见运算符

1.算数 + - * /
除零 Infinity
模零 NaN not a number
2.复合算数 ++ -- += -= /= *= %=
3.关系 > < >= <= != == ===

== 如果两端的数据类型不一致，会尝试将两端的数据都转为number 再对比
=== 如果两端的数据类型不一致，直接返回 false，相同则会继续对比
4.逻辑 || &&
5. 条件条件表达式？值1：值2

6.位 | & ^ << >> >>>

5.流程控制

1 分支结构

if .. else

switch case

注：这里的if结构几乎和java中一样，需要注意的是：
if（）中的非空字符串会被认为是true
if（）中的非零数字会被认为是true

var month= prompt("请输入月份！");//prompt返回的结果就是用户在窗口上输入的值，以string返回
document.write()//在前端界面输出内容
console.log()//在控制台输出内容，通过F12查看

2.循环结构 :和 java 基本一致

while(){}
注：foreach 语法和java 有的不一样，使用关键字 in 且遍历的为索引

6.函数：

函数的声明语法：
1.function 函数名(){}
2. var 函数名 =function(){}

和 java 相比有如下特点
1. 没有访问修饰符
2. 没有返回值类型，也没有void ，如果有返回值，则直接ruturn 即可
3. 没有异常列表
4. 调用方法时，实参和形参可以在数量上不一致，在方法内部可以通过arguments获取调用时的实参
5. 函数也可以作为参数传递给另一个函数

7.对象

创建的对象的两种方式：
1. new Object()
2.{属性名：属性值.... ,函数名：function(){}}

8.JSON

   JSON 格式的语法：
   var personStr='{"属性名"："属性值","属性名"："属性值","属性名"："属性值","属性名"：[],"属性名"：[{},{},{}]}'
   属性名必须用""包裹上
   属性值字符串必须用""包好，数字可以不处理
   前端：
   JSON.parse(json):把json字符串转为对象
   JSON.stringify(对象)把对象转换为json串
   后台：
   使用第三方jar包 jackson 实现json和对象的互相转换
   //对象转换为json，其中obj可以为对象,map,list arry

   ObjectMapper obm =new ObjectMapper();
String pesonstr = obm.writeValueAsString(obj);
   //json 转换为对象
   String pesonstr="{\"name\":\"kate\",\"age\":20,\"dog\":{\"dname\":\"hasq\",\"breed\":\"哈士奇\"}}";
Person person = obm.readValue(pesonstr, Person.class);

9.常用对象

1.arry数组对象
1）创建数组的三种方式：
var arr =new Array(5)
var arr1 =new Array()
var arr2=['liudahua','zhangxueyou','guofucheng','liming','guofengc']
2）常见对象方法
// 把两个数组合成一个数组
arr.concat(arr1）
//删除最后一个元素
arr2.pop()
//获取指定元素的索引
arr2.indexOf('guofucheng')
//截取指定字符串，左闭右开
arr2.slice(1,3)
//以指定格式把数组拼接为一个字符串
arr2.join("：")

10 常见事件

1.事件的绑定方式：
1）通过元素的属性绑定 on**
2）通过DOM编程动态绑定
注意事项：
1 一个事件可以同时绑定多个函数
2.一个元素同时可以绑定多个事件

2 常见的事件
1 鼠标事件 onclick ondbclick onmousevoer onmousemove onmouseleave
2 键盘事件 onkeydown onkeyup
3.表单事件 onfocus onblur onchanage onsubmit onreset
4.页面加载事件 onload 页面加载完毕事件

弹窗的三种方式：
alert()信息提示框
prompt()信息输入框
confirm（）信息确认框

11.BOM编程

BOM 是browser Object Model 的简称，即浏览器对象模型
BOM编程的对象结构如下：
window 顶级对象，代表整个浏览器窗口
location 对象 window 对象的属性之一，代表浏览器的地址栏
   history 对象 window 对象的属性之一，代表浏览器的访问历史
   screen 对象 window 对象的属性之一，代表屏幕
   navigator 对象 window 对象的属性之一，代表浏览器软件本身
   document 对象 window 对象的属性之一，代表浏览器窗口目前解析的html文档
   console 对象 window 对象的属性之一，代表浏览器开发者工具的控制台
   localStorage 对象 window 对象的属性之一，代表浏览器本地数据持久化存储
   sessionStorage 对象 window 对象的属性之一，代表浏览器本地数据会话存储

   BOM 常见api
   1.三种弹窗方式：
   alert() 弹框，无返回值
   prompt() 输入框，有返回值
   confirm() 确认框，有返回值
   2.window.setTimeout(函数，时间) ：定时任务，经过多少时间执行第一个函数参数

   BOM 常见属性
   history 窗口的访问历史
   history.back()前一页
   history.forword()后一页
   location 访问地址
   sessionStorage 用于存储会话级数据，浏览器关闭数据清除
   localStorage 用于存储持久级数据，浏览器关闭数据还在
   console 控制台

12DOM编程

   1.dom 是document object Model，使用document 对象的api完成对网页HTML文档动态修改

   1.元素节点：element 标签
   2.属性节点：attribute 属性
   3.文本节点 text 双标签中间的文字

   2.获取页面元素的几种方式
   根据id值查询 document.getElementById("id值")
   根据标签名查询 document.getElementByTagName("标签名")
   根据name属性值查询 document.getElementByName("name值")
   根据类名查询 document.getElementByClassName("类名")
   3.查找子节点
   查找子标签 element.children
   查找第一个子标签 element.firstElementChild
   查找最后一个子标签 element.lastElementChild
   4.对元素进行操作
   操作元素属性元素名.属性名=""
   操作元素的样式元素名.style.样式名="" 样式名“-”要进行驼峰转换
   操作元素的文本元素名.innerText 只识别文本
   元素名.innerHTML 同时可以识别html代码

   5.增删元素
   document.createElement("标签名") 创建元素并返回
   document.Nodel("文本值") 创建文本节点并返回
   element.append(ele) 将 ele 添加到element 所有子节点后面
   parentEle.insertBefore(newEle,targetEle) 将 newEle 插入到targetEle 前面
   parent.replaceChild(newEle,targetEle) 用新节点替换原有的旧节点
   element.remove() 删除某个元素

   6.正则表达式
   正则表达式描述字符模式的对象，正则表达式用于对字符串匹配及检索替换
   是对字符串执行模式匹配的强度工具
   语法：
   var patt=/pattern/modifiers;
   修饰符
   i 执行对大小写不敏感的匹配。
   g 执行全局匹配（查找所有匹配）
   m 执行多行匹配

   方括号[abc] 查找方括号之间的任何字符，只匹配一个
   [^abc] 非方括号的内容
   ^ 正则的开头。$正则的结尾 \w 字母数字下划线 \d 数字
   {1，5}表示内容出现的次数，放在内容的后面，+表示出现1次或多次，*表示出现0次或多次
   例：var reg=/^[a-zA-Z]\w+$/

四：实例应用：页面的登录和注册

前端校验输入用户名和密码是否符合规则，不符合提示

用户名规则：字母和数字5到10位

密码：6位数字

1.登录源码：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

span{

font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

color: red;

}

</style>

//校验用户名

function checkusername(){

var reg=/^[a-zA-Z0-9]{6,10}$/

var usernameobj= document.getElementById("user1")

var uservalue=usernameobj.value

var usercheck=reg.test(uservalue)

var sp1= document.getElementById("sp1")

if(!usercheck){

sp1.innerText="用户名格式不正确"

return false

}

sp1.innerText="OK"

return true

}

//校验密码

function checkpassword(){

var reg=/^\d{6}$/

var pwdobj= document.getElementById("pw1")

var pwdvalue=pwdobj.value

var pwdcheck=reg.test(pwdvalue)

var sp2= document.getElementById("sp2")

if(!pwdcheck){

sp2.innerText="密码格式不正确"

return false

}

sp2.innerText="OK"

return true

}

function checksubmit(){

var flag1=checkpassword()

var flag2=checkpassword()

return flag1&&flag2

}

</script>

</head>

<body>

<h1 >登录管理系统</h1>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

</td>

</tr>

</form>

</table>

</body>

</html>

2.注册源码：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

span{

font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

color: red;

}

</style>

//校验用户名

function checkusername(){

var reg=/^[a-zA-Z0-9]{6,10}$/

var usernameobj= document.getElementById("user1")

var uservalue=usernameobj.value

var usercheck=reg.test(uservalue)

var sp1= document.getElementById("sp1")

if(!usercheck){

sp1.innerText="用户名不正确"

return false

}

sp1.innerText="OK"

return true

}

//校验密码

function checkpassword(){

var reg=/^\d{6}$/

var pwdobj= document.getElementById("pw1")

var pwdvalue=pwdobj.value

var pwdcheck=reg.test(pwdvalue)

var sp2= document.getElementById("sp2")

if(!pwdcheck){

sp2.innerText="密码不正确"

return false

}

sp2.innerText="OK"

return true

}

//校验确认密码

function checkconformpassword(){

var reg=/^\d{6}$/

var pwdobj2= document.getElementById("pw2")

var pwdvalue2=pwdobj2.value

var pwdcheck2=reg.test(pwdvalue2)

var sp3= document.getElementById("sp3")

if(!pwdcheck2){

sp3.innerText="密码格式不正确"

return false

}

//获取密码输入，并和确认密码比较是否相等

var pwdobj= document.getElementById("pw1")

var pwdvalue=pwdobj.value

if(pwdvalue2!=pwdvalue){

sp3.innerText="密码和确认密码不相等"

return false

}

sp3.innerText="OK"

return true

}

//表单提交校验

function checkregister(){

var flag1=checkpassword()

var flag2=checkpassword()

var flag3=checkconformpassword()

return flag1&&flag2&&flag3

}

</script>

</head>

<body>

<h1 >登录管理系统</h1>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

</td>

</tr>

</form>

</table>

</body>

</html>