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

最新推荐文章于 2024-06-11 02:06:44 发布

门头沟学徒

最新推荐文章于 2024-06-11 02:06:44 发布

阅读量1k

点赞数

文章标签：前端 html css

本文链接：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>