个人网站设计欣赏,天津seo选天津旗舰科技a,九台区建设银行网站,开软件外包公司赚钱吗Javaweb考前复习冲刺
第一章#xff1a; JavaWeb 入门
JavaWeb是指#xff1a;以Java作为后台语言的项目工程。
javaweb项目创建的过程#xff1a;
首先集成Tomcat服务器环境新建dynamic web project部署工程运行
路由含义#xff1a;
http://localhost:8080/工程…Javaweb考前复习冲刺
第一章 JavaWeb 入门
JavaWeb是指以Java作为后台语言的项目工程。
javaweb项目创建的过程
首先集成Tomcat服务器环境新建dynamic web project部署工程运行
路由含义
http://localhost:8080/工程项目名/(文件夹)/页面名。
%application.getRealPath() % 工程部署路径
# D:\java_exerise\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\component\第二章 静态网页设计
一个网页是动态网页还是静态网页就是否还有 前端三件套(HTML、CSS、Javascript之外的内容。
动态网页是指网页中有需要服务器执行的元素文件扩展名是jsp动态页面中除了上述静态元素外还包括服务器端脚本代码Java、指令、动作标签表达式语言等。
动态网页中 静态成分和动态成分的执行顺序
% page pageEncodingUTF-8 importjava.util.Date %
html
body
script
document.write(new Date());
/script
br/
%
out.print(new Date());
%
/body
/htmlSun Dec 17 2023 12:43:16 GMT0800 (中国标准时间)
Sun Dec 17 12:43:15 CST 2023网页会先执行java代码再执行js代码。我们可以理解为out.print(new Date()); 属于后台代码只不过我们的服务器本地而已。
HTML
网页的基本框架是由一个个标签组成的标签又分为块级标签和行内标签。
块级标签 块级标签以新行开始占据一整行的宽度不与其他元素并排显示。 常见的块级标签有 div、p、h1 - h6、ul、ol、li、table 等。
行内标签
内标签不会独占一行与其他元素并排显示根据内容的大小自动调整宽度常见的行内标签有 span、a、strong、em、img、input、label 等
列表
有序列表
ol type序号类型li……/lili……/li
/ol无序列表
ul type类型样式li……./lili……/li
/ul定义列表】
自定义列表不仅仅是一列项目而是项目及其注释的组合。
自定义列表以
标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以 开始。 dldt名词1/dtdd解释1/dddt名词2/dtdd解释2/dd
/dldldtCoffee/dtdd- black hot drink/dddtMilk/dtdd- white cold drink/dd
/dl表格 表格的标题使用了 thead 元素表格的主体数据使用了 tbody 元素。 tfoot用于定义表格的页脚部分。页脚位于表格主体之后可以包含汇总信息等内容。 caption用于为整个表格添加标题位于表格的上方。一个表格只能有一个 caption 元素。
tablecaption这是表格标题/captiontheadtrth列标题1/thth列标题2/thth列标题3/th/tr/theadtbodytrtd行1列1/tdtd行1列2/tdtd行1列3/td/trtrtd行2列1/tdtd行2列2/tdtd行2列3/td/tr/tbodytfoottrtd colspan3这是表格页脚/td/tr/tfoot
/table表单元素
文本输入框: // placeholder 设置提示词
文本框input typetext placeholder请输入用户名 密码框 密码框input typepassword密码框input typepassword placeholder请输入密码上传文件 上传文件input typefile
//上传多个文件
上传文件input typefile multiple单选框 // 只有radio的时候无法实现多选设置name后可以实现单选 一组只能选择一个 //checked 默认选中的
input typeradio namegender 男
input typeradio namegender checked 女复选框 //多选框 默认选中input typecheckbox 敲代码input typecheckbox checked 敲前端代码input typecheckbox checked 敲前端 HTML 代码下拉框//下拉框selectoption北京/optionoption上海/optionoption广州/optionoption深圳/optionoption selected武汉/option/select多行文本输入框 //多行文本框
textarea请输入评论/textarea 开发中常使用label和input输入框配套使用增加用户视觉效果
input typeradio namegender idman label forman男/labellabelinput typeradio namegender 女/label表单
form name表单名 method提交方法 action处理程序………
/formform action用户名input typetext密码input typepassword!-- 如果省略 type 属性功能是 提交 --button typesubmit提交/buttonbutton typereset重置/buttonbutton typebutton普通按钮/button/formCSS
CSS是用于对html元素进行修饰美化的颜色背景字体大小透明度等等。
CSS的三种形式 style/* 定义 */.red {color: red;}
/style
div stylecolor: green; font-size: 30px;这是 div 标签/div
link relstylesheet href./my.css背景background-image:url(gradient2.png);
文字对齐text-align:center; //用于设置文字对其 在块元素中 right/left/justify justify每一行的宽度相同vertical-align:center; 垂直居中文字
块元素居中margin: auto;必须要设置宽度后才有效果.clearfix { 清除浮动的影响overflow: auto;}浮动float:right; 如果是图片浮动则文字会在其周围环绕clear:both;最后一个元素清除浮动的影响
超链接跳转a hrefhttps://www.runoob.com/ target_blank _self _blank 默认是在当前页面跳转
取消超链接下划线text-decoration:none;text-decoration:overline/line-through/underline 上面/中间/下面
字体大小font-size:20px; 字体大小
点击a:link {color:#000000;} /* 未访问链接*/a:visited {color:#00FF00;} /* 已访问链接 */a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */a:active {color:#0000FF;} /* 鼠标点击时 */
边距问题border:1px solid black;border-collapse:collapse; 边框折叠成一条线border-style:dotted/dotted; 边框演示border-style:dotted solid double dashed;padding:25px 50px 75px; 上左右下width: 300pxmargin: 25px;
行内块display:inline; block块元素
可见visibility:hidden;
定位h2{ position:absolute; //绝对定位的位置是相对与最近的父元素若没有则是相对于html)position:relative;//相对定位元素经常被用来作为绝对定位元素的容器块。position: sticky; //不会改变位置 left:100px;top:150px;}
溢出:(文字内容大于框的大小是否形成滚动条)overflow:visible(呈现在其之外)、scroll形成滚动条hidden
Javascript
JavaScript通常简称为JS是一种广泛用于网页开发的脚本语言。它是一种高级、解释性的编程语言用于为网页添加交互性和动态功能。就是上网页变的可交互起来。
获取元素常用的几个方法
根据id获取某个元素document.getElementById(id); 返回对象根据name获取元素document.getElementsByName(name);(返回对象数组根据tagName获取元素document.getElementsByTagName(tagName);(返回对象数组)
函数定义 scriptfunction 函数名(参数列表){函数体(返回值使用return语句)}/script获取值
var inputElementdocument.getElementById(card);
var idCard idCardInput.value;修改值
var resultElementdocument.getElementById(result);resultElement.textContent邮费fee元;js操控css
button typebutton onclickmyFunction()点我/button 绑定响应事件
script
function myFunction()
{document.getElementById(demo).innerHTMLHello JavaScript!;
}
/script
document.getElementById(demo).style.color#ff0000; 修改css 案例分析
script
function f1(){var adocument.getElementById(t1).value; //获取t1标签中的值alert(用户在文本框中输入的值为a);// 弹出提示框显示用户输入的值
}
function f2(){var adocument.getElementsByName(sex); //获取一组标签var sex;for(var i0;ia.length;i){if(a[i].checked){ //如果某个表单元素被选中 则为truealert(a[i].value); //提示框输出break;}}
}
function f3(){var adocument.getElementsByName(aihao);var aihao;for(var i0;ia.length;i){if(a[i].checked){//如果某个复选框元素被选中 则为trueaihaoa[i].value ; //拼接}} if(aihao){alert(无爱好);}else{alert(爱好aihao);}
}
function f4(){//下拉框 下拉框无法进行点选 只能滑动 显示最上面的是哪一个var adocument.getElementById(jiguan);var selectedIndexa.selectedIndex;//获取是当前是第几个 alert(a.options[selectedIndex].value); //获取响应的值
}
/script!DOCTYPE html
html
head
/head
body
input typetext idt1 size10/
input typebutton idbt1 value获取文本框的值 onclickf1();/ // 绑定点击响应函数
hr
input typeradio namesex value男 checked/男
input typeradio namesex value女/女
input typebutton idbt2 value获取性别 onclickf2();/
hr
input typecheckbox nameaihao value音乐 /音乐
input typecheckbox nameaihao value画画/画画
input typecheckbox nameaihao value下棋/下棋
input typebutton idbt3 value获取爱好 onclickf3();/
hr
select idjiguan
option value山东山东/option
option value北京北京/option
option value广东广东/option
/select
input typebutton idbt4 value获取籍贯 onclickf4();/
/body
/htmlJquery
jQuery 是一个广泛使用的 JavaScript 库它简化了 JavaScript 在网页开发中的操作和处理。jQuery 提供了一组易于使用的函数和方法使开发者能够更简洁、高效地操作 HTML 元素、处理事件、发送 AJAX 请求等。
引入
script srchttps://cdn.staticfile.org/jquery/1.10.2/jquery.min.js/script
script srcjs/jquery-1.11.1.js/script% page pageEncodingUTF-8%
htmlhead script srcjs/jquery-1.11.1.js/script script$(function(){$(p).click(function(){$(this).hide();});});
/script/head bodyp如果你点我我就会消失。/p/body
/html页面加载 window.onloadfunction(){} //原始js写法$(function(){
逻辑代码});//一般使用jquery都将代码放在其中 $(function(){ }) 是让网页全部加载完成后再使用jQuery。下面是 jQuery 中一些常见操作的简洁示例
jQuery选择器
// 通过元素标签名选择元素
$(div)
// 通过class属性值选择元素
$(.class-name)
// 通过ID属性值选择元素
$(#element-id)
// 通过其他属性选择元素
$(div[titlediv2]) $(div[title!div2])
// 父 与 子孙们关系
$(#d1 span).css(color,red);
//父子关系$(#d1span).css(color,green);
//选取紧接在prev元素后的同辈next元素
$(#d1div).css(color,blue)
//选取所有在prev元素后的同辈siblings元素
$(#d1~div).css(color,gray);
//后面两种写法一般不会用到了解即可。全(不)选实现:
% page pageEncodingUTF-8%
html
head script srcjs/jquery-1.11.1.js/script script$(function(){$(#xz).click(function(){$(.c1).prop(checked, this.checked); //当全选复选框被点击时通过 $(.c1).prop(checked, this.checked) 将所有记录复选框类名为 c1的 checked 属性设置为与全选复选框相同的值从而实现全选或取消全选的功能。});});/script
/head
bodytable border1trtdinput typecheckbox idxz//tdtd列标题/td/trtrtdinput typecheckbox classc1//tdtd记录1/td/trtrtdinput typecheckbox classc1//tdtd记录2/td/trtrtdinput typecheckbox classc1//tdtd记录3/td/tr/table
/body
/html$(.c1).prop(checked, this.checked);
$(.c1).attr(checked, this.checked)上面两种方法都可以实现全选或者全不选的效果区别是从 jQuery 1.6 版本开始推荐使用 .prop() 方法来设置元素的属性值而不是 .attr() 方法因为 .prop() 方法更适用于处理属性值的布尔类型。在处理 checked 属性时使用 .prop() 方法更为准确和可靠。
Jquery操作dom
//获取元素的HTML内容var a$(#div1).html();//获取元素的文本内容。var b$(#div1).text();//获取表单元素值$(select).val()// 插入节点var div1$(divdiv1/div);$(body).append(div1); 发送 AJAX 请求
$.ajax({url: url,method: GET,data: {// 请求参数},success: function(response) {// 请求成功后的处理},error: function(error) {// 请求失败后的处理}
})总结
通过这一小节的学习我们发现你去手写一个网页属实不简单前端知识点确实比较多网上流传着这样一句话前端堪比娱乐圈一天一个新框架不过不需要大家都记住只需要你能懂在业务层一般都是使用组件开发大不必过度担心。
第三章动态网页设计
