JavaWeb(黑马程序员): 前端部分

最新推荐文章于 2024-07-30 16:49:30 发布
最新推荐文章于 2024-07-30 16:49:30 发布
阅读量1k 收藏 4
点赞数
文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/studyForMokey/article/details/128378830
版权

文章目录

课程逻辑

在这里插入图片描述

一、HTML

1. HTML介绍&&快速入门

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

2. 基础标签

在这里插入图片描述
用idea写html
在这里插入图片描述
颜色标签的格式
在这里插入图片描述
在这里插入图片描述

3. 图片音频视频标签

在这里插入图片描述
在这里插入图片描述

4. 超链接标签&列表标签

在这里插入图片描述
在这里插入图片描述

5.表格标签&&布局标签

1. 表格
(1)表格线条 (2)文字居中 (3)合并单元格
在这里插入图片描述
2. 布局标签
经常结合CSS 此处略
在这里插入图片描述

6. 表单标签

在这里插入图片描述
#号表示提交到当前页面
在这里插入图片描述

7. 表单项标签

在这里插入图片描述
name属性会把数据提交给服务器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="#" method="post">
<!--    把按钮与文本内容关联起来-->
<!--    name标签会把内容提交给对应服务器-->
<!--    <label for="id"> 并且设置id-->
    <label for="username">用户名：</label>
    <input type="text" name="username" id="username"><br>
    <label for="password">密码：</label>
    <input type="password" name="password" id="password"><br>
    性别：
<!--    name标签让选框只能2选1-->
<!--    value为服务端接收到的信息-->
    <input type="radio" name="gender" value="1" id="man"> <label for="man">男</label>
    <input type="radio" name="gender" value="2" id="woman"> <label for ="woman">女</label>

    <br>
    <input type="submit" value="设置按钮内容，不设置的话默认为提交">

</form>
</body>
</html>

效果展示：
在这里插入图片描述

二、CSS

1. css简介

在这里插入图片描述

2. css导入方式

在这里插入图片描述

3. 选择器

在这里插入图片描述
在这里插入图片描述

4. 属性

参考官网

三、JavaScript

1. 简介

在这里插入图片描述
在这里插入图片描述

2. 引入方式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3. 基础语法

3.1 书写语法

在这里插入图片描述

3.2 输出语句

在这里插入图片描述

3.3 变量

在这里插入图片描述
var关键字比较特殊，1是作用域为全局变量，2是可以重复定义 区别于let关键字、const关键字

3.4 数据类型

在这里插入图片描述

3.5 运算符

在这里插入图片描述
等号的区别
在这里插入图片描述
类型转换
在这里插入图片描述
总结
在这里插入图片描述

3.6 流程控制语句

在这里插入图片描述
与java一样

3.7 函数

在这里插入图片描述
在这里插入图片描述

4. 对象

4.1 Array对象

在这里插入图片描述
变长度，变类型的理解
在这里插入图片描述
arr3[10]可以访问到，arr3[9]访问的是undifined；变类型:arr3[5]也可以访问到
属性和方法
在这里插入图片描述

4.2 String对象

在这里插入图片描述
trim方法去除 前后两端的空格

4.3 自定义对象

在这里插入图片描述

4.4 BOM对象

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
History实现浏览器的前进后退
在这里插入图片描述

4.6 DOM对象

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
获取element对象
在这里插入图片描述

5. 事件监听

在这里插入图片描述

5.1 事件绑定

在这里插入图片描述
推荐第二种

5.2 常见事件

在这里插入图片描述

6. 正则表达式

在这里插入图片描述

7. 案例

7.1 定时器

每一秒换一次图，实现动态变换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
</head>
<body>
<input type="button" onclick="on()" value="开灯">
<!--//设置图片 id是标签的值-->
<img id="myImage" border="0" src="../imgs/off.gif" style="text-align:center">
<input type="button" onclick="off()" value="关灯">

<script>
    function on(){//设置某标签的值 函数(标签名).src=路径
        document.getElementById('myImage').src='../imgs/on.gif';
    }//定义开函数
    function off(){
        document.getElementById('myImage').src='../imgs/off.gif';
    }//定义关函数
    var x = 0;
    setInterval(function (){
        if(x%2==0){//几张图就 % 多少。
            on();
        }else {
            off();
        }
        x ++;
    },1000)//单位是ms
</script>
</body>
</html>

7.2 页面自动跳转

进入页面后 3s之后自动跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
</head>
<body>

<script>
    document.write("3s后跳转")
    setTimeout(function (){
        location.href="https://www.baidu.com"
    },3000)

</script>
</body>
</html>

7.3 表单验证

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="../css/register.css" rel="stylesheet">
</head>
<body>
<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="#">登录</a>
    </div>
    <form id="reg-form" action="#" method="get">
<!--table标签代表表格，tr标签定义行，td标签定义单元格-->
        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


            <tr>
                <td>手机号</td>
                <td class="inputs"><input name="tel" type="text" id="tel">
                    <br>
                    <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>

<script>
//判断单个条件是否符合


    //1.验证用户名是否符合规则
    //1.1 获取用户名的输入框
    var usernameInput = document.getElementById("username");
    //1.2 绑定onblur事件 失去焦点 判断是否符合规则
    usernameInput.onblur = checkUsername;
    function checkUsername(){
        //1.3 获取名字并去除空格
        var username = usernameInput.value.trim();
        //1.4 判断用户名是否符合规则
        var reg = /^\w{6,12}$/;
        var flag = reg.test(username);
        if (flag) {
            document.getElementById("username_err").style.display = 'none';
        }else{
            document.getElementById("username_err").style.display = '';
        }
        return flag;
    }

    //1.验证用户名是否符合规则
    //1.1 获取用户名的输入框
    var passwordInput = document.getElementById("password");
    //1.2 绑定onblur事件 失去焦点 判断是否符合规则
    passwordInput.onblur = checkpassword;
    function checkpassword(){
        //1.3 获取名字并去除空格
        var password = passwordInput.value.trim();
        //1.4 判断用户名是否符合规则
        var reg = /^\w{6,12}$/;
        var flag = reg.test(password);
        if (flag) {
            document.getElementById("password_err").style.display = 'none';
        }else{
            document.getElementById("password_err").style.display = '';
        }
        return flag;
    }
    
    //1.验证用户名是否符合规则
    //1.1 获取用户名的输入框
    var telInput = document.getElementById("tel");
    //1.2 绑定onblur事件 失去焦点 判断是否符合规则
    telInput.onblur = checktel;
    function checktel(){
        //1.3 获取名字并去除空格
        var tel = telInput.value.trim();
        //1.4 判断用户名是否符合规则
        var reg = /^[1]\d{10}$/;
        var flag = reg.test(tel);
        if (flag) {
            document.getElementById("tel_err").style.display = 'none';
        }else{
            document.getElementById("tel_err").style.display = '';
        }
        return flag;
    }

//判断注册是否正确 三个条件一个错误即报错
//1. 获取表单信息
    var regForm = document.getElementById("reg-form")
//2. 绑定onsubmit事件
    regForm.onsubmit = function (){
        var flag = checkUsername()&&checkpassword()&&checktel();
        return flag;
    }

</script>
</body>
</html>

四、HTTP

1.简介

在这里插入图片描述

2. 请求数据格式

在这里插入图片描述

3. 响应数据格式

在这里插入图片描述

五、Vue

六、Element

门头沟学徒
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
黑马程序员JAVA WEB全笔记pdf
03-26
本笔记基于黑马程序员的课程内容，全面覆盖了Java Web的基础知识，包括前端开发技术如HTML、CSS、JavaScript，以及后端服务器端的Java Servlet和JSP（Java Server Pages）。 一、前端基础 1. ...
【传智播客黑马程序员】Javaweb课件.7z
07-16
这个课程资源来自知名的教育机构“传智播客”的黑马程序员项目，它为想要深入理解Web开发技术的学生提供了一套全面的教程。以下是对这个压缩包中可能包含的知识点的详细解释： 1. **Java基础**：首先，你需要对Java...
JavaWeb（黑马程序员：HTML部分）
Scxioi0的博客
07-08 876
HTML部分
Web前端：JavaScript最强总结 附详细代码 （带常用案例！）_javascript在前端的应用
2401_85122999的博客
06-11 496
/199.99//1024//128console.log(parseFloat(“10年”));//10console.log(parseFloat(“今天是8号”));//NaN//66//199//1024//128console.log(parseInt(“10年”));//10console.log(parseInt(“今天是8号”));
JavaWeb（黑马程序员：Web核心介绍）
Scxioi0的博客
07-11 1814
Web核心介绍
黑马程序员最新版JavaWeb综合案例(前后端完整版)
热门推荐
鲁棒最小二乘支持向量机
06-28 10万+
黑马程序员最新版JavaWeb综合案例(前后端完整版)
黑马程序员Javaweb学习笔记04
weixin_61263533的博客
01-10 701
该博客主要记录在学习黑马程序员Javaweb过程的一些笔记，方便复习以及加强记忆
【JAVAWEB开发】黑马程序员java web案例资料（含Element的删除与修改）
程序猿追的博客
09-19 2万+
【JAVAWEB开发】基于Java+Servlet+Axios+Vue+Element+Maven+Mybatis —— 黑马程序员java web案例资料（含Element的删除与修改）
JavaWeb企业开发全流程-黑马程序员
Kim-Hyunyeon的博客
09-25 3540
黑马程序员2023新版JavaWeb企业开发全流程学习笔记（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）
【传智播客】Javaweb程序设计任务教程 黑马程序员 课后答案【合集】
weixin_43899069的博客
11-29 2万+
【传智播客】Javaweb程序设计任务教程 黑马程序员 第一章 课后答案 【传智播客】Javaweb程序设计任务教程 黑马程序员 第二章 课后答案 【传智播客】Javaweb程序设计任务教程 黑马程序员 第三章 课后答案 【传智播客】Javaweb程序设计任务教程 黑马程序员 第四章 课后答案 【传智播客】Javaweb程序设计任务教程 黑马程序员 第五章 课后答案 【传智播客】Javaweb程序设计任务教程 黑马程序员 第六章 课后答案 【传智播客】Javaweb程序设计任务教程 黑马程序员 第7,8,9
黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）
qq_69325307的博客
03-30 3061
感谢黑马，感谢努力的自己，终将成为黑马。
黑马程序员JavaWeb开发教程（P1-P66）
这里有一只小马吖
05-16 3031
黑马程序员JavaWeb开发教程（P1-P66）
JAVA Web程序设计任务教程（黑马程序员、编著）课后习题1-15章课后习题答案.zip
11-11
本教程由黑马程序员编著，旨在帮助学习者深入理解并掌握Java Web编程的核心概念和技术。教程覆盖了从基础到进阶的15个章节，每个章节都配备了课后习题，以强化理论知识并提升实践能力。 1. **Servlet与JSP**：Java ...
javaweb传智书城项目设计与开发
01-07
【JavaWeb传智书城项目设计与开发】是一个综合性的实战项目，主要涵盖了JavaWeb开发中的诸多关键技术和实践。这个项目旨在提供一个完整的图书在线销售平台，具备用户管理、商品展示、购物车、订单处理等功能，同时...
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 421
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
js、ts、argular、nodejs学习心得
最新发布
07-30 202
工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构。
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 275
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
JavaWeb开发实践：前端与Ajax交互解析
"JavaWeb开发总结（五）：前端处理、JSON操作与Ajax同步" 在JavaWeb开发中，前端部分的交互与数据处理是至关重要的。这部分内容主要涉及了JSON的解析、变量是否未定义的判断以及Ajax同步请求的实现。 1. JSON解析...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值