一HTML1.html入门1.html文件的根标签html/html所有的其他标签都要在这个标签中间2.html根标签下有两个一级子标签head/head 头标签 定义那些不直接展示在页面主题上但是又很重要的内容1.字符集meta charsetutf-8/ 告诉浏览器用什么字符集对文件解码2.css引入3.js引入4.其他...body /body 体标签1.定义要展示到页面主体的标签---3.专业词汇标签 tag 页面的一对属性 attribute 对标签特征进行设置的一种方式 属性一般在开始标签中定义文本 text 双标签中间的文字元素 element 开始标签属性4.html 更多的语法细节1根标签有且只能有一个2无论是双标签还是单标签都需要正确关闭3标签可以嵌套但不能交叉嵌套4注释语法为《!-- --》,注意不能嵌套5 属性必须有值值必须加引号H5中属性名和值相同时可以省略属性值6HTMl中 不严格区分大小写但是不能大小写混用7HTML 标签不严格区分大小写但是不能大小写混用8HTML 中不允许自定义标签名强行自定义则无效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.com2相对路径以当前资源所在路径为出发点去找目标资源./表示当前资源的所在路径可以省略不写../表示当前资源的上一层路径需要时必须要显示的写出3绝对路径无论当前资源在哪里使用固定的位置作为出发点去找目标资源以/开头属性target 用于定义目标资源的打开方式_self 在当前窗口打开目标资源_blank 开启新窗口打开目标资源3 多媒体标签img 单标签属性 src 定义图片的路径属性 title定义鼠标悬停时提示的文字属性 alt 定义图片加载失败时提示文字4.表格标签table/table 双标签table 整张表格thead 表头tbody 表体tfoot 表尾tr 表格中的一行td 行中的一个单元格th 自带加粗居中的td5.表单标签form/form 双标签属性 action : 表单提交的地址属性 method 表单提交的方法get参数会以键值对的方式放到url后面 urlkeyvaluekeyvaluekeyvalue数据会暴漏在地址栏相对不安全地址长度有限所以提交数据量不大地址栏上 只能是字符不能提交文件相比于post效率高一些post参数默认不放在url后面数据不直接暴漏在地址栏上相对安全数据是单独打包通过请求体发送提交的数据量比较大请求体中可以是字符也可以是字节数据可以提交文件相比于get效率略低些6.表单项目标签input 单标签属性 type 输入信息的表单类型text 单行普通文本如果设置为只读 可以使用 readonly属性 readonlyreadonly 省略写为readonlyreadonly 只读提交会携带disable 不可用提交不携带password 密码框submit 提交按钮reset 重置按钮radio 单选框多个单选框使用相同的name 属性可以实现互斥效果使用属性 checkedchecked实现默认勾选效果如果属性和属性值一样可以省略属性值直接写 checkedcheckbox 多选框hidden 隐藏域textArea 多行文本框双标签select 下拉框双标签name 需定义该标签内属性 :option 定义选项双标签如果实现默认选择使用 selected 属性值一样可以省略7.页面布局块元素自己独占一行的元素块元素的CSS样式的宽 高 等等都是生效的div行业元素不会独自占一行的元素 行内的CSS样式的宽 高 等等都是不生效的spanCSS 设置样式通过元素的style属性进行设置style样式名样式值;样式名样式值;样式名样式值;样式名样式值;.......二CSS1. css样式引入方式方式1行内式通过元素的style 属性引入样式语法style样式名样式值样式名样式值样式名样式值...缺点1代码复用率低不利于维护2 css样式代码和html结构交织在一起影响阅读影响文件大小影响性能方式2:内嵌式通过在head标签中的sytle 标签定义文本页面的公共样式通过选择器确定样式的作用元素方式3 外部样式将css代码单独放入一个.css文件中哪个html需要这些代码就在head中通过link标签引入link hrefcss/ban.css relstylesheet2.css 选择器1.元素选择器 根据标签的名字确定样式的作用元素语法标签名{}缺点某些同名的元素不希望使用某些样式某些不同名的元素也使用该样式都无法协调2.id选择器 根据标签的id值 确定样式的作用元素一般每个元素都有id属性但是一个页面中id的值不应该相同id具有唯一性语法#id值{}缺点id值有唯一性样式只能作用到一个元素上3. class 选择器 根据元素的class 属性确定 样式的作用元素元素的class 属性值可以重复而且一个元素的class属性可以有多个值语法 .class属性值{}3.css 浮动css的浮动 使元素脱离文档流按照指定的方向左或者右发生移动直到它的外边缘碰到包含框或者另外一个浮动框的边框为止属性float值 left right4.css 定位position 属性指定了元素的定位类型static 默认absolute 绝对relative 相对 相对元素原本的位置fixed 相对 相对浏览器窗口leftrighttopbottom5.css盒子模型margin 外边距padding内边距分别调整4个方向的外边距内边距相同可以按f12 选择div 查看右侧的样式的盒子模型margin-top: 10px;margin-right: 10px;margin-left: 10px;margin-bottom: 10px;三Javascript1.简介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中的声明变量统统使用var1)JS中的常见的数据类型数值类型 number 整数小数字符输类型 string布尔类型 boolean引用类型 Objectfunction类型 funciton2)js中使用var声明变量的特点1.弱类型变量可以统一声明为var2.var声明的变量可以再次声明3.变量可以使用不同的数据类型多次赋值4.js的语句可以以;结尾也可以不用结尾5.变量标识符严格区分大小写6.标识符的命名规则参照java7如果使用了一个没有声明的变量那么运行时会报告uncaught ReferecneError** is notdefined8.如果一个变量只声明没赋值那么值时undefined9 使用console.log(变量) 在控台输出变量10 使用 typeof 变量 查看变量类型4.常见运算符1.算数 - * /除 零 Infinity模 零 NaN not a number2.复合算数 -- - / * %3.关系 ! 如果两端的数据类型不一致会尝试将两端的数据都转为number 再对比 如果两端的数据类型不一致直接返回 false相同则会继续对比4.逻辑 || 5. 条件 条件表达式 值1值26.位 | ^ 5.流程控制1 分支结构if .. elseswitch case注 这里的if结构几乎和java中一样需要注意的是if中的非空字符串会被认为是trueif中的非零数字会被认为是truevar 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.JSONJSON 格式的语法var personStr{属性名属性值,属性名属性值,属性名属性值,属性名[],属性名[{},{},{}]}属性名必须用包裹上属性值 字符串必须用包好数字可以不处理前端JSON.parse(json):把json字符串转为对象JSON.stringify(对象)把对象转换为json串后台使用第三方jar包 jackson 实现json和对象的互相转换//对象转换为json其中obj可以为 对象,map,list arryObjectMapper 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 onmouseleave2 键盘事件 onkeydown onkeyup3.表单事件 onfocus onblur onchanage onsubmit onreset4.页面加载事件 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 常见api1.三种弹窗方式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.lastElementChild4.对元素进行操作操作元素属性 元素名.属性名操作元素的样式 元素名.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 数字{15}表示内容出现的次数放在内容的后面表示出现1次或多次*表示出现0次或多次例var reg/^[a-zA-Z]\w$/四实例应用页面的登录和注册前端校验输入用户名和密码是否符合规则不符合 提示用户名规则字母和数字5到10位密码6位数字1.登录源码!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylespan{font-family: Gill Sans, Gill Sans MT, Calibri, Trebuchet MS, sans-serif;color: red;}/stylescript//校验用户名function checkusername(){var reg/^[a-zA-Z0-9]{6,10}$/var usernameobj document.getElementById(user1)var uservalueusernameobj.valuevar usercheckreg.test(uservalue)var sp1 document.getElementById(sp1)if(!usercheck){sp1.innerText用户名格式不正确return false}sp1.innerTextOKreturn true}//校验密码function checkpassword(){var reg/^\d{6}$/var pwdobj document.getElementById(pw1)var pwdvaluepwdobj.valuevar pwdcheckreg.test(pwdvalue)var sp2 document.getElementById(sp2)if(!pwdcheck){sp2.innerText密码格式不正确return false}sp2.innerTextOKreturn true}function checksubmit(){var flag1checkpassword()var flag2checkpassword()return flag1flag2}/script/headbodyh1 登录管理系统/h1form action/qianduan/html/01firstpage.html methodget onsubmitreturn checksubmit()table cellspacing0px trtd用户名/tdtdinput typetext nameusername iduser1 onblurcheckusername()span idsp1/spanbr/td/trtrtd密 码/tdtdinput typetextnamepasswod idpw1 onblurcheckpassword()span idsp2/spanbr/td/trtrtd colspan2input typesubmit value登录input typereset value重置button a href16register.html注册/a /button/td/tr/form/table/body/html2.注册源码!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylespan{font-family: Gill Sans, Gill Sans MT, Calibri, Trebuchet MS, sans-serif;color: red;}/stylescript//校验用户名function checkusername(){var reg/^[a-zA-Z0-9]{6,10}$/var usernameobj document.getElementById(user1)var uservalueusernameobj.valuevar usercheckreg.test(uservalue)var sp1 document.getElementById(sp1)if(!usercheck){sp1.innerText用户名不正确return false}sp1.innerTextOKreturn true}//校验密码function checkpassword(){var reg/^\d{6}$/var pwdobj document.getElementById(pw1)var pwdvaluepwdobj.valuevar pwdcheckreg.test(pwdvalue)var sp2 document.getElementById(sp2)if(!pwdcheck){sp2.innerText密码不正确return false}sp2.innerTextOKreturn true}//校验确认密码function checkconformpassword(){var reg/^\d{6}$/var pwdobj2 document.getElementById(pw2)var pwdvalue2pwdobj2.valuevar pwdcheck2reg.test(pwdvalue2)var sp3 document.getElementById(sp3)if(!pwdcheck2){sp3.innerText密码格式不正确return false}//获取密码输入并和确认密码比较是否相等var pwdobj document.getElementById(pw1)var pwdvaluepwdobj.valueif(pwdvalue2!pwdvalue){sp3.innerText密码和确认密码不相等return false}sp3.innerTextOKreturn true}//表单提交校验function checkregister(){var flag1checkpassword()var flag2checkpassword()var flag3checkconformpassword()return flag1flag2flag3}/script/headbodyh1 登录管理系统/h1form action/qianduan/html/01firstpage.html methodget onsubmitreturn checkregister()table cellspacing0px trtd用户名/tdtdinput typetext nameusername iduser1 onblurcheckusername()span idsp1/spanbr/td/trtrtd密 码/tdtdinput typetextnamepasswod idpw1 onblurcheckpassword()span idsp2/spanbr/td/trtrtd确认密 码/tdtdinput typetextnamepasswod2 idpw2 onblurcheckconformpassword()span idsp3/spanbr/td/trtrtd colspan2input typesubmit value注册input typereset value重置button a href15login.html登录/a /button/td/tr/form/table/body/html