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

课程逻辑

一、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