1：概述： Html是超文本标记语言，即网页中的元素内容可以超过文本的内容， html中提供了大量的标记或标签，如开始标签和结束标签。
2：结构你好,HTML hell o html~ hello html~
3：html中的标签 1.标题标签： h1大~h6小 自动换行。 2.列表标签 orderlist：ol：定义有序列表 li：定义列表项； unoderlist:ul：定义无序列表 li：定义列表项。
- 标签用于结合， 标签定义了定义列表（definition list),定义列表的结构
- （定义列表中的项目)定义列表的名称
- （描述列表中的项目）:定义类表的内容。
3.图片标签
src属性用来指定图片的位置(先保证图片资源和网页在同一级目录)
width属性用来指定图片的宽度,单位是像素px
height属性用来指定图片的高度,单位是百分比。
4.超链接：
跳转：
百度一下1
在当前页面跳转 百度一下2打开一个新的页面跳转 锚定： 回到锚定的位置 点击，回到顶部锚定 5.输入框： 普通文本框：
密码文本框：
单选文本框： 男
复选文本框：一号
数字值文本框：
日历文本框：
日期输入框：
按钮文本框：
提交：把用户在浏览器输入的数据提交给后端进行处理
提交按钮1：
提交按钮2：
6.表格标签:table 结构：table里包含tr行，tr行里包含td列， 属性：border设置边框，width表格宽度，bgcolor背景色，cellspacing单元格的距离， 表格的表头使用标签进行定义。 colspan是列合并:把多个列合并成一个大列,值是指合并几个 rowspan是行合并:把多个行合并成一个大行,值是指合并几个 7.表单标签:form 表单标签，用来提交数据- 1.get方式提交的数据都在地址栏里 http://127.0.0.1:8080/HAS01/work/work1.html?user=&pwd=; 默认的提交方式,数据拼接在地址栏，缺点是不安全和长度受限。 2.post提交安全不显示数据，好处是安全，数据没有大小要求，但数据不在地址栏显示。 3.method属性用来设置数据的提交方式。 4.action属性用来指定是哪段Java程序接受数据 5.提交数据的要求：必须用form标签+必须有submit按钮+必须有name属性。 6.提交的数据都在地址栏：被拼接在？之后，name的属性值=浏览器上输入的值 http://127.0.0.1:8080/HAS01/work/work1.html?user=Reimu&pwd=123&path= 7.name用来收集用户从浏览器填写的数据，value用来设置提交的值。 8.其他标签 div标签
二．CSS每个div标签独占一行
1 2 3 p标签每个p标签独占一行，每个p标签代表一个段落
1
2
3
span标签 1 2 3 音频标签controls属性必须有，用来作为控制器
视频标签 color修饰文字的颜色, font-size修饰字号, 1．概念： CSS全称叫做层叠样式表stylesheet，是用来修饰HTML网页的一门技术， 增强网页的展示能力。主要是使用CSS属性来实现，最终可以将css代码和 HTML网页代码进行分离，也可以提高css代码的复用性。 2．CSS代码可以出现的位置(用style修饰): (1)行内CSS：行内CSS(优先级高),效果只作用在这一行. 属性名:属性值; (2)内部CSS：写下当前页面内的样式，语法: 选择器 { 属性名:属性值;样式2; } (3)外部CSS：以链接的形式加入通过:5.变量： js是一种弱类型语言,用var定义变量类型 格式：变量类型 变量名=变量值 var b=10; b=20;// number b=1.6 //number b=true;//boolean alert(b); //交换变量的值(首位相连斜相对) var a=1; var b=6; alert("交换前："+a+","+b); var tmp=a; a=b; b=tmp; alert("交换后："+a+","+b); 6.js的运算符 //1.算数运算符： + - * / % ++ -- alert(5/2); //2.5,js是弱类型语言 alert(5%2);//1,取余数 var a=10; var b=10; alert(a++);//10 alert(++b);//11 var a=10; var b=10; var c=a+++b;//++ -- 的优先级大于+，- alert(c);//20 var a=10; var b=10; var d=++a+b; alert(d);//21 var a=10; a=a++; //把a++的结果10,交给a保存 alert(a);//10 var b=10; b=++b;//把++b的结果11,交给a保存 alert(b);//11 //2.赋值运算符： =，+=，-=，*=，/=，%= var d=10; alert(d%=3);//1 //d%=3相当于d=d%3; //3.比较运算符，描述的是成立为true， 不成立为false； ==，!=, =，!, > ，< ，>=，<= alert(1==1);//true alert(1=="1");//true，==只是比较值 alert(1==="1");//false,===比较的是类型和值 alert(1===1);//true,类型和值都相等 alert(1!=1);//false //4.三元运算符：求两个数中的最大值：a?b :c; var e=10; var f=3; var g=e>f ? e: f; //记录最大的值 alert(g); //10 //5.逻辑运算符: &&，||，& ， | //6.位运算符: 移位运算符分为左移(<<)、右移(>>)、无符号位移(>>>)。 <<:空位补0，最高位丢弃。相当于数据乘以2的n次幂。 3的原码：11 原码 00000000 00000000 00000000 00000011 反码 00000000 00000000 00000000 00000011 补码 00000000 00000000 00000000 00000011 左移(00)000000 00000000 00000000 0000001100（补码） 正数的原反补都相同，所以结果为12。 -3的原码 原码 10000000 00000000 00000000 00000011 反码 11111111 11111111 11111111 11111100 补码 11111111 11111111 11111111 11111101 左移 (11)11111111 11111111 11111111 11110100(补码) 反码 11111111 11111111 11111111 11110011 原码 10000000 00000000 00000000 00001100（-12） >>:最高位是0，左边补齐0；最高位是1，左边补齐1。相当于数据除以2的n次幂。 原理与左移相同。 >>>:无论最高位是0还是1，左边补齐0。 正数>>>的结果与>>相同，重点看负数。 -12的原码 原码 10000000 00000000 00000000 00001100 反码 11111111 11111111 11111111 11110011 补码 11111111 11111111 11111111 11110100 >>> 0011111111 11111111 11111111 111101(00)(补码） 变成了正数，原反补都相同，通过计算得1073741821。 //7.前置逻辑运算符: ! (not) //8.typeof运算符: 用于返回变量或者表达式 的数据类型 var i = 3; console.log(typeof i);//number i=true; console.log(typeof i);//boolean i="hello"; console.log(typeof i);//string 7.注释： 单行注释： //注释内容 多行注释： 8.JS语句： JS中的语句和Java中的语句用法也大致相同； // 1.if…else语句 var a=3; if(a==="3"){ //false,要求值和类型相等 console.log("ok"); }else{ console.log("bad"); } //练习：判断成绩所属的等级 var score="u"; if(score<=100&&score>80){ console.log("优秀"); }else if(score>=60){ console.log("及格"); }else if(score>0){ console.log("不及格"); }else{ console.log("输入错误"); } //2.switch…case语句 //判断今天周几 var a=prompt('请输入数字：');//输入框 var day=(Number)(a); //强制把String类型转换为number类型 switch(day){ case 1:alert("今天星期一");break; case 2:alert("今天星期二");break; case 3:alert("今天星期三");break; case 4:alert("今天星期四");break; case 5:alert("今天星期五");break; case 6:alert("今天星期六");break; case 7:alert("今天星期天");break; default: alert("输入错误。") } //3.循环语句 //for循环; //循环语句中没有增强for循环 for(var i=0;i<7;i++){ alert(i); console.log(i); } var sum=0; for(var i=0;i<=100;i++){ sum +=i;//sum=sum+i; } console.log(sum); //求1~100的偶数的和 var sum=0; for (var i =0; i <= 100; i++) { if(i%2==0){ sum +=i; //修改变量的值 } } console.log("1~100的偶数的和："+sum); //while循环 var i=0; while(i<5){ alert(i); i++; } var i=0,sum=0 ; while(true){ i++; sum +=i; if(i==100){ alert(sum); break; } } //do{}while();循环 var i=0; do{ i++; alert(i); }while(i<5); //var usrName = prompt("请输入您的名字"); //会在输入窗显 //console.log(usrName); //练习1:1亿，每天花一半，用几天 var money=100000000; var day=0; while(money>1){ money=money/2; day++; } console.log("1亿能花："+day+"天~"); 9.js的数组： 定义：js数组用于在单个变量中存储多个值 创建方式： 1:存放任何类型的数据：var arr1=new Array(); 10.js的函数： js函数就是一个有具体功能的代码块，可以反复调用； 函数就是包裹在花括号里的代码块，通过function关键字 11.js的对象: //4.window Window对象–代表浏览器中一个打开的窗口,了解一下即可，很多被UI替代 window.onload() 在浏览器加载完整个html后立即执行! window.alert("text") 提示信息会话框 window.confirm("text") 确认会话框 window.prompt("text") 键盘输入会话框 window.event 事件对象 window.document 文档对象 //5.document document对象–代表整个HTML文档，可用来访问页面中的所有元素 document.write() 动态向页面写入内容 document.getElementById(id) 获得指定id值的元素 document.getElementsByName(name) 获得指定Name值的元素 学会简单使用，后期被jQuery封装，在后期被Vue框架封装12.DOM树结构 根据document对象获取html网页中的元素。 ECMAscript描述了javascript语言的语法和基本对象 文档对象模型DOM（document Object Model）与HTML网页API接口 浏览器对象模型BOM（Browser Object Model），与浏览器进行交互的API接口 核心对象有：window浏览器窗口，navigator浏览器信息，location浏览器当前地址信息， history浏览器历史信息，screen用户屏幕信息。 DOM 是一项 W3C (World Wide Web Consortium) 标准，DOM（document Object Model） 文档对象模型为JS *** 作html文档所提供的一套API，通过这套API可以很方便的对html元素 进行访问及增删改查 *** 作。实际开发更多通过js *** 作DOM对象实现对html页面的 *** 作， BOM也用，比较少用。 --1.获取对象: window.document，window可以不写 --调用方法: getElementById("元素的id的属性的值")--返回1个元素 getElementsByName("元素的name属性的值")--返回多个元素(用数组) getElementsByClassName("元素的class属性的值")--返回多个元素(用数组) getElementsByTagName("元素的标签名的值")--返回多个元素(用数组) write()--向文档写 HTML 表达式 或 Javascript 代码 title--返回网页的标题 id--设置或返回元素的id innerHTML--设置或返回元素的内容 练习：四.Vue测试DMO div1 div2 行级标记1 行级标记2 我的第一个段落。 13.JSON 1.概述：是一种轻量级的数据交换格式。 JSON 指的是 Javascript 对象表示法（Javascript Object Notation),它是一种轻量级的数据交换格式。 它基于 ECMAscript (js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。是xml的终结者，成为主流开发 方式（ajax异步请求，json返回）。 2.作用：JSON 是存储和交换文本信息的语法。规定了一种客户端和服务端进行数据交换的一种字符串格式。 当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。JSON 属于文本，并且我们能够把任何 Javascript 对象转换为 JSON，然后将 JSON 发送到服务器。我们也能把从服务器接收到的任何 JSON 转换为 Javascript 对象。以这样的方式，我们能够把数据作为 Javascript 对象来处理， 无需复杂的解析和转译。 语法 JSON数据：var a =' "firstName" : "John" ' ； JSON 对象：var a = '{ "firstName":"John" , "lastName":"Doe" }'； JSON 数组：var a = ' [{ "firstName":"Bill" , "lastName":"Gates" }, { "firstName":"George" , "lastName":"Bush" }]'; 转换工具 使用JS里的内置对象JSON.用来把以 JSON 格式写的字符串 和 原生 Javascript 对象互转. 给服务器发送数据: 将JS对象转成JSON字符串 JSON.stringify(Js对象); //转换字符串 接受服务器的数据: JSON字符串转成JS对象 JSON.parse("json字符串"); //解析字符串 例子： 14.ajax 定义： AJAX = Asynchronous Javascript And XML. AJAX 并非编程语言。 Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。 这意味着可以更新网页的部分，而不需要重新加载整个页面。 作用：更新局部页面。 所有现代浏览器都支持 XMLHttpRequest 对象。 XMLHttpRequest 对象用于同幕后服务器交换数据。 这意味着可以更新网页的部分，而不需要重新加载整个页面。 15.其他 1.显示当前日期：document.write(Date()); 2.点击出现d框1 单击出现d框2 当鼠标在当前div内出现d窗 双击出现d框4 16.调试 console调试网页 Chrome：专业人用专业的工具，浏览器调试谷歌、火狐最佳， 使用F12打开调试窗口。也可以快捷键打开：ctrl+shift+i。 支持自动补全，提示下，按tab键补全 清除日志 Console控制台菜单概念：是一个轻量级的前端框架，封装了HTML CSS JS的代码。 特点: 1, 是一个轻量级的 渐进式的框架, 其核心思想是数据驱动、组件化的前端开发， 可以按需配置，可以实现数据的动态更新。 2, 实现了数据驱动/双向绑定 和 组件化的思想(高内聚)。 3, vue框架可以避免了DOM的API，传统方式关注的是都像的document结构的api，而vue关注的是数据。 4, 遵循了MVVM设计模式,实现前端代码的松耦合 M是Model,是指数据 V是View,是指视图 VM是ViewModel,是指在指定视图里渲染指定数据 Vue是一个用于构建用户界面的渐进式 SPA （ Single-Page Applications ）**单一页面框架。 与其它庞大而单一框架不同的是，Vue从一开始就被设计为按需搭建。 可以只使用核心vue.js 可以只使用核心vue.js + components组件 可以只使用核心vue.js + components组件 + router路由 可以只使用核心vue.js + components组件 + router路由 + vuex状态管理 构建大型vue项目：npm（包依赖） + webpack（打包、压缩、合并等）
1.Servlet概述
Servlet（Server Applet）是Java Servlet的简称，称为小服务程序或服务连接器，用Java编写的服务器端程序，具有独立于平台和协议的特性，主要功能在于交互式地浏览和生成数据，生成 动态Web内容。这个过程为：
1,客户端发送请求至服务器端
2,服务器将请求信息发送至 Servlet
3,Servlet 生成响应内容并将其传给服务器。响应内容动态生成，通常取决于客户端的请求
4,服务器将响应返回给客户端
Servlet 看起来像是通常的 Java 程序。Servlet 需要导入特定的属于 Java Servlet API 的包。准备工作
在IDEA里创建一个web工程
File-New-Project-选Java Enterprise并勾选右侧的Web Application-next-输入工程名称-Finish配置web.xml文件
在Servlet3.0版本中,被@WebServlet注解代替,如:@WebServlet("/myservlet")括号中,就可以规定访问方式。
Servlet102 com.web.Servlet102 Servlet102 /a/s/d conwj1 com.web.SerTest1 conwj1 /conwj1 ServletDemo3 com.web.ServletDemo3 ServletDemo3 /ServletDemo3
3.servlet的生命周期
分为三大阶段
1.初始化–由servlet主动调用init()
2.提供服务–由servlet主动调用service()/doGet/doPost();
3.销毁–由servlet主动调用destroy()测试方法
1.创建serlvet程序，使用注解开发方法方式
2.测试
package com.web.requset; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet("/ServletTest6") public class ServletTest6 extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //doGet(request,response); String method=request.getMethod();//验证请求方式 System.out.println("----解决中文乱码-----"); request.setCharacterEncoding("utf-8"); String user2= request.getParameter("user"); System.out.println(user2+method); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String method=request.getMethod();//验证请求方式 String user1 = request.getParameter("user"); String pwd1 = request.getParameter("pwd"); System.out.println("用户名："+user1+"n密码："+pwd1+method); } }欢迎分享，转载请注明来源：内存溢出
赞 (0)打赏
微信扫一扫
支付宝扫一扫
Java String int Integer （三种数据类型之间的转换）上一篇 2022-12-14Springboot1.X升级2.X摘要下一篇 2022-12-14
评论列表（0条）