JavaWeb前端基础（HTML CSS JavaScript）

本文用于检验学习效果，忘记知识就去文末的链接复习

1. HTML

1.1 HTML基础

结构

头<head>
身体<body>

内容

图片<img>
段落<p>
图标<link>

标签

单标签
双标签

常用标签

div：分割块
span：只占需要的大小
p：段落
br：换行
hr：一根横线（与页面宽度一样）
h1，h2，h3，h4，h5，h6：一级/二级/三级/四级/五级/六级标题
a：链接
ol，li：有序列表
ul，li：无序列表
teble，thead，tr，th，tbody，tr，tb：表格

转义字符

&ensp半个空白格子
&emsp一个空白格子
&nbsp更小的空白格子
&lt<
&gt>
&amp&
&quot"
&copy版权
&reg已注册商标
&times乘号
&divide除号

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>hello title</title>
  <link rel="icon" href="./img/法案_bill.png" type="image/x-icon" />
</head>

<body>
  <div id="anchor1">这是页面顶端（锚点位置）</div>
  <h1>这是一级标题</h1>
  <h2>这是二级标题</h2>
  <h3>这是三级标题</h3>

  <div class="b1">
    <p>【这是第1块，第1段】</p>
    <p>
      【这是第1块，第2段】<br />《望庐山瀑布》<br />唐·李白<br />日照香炉生紫烟，遥看瀑布挂前川。<br />飞流直下三千尺，疑是银河落九天。
    </p>
    <p>【这是第1块，第3段】&lt;&ensp;&gt;&lt;&emsp;&gt;&lt;&nbsp;&gt;</p>
  </div>

  <div class="b2">
    <p>【这是第2块】</p>
    <a href="https://www.bilibili.com/">点击这里访问粉色小破站</a>

    <ol>
      有序列表
      <li>这是第一项</li>
      <li>这是第二项</li>
      <li>这是第三项</li>
      <li>这是第四项</li>
      <li>这是第五项</li>
      <li>这是第六项</li>
    </ol>
    <ul>
      无序列表
      <li>这是第一项</li>
      <li>这是第二项</li>
      <li>这是第三项</li>
      <li>这是第四项</li>
      <li>这是第五项</li>
      <li>这是第六项</li>
    </ul>
    <table border="">
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>班级</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>001</th>
          <th>小明</th>
          <th>计科</th>
        </tr>
        <tr>
          <th>002</th>
          <th>小红</th>
          <th>软工</th>
        </tr>
      </tbody>
    </table>
  </div>

  <div>
    <p>【这是第3块】</p>
    <p>
      <img width="300" src="./img/可厉害.png" alt="可厉害" /><img width="300" src="./img/可厉害.png" alt="可厉害" />
    </p>
    <p>
      <img width="300" src="./img/可厉害.png" alt="可厉害" /><img width="300" src="./img/可厉害.png" alt="可厉害" />
    </p>
    <p><a href="#anchor1">跳转到页面顶端（锚点位置）</a></p>
  </div>
</body>

</html>

1.2 HTML表单（写登录界面）

标签

label
input
button

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>hello title</title>
  <link rel="icon" href="./img/法案_bill.png" type="image/x-icon" />
</head>

<body>
  <div>
    <h1>登录网站</h1>
    <hr />
    <label>
      账号:
      <input type="text" name="username" id="username" placeholder="账号" /><br />
      密码:
      <input type="password" name="password" id="password" placeholder="密码" /><br />
      颜色:
      <input type="color" name="color" id="color" /><br />
      选择文件:
      <input type="file" name="file" id="file" /><br />
      选择日期:
      <input type="date" name="date" id="date" /><br />
      备注
      <textarea name="textarea" id="textarea" cols="30" rows="10" placeholder="多行文本"></textarea><br />
      <hr />
      <a href="http://www.baidu.com">忘记密码</a>
      <button>登录</button><br />
    </label>
    <label>
      <input type="checkbox" name="checkbox" id="checkbox" />
      我同意本网站的隐私政策
      <a href="http://www.baidu.com">《隐私政策》</a>
    </label>
    <br>
    <label>
      <input type="radio" name="role" />
      学生
      <input type="radio" name="role" />
      老师
      <input type="radio" name="role" />
      管理员
      <br>
      选择身份
      <select>
        <option value="1">学生</option>
        <option value="2">老师</option>
        <option value="3">管理员</option>
      </select>
    </label>

  </div>
</body>

</html>

2. CSS

用CSS自定样式

用外部css文件
在元素标签中用style=""
在头部定义样式<style>

CSS选择器（指定元素的方式）

标签名: input{}（直接写）
class: .test{}(加点)
id: #test{}（加#）
所有元素：*
位于某元素内部的元素div label(所有div标签中的label标签)

CSS选择器有优先级(下面从高到低排序)

以最高级为准
最高级：!important
内联选择器
ID选择器
类选择器
元素选择器
通配符选择器*

CSS边距

浏览器自带边距
外边距：margin
内边距：padding

常用属性

background-color
margin
padding
text-align

制作一个登录界面
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>hello title</title>
  
  <style>
    body {
      background-color: #ffffff;
      margin: 0;
      text-align: center;
    }

    input {
      border: 0;
      background: #e0e0e0;
      line-height: 40px;
      border-radius: 20px;
      padding: 0 20px 0 20px;
      width: 200px;
      font-size: 16px;
      margin-top: 20px;
    }

    input:focus {
      outline: 0;
    }

    button {
      margin-top: 20px;
      background: #6600CC;
      border-radius: 20px;
      border: 0;
      width: 200px;
      height: 50px;
      color: white;
      font-size: 16px;
      box-shadow: 0px 2px 10px blueviolet;
      /*按键四周的阴影*/
    }

    button:focus {
      outline: 0;
      background: #6666CC;
    }

    #input-remember {
      width: auto;
    }
  </style>
</head>

<body style="margin: 0;">
  <h1>登录</h1>
  <form>
    <hr>
    <div>
      <label for="input-username">账号:</label>
      <input type="text" id="input-username" placeholder="账号" />
      <br>
      <label for="input-password">密码:</label>
      <input type="password" id="input-password" placeholder="密码" />
      <br>
      <label for="input-remember">记住我:</label>
      <input type="checkbox" id="input-remember" />
      <br>
      <a href="#">忘记密码?</a>
      <a href="#">忘记账号?</a>
    </div>
    <div>
      <button type="submit">登录</button>
    </div>

  </form>
</body>

</html>

3. JavaScript

比起Java，更像Python。弱类型语言

3.1 基础语法

数据类型

Number：整数，小数
String：字符串
Boolean：布尔

特殊值

undefined：未定义
null：空
NaN：非数字（值不合法）

关键字

let：变量（不建议用var）
const：常量
typeof a：查看变量a的类型

常见语法

a++
for
if-else
switch-case

关系运算

<
>
<=
>=
==：相等
- 字符串与数字比较，会将字符串转化为数字，如'10'==10输出为true
===：全等（这个类似Java中的 == ）

逻辑运算（短路）

&&：逻辑与
||：逻辑或
- 7 || true输出7
- true || 7输出true
!：逻辑非
&：按位与
|：按位或
?:：

输入/输出

console.info()
window.alert()

3.2 函数

函数

function f(){/*函数体*/}
不用写类型（形参，返回值）

/*函数*/
function ff(param) {
    console.info('得到的参数：'+param)
    return 998
}

/*函数类型变量*/
let k=ff  
k('aa')

/*匿名函数*/
let gg=function(){
	console.info('这是匿名函数')
}

function ff(param) {
    console.info('函数ff得到的参数：'+param)
    return 998
}
/*把函数当作参数传递*/
function pp(fp){
	fp('函数当做参数传递')
}
pp(ff)

/*把匿名函数当作参数传递*/
pp(function(a){
	console.info('匿名函数的形参：'+a)
})
/*匿名函数另一种写法*/
pp((a)=>{
	console.info('匿名函数的形参：'+a)
})

3.3 数组

数组

一个数组可有不同类型元素共存
可以动态增加

let arr=[23,"Hello",false,undefined,NaN]
/*会自动扩容*/
arr[15] = "kkk";
/* 插入一个元素到数组后面 */
arr.push(100);
/* 从数组后面弹出一个元素 */
arr.pop();

fill方法

arr=[1,2,3,4,5]
/*将数组中的元素全变为1*/
arr.fill(1)
console.log(arr)
/*将下标[1,3)处的元素变为99*/
arr.fill(99,1,3)
console.log(arr);

map方法

arr = [1, 2, 3, 4, 5];
console.log(arr);
/*将数组中的数字全变为字符*/
console.log(arr.map(i => i + ""));
/*将数组中的数字全变为字符，后面加"?"*/
console.log(arr.map(i => i + "?"));

3.4 对象

/*创建对象*/
let a = new Object();
let b = {
  name: "bname",
  age: 18,
  setName(name) {
    this.name = name;
  },
  f: function () {
    console.log("f function called");
  },
};
/*动态添加对象*/
a.name = "aname";
a.age = 288;
a.setName = function (name) {
  this.name = name;
};
a.setName("哦哦哦");
/*若这样写，则this不会绑定到a类的对象*/
a.setName = (name) => {
  this.name = name;
};

console.log(a);
console.log(b);

3.5 事件（js与html）

常用事件

onclick：点击事件
oninput：内容输入事件
onsubmit：内容输出事件

Dom对象

把整个html界面映射为js对象，从而可在js中操作html中的元素

getElementById()：通过id获取元素
- 之后可调用元素的属性，修改元素

【例子】通过按键改变页面元素值
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>我的网页</title>
    <style>
        body {
            text-align: center;
        }
    </style>
    <script>
        function login_click() {
            document.getElementById("login-state").textContent = "已登录";
        }
        function logout_click() {
            document.getElementById("login-state").textContent = "未登录";
        }
    </script>
</head>

<body>
    <h1>登录到xx系统</h1>
    <p id="login-state">未登录</p>
    <form>
        <div>
            <input type="button" id="login" value="登录" onclick="login_click()" />
            <input type="button" id="logout" value="注销" onclick="logout_click()" />
        </div>

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

【例子】输入字符长度在[6,20]时，正常，否则边框变为红色
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>我的网页</title>
    <style>
        body {
            text-align: center;
        }
        .illegal-pwd {
            border: red 1px solid !important;
            box-shadow: 0 0 5px red;
        }
    </style>
    <script>
        function checkIllegal(e) {
            if (e.value.length <= 20 && e.value.length >= 6) {
                e.removeAttribute("class");
            }
            else {
                e.setAttribute("class", "illegal-pwd");
            }
        }
    </script>
</head>

<body>
    <form>
        <div>
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" oninput="checkIllegal(this)"" required>
            <label for=" password">密码:</label>
            <input type="password" id="password" name="password" required>
            <input type="submit" value="提交" ">
        </div>
    </form>
</body>
</html>

3.6 XHR请求（js与后端）

通过XMLHttpRequest对象，向服务器发送请求

一个发送请求的函数

function httpRequest() {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://www.baidu.com');
    xhr.send();
}

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>我的网页</title>
    <style>
        body {
            text-align: center;
        }

        button {
            width: 100px;
            height: 50px;
            margin: 10px;
            font-size: large;
        }
    </style>
    <script>
        function httpRequest() {
            let xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://www.baidu.com');
            xhr.send();
        }
    </script>
</head>

<body>
    <h1>XHR</h1>
    <hr>
    <div>
        <button style="margin-top: 20px;" onclick="httpRequest()">请求</button>
    </div>
</body>

</html>