尚硅谷全新JavaWeb教程，企业主流javaweb技术栈html、css、js代码_尚硅谷企业主流javaweb技术栈资源-CSDN文库

共40个文件

html：35个

png：1个

js：1个

html

java

课程资源

需积分: 5 8 浏览量 2024-04-01 17:46:39 上传评论收藏 1.56MB ZIP 举报

JavaWeb是IT行业中一个重要的开发领域，主要用于构建交互式的网页应用程序。这个教程——"尚硅谷全新JavaWeb教程，企业主流javaweb技术栈 html、css、js 代码"——显然是为了帮助开发者掌握企业级JavaWeb开发的核心技术。下面将详细阐述其中涉及的主要知识点。 1. **HTML（超文本标记语言）**：HTML是网页的基础，用于定义网页结构和内容。在本教程中，你将学习如何创建基本的HTML文档，包括头部、主体、段落、标题、链接、图像等元素的使用。同时，还将深入理解表格、表单、框架和多媒体元素的应用，以及HTML5的新特性，如离线存储、拖放功能和新的标签元素。 2. **CSS（层叠样式表）**：CSS用于控制网页的布局和外观。通过学习CSS，你可以理解选择器的概念，如何定义颜色、字体、边距、布局等样式，并实现响应式设计，使网页在不同设备上都能良好显示。此外，CSS3的新增功能，如动画、过渡、伪类和新的布局模型（如Flexbox和Grid），也是重点学习内容。 3. **JavaScript**：JavaScript是一种客户端脚本语言，用于增加网页的动态性和交互性。在这个教程中，你将学习变量、数据类型、控制流、函数等基础语法，以及DOM（文档对象模型）操作，用于动态修改网页内容。BOM（浏览器对象模型）的使用也很重要，它允许JavaScript访问浏览器的一些特性，如窗口、历史、位置等。 4. **DOM（文档对象模型）**：DOM是HTML和XML文档的标准表示，它将网页内容结构化为一个节点树。通过DOM，JavaScript可以查找、添加、删除和修改页面上的任何元素，实现丰富的交互效果。 5. **课程资源与商业资料**：这部分可能包含各种辅助学习材料，如课件、示例代码、练习项目等，以帮助深化理解和实践。商业资料可能涵盖了一些实际项目中的最佳实践和行业标准，这对于提升你的专业技能和适应企业需求非常有帮助。通过这个全面的教程，你不仅会掌握JavaWeb开发的基础，还能了解到当前企业中广泛采用的技术栈。理论学习结合实践操作，将使你具备开发高效、用户体验良好的JavaWeb应用的能力。记得在学习过程中不断动手实践，遇到问题及时查阅资料和交流，以加深理解并提高解决问题的能力。

资源推荐

资源详情

资源评论

收起资源包目录

html.zip （40个子文件）

html

demo2-css

03css引入方式3.html 1KB

04css选择器.html 3KB

06css定位.html 2KB

07css盒子模型.html 2KB

01css引入方式.html 2KB

02css引入方式2.html 2KB

css

btu.css 227B

05css浮动.html 1KB

test

regist.html 5KB

demo1-html

03有序无序列表.html 961B

08表单标签基本使用.html 2KB

02标题段落换行.html 899B

04超链接.html 1KB

05图片标签.html 968B

11特殊字符.html 577B

img

34.jpeg 920KB

56.png 118KB

12.bmp 530KB

09welcome.html 231B

10布局标签.html 2KB

06表格标签.html 2KB

07表格跨行跨列.html 1KB

demo3-js

08json格式.html 1KB

09js常用对象.html 359B

button.js 84B

13DOM编程API.html 5KB

14DOM编程api2.html 2KB

06js函数.html 1KB

15DOM编程api3.html 3KB

07js对象的创建.html 1KB

04js分支结构.html 1KB

11dom编程处理事件.html 2KB

01js引入方式.html 2KB

03js运算符.html 1KB

16js使用正则处理字符串.html 2KB

05js循环结构.html 910B

02js变量和数据类型.html 2KB

10js常见事件演示.html 4KB

12JSBOM编程常见API.HTML 4KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login</title> <script> //校验名字 function checkUsername(){ //定义正则字符规则 var usernameReg = /^[a-zA-Z0-9]{5}$/ //获取用户名 var username = document.getElementById("usernameInput").value //获取提示框元素 var ts = document.getElementById("usernameInputSpan") if(!usernameReg.test(username)){ ts.innerText = "请输入五位字母数字" return false } ts.innerText = "OK" return true } //校验密码 function checkUserPwd(){ //定义正则字符规则 var userPwdReg = /^[0-9]{6}$/ //获取密码元素 var userPwd = document.getElementById("userPwd").value //获取提示框元素 var ts = document.getElementById("userPwdSpan") if(!userPwdReg.test(userPwd)){ ts.innerText = "请输入六位数字" return false } ts.innerText = "OK" return true } //校验密码 function checkUserPwdCon(){ //获取密码元素 var userPwd = document.getElementById("userPwd").value var userPwdCon = document.getElementById("userPwdCon").value //获取提示框元素 var ts = document.getElementById("userPwdSpanCon") if(userPwd!=userPwdCon){ ts.innerText = "密码不一致" return false } ts.innerText = "OK" return true } //表单在提交时，校验用户名和密码格式，格式OK才会提交 function checkForm(){ var result1 = checkUsername() var result2 = checkUserPwd() var result3 = checkUserPwdCon() return result1&&result2&&result3 } </script> <style> .tb{ border: 5px solid rgb(13, 154, 69); margin: auto; width: 300px; border-radius: 3px;/* border-color: green; border-width: 3px; */ } .ipt{ border: 0px ; } td{ border-color: rgb(4, 156, 4); border-width: 1px; border-style: solid; } .btn1{ background-color: antiquewhite; font-family: 幼圆; } .btn2{ background-color: antiquewhite; color: blue; font-family: 幼圆; } .buttonC{text-align: center;} #usernameInputSpan, #userPwdSpan, #userPwdSpanCon { color: rgb(235, 84, 84); font-size: xx-small; } </style> </head> <body> <h2 style="color: #000;text-align: center; font-family: 'Courier New', Courier, monospace;">欢迎注册</h2> <h3 style="color: #000;text-align: center; font-family: 'Courier New', Courier, monospace;">请注册</h3> <form method="post" action=" login.html" onsubmit="return checkForm()"> <table class="tb" cellspacing="1px"> <tr class="ltr"> <td >请输入账号</td> <td > <input class="ipt" type="text" id="usernameInput" onblur="checkUsername()"/> <span id="usernameInputSpan"></span> </td> </tr> <tr class="ltr"> <td>请输入密码</td> <td > <input class="ipt" type="password" id="userPwd" onblur="checkUserPwd()" /> <span id="userPwdSpan"></span> </td> </tr> <tr class="ltr"> <td>请确认密码</td> <td > <input class="ipt" type="password" id="userPwdCon" onblur="checkUserPwdCon()" /> <span id="userPwdSpanCon"></span> </td> </tr> <tr class="ltr" style="margin: auto;"> <td colspan="3" class="buttonC">  <input class="btn1" type="reset" value="重置"> <button class="btn2"> <a href="login.html">注册</a></button> </td> </tr> </table> </form> </body> </html>

评论收藏

内容反馈