JavaWeb前端基础（HTML CSS JavaScript）

tao3556672024-04-07 13:34

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

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除号
html 复制代码 
<!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
html 复制代码 
<!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

制作一个登录界面

html 复制代码 
<!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(){/*函数体*/}
  • 不用写类型（形参，返回值）
javascript 复制代码 
/*函数*/
function ff(param) {
    console.info('得到的参数：'+param)
    return 998
}

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

/*匿名函数*/
let gg=function(){
	console.info('这是匿名函数')
}
javascript 复制代码 
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 数组

数组

  • 一个数组可有不同类型元素共存
  • 可以动态增加
javascript 复制代码 
let arr=[23,"Hello",false,undefined,NaN]
/*会自动扩容*/
arr[15] = "kkk";
/* 插入一个元素到数组后面 */
arr.push(100);
/* 从数组后面弹出一个元素 */
arr.pop();

fill方法

javascript 复制代码 
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方法

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

3.4 对象

javascript 复制代码 
/*创建对象*/
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获取元素
    • 之后可调用元素的属性，修改元素

【例子】通过按键改变页面元素值

html 复制代码 
<!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]时，正常，否则边框变为红色

html 复制代码 
<!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对象，向服务器发送请求

一个发送请求的函数

javascript 复制代码 
function httpRequest() {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://www.baidu.com');
    xhr.send();
}
html 复制代码 
<!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>

参考

https://www.itbaima.cn/document/k7dfwua3bsezvw9q

相关推荐
鹧鸪yy1 分钟前
认识Node.js及其与 Nginx 前端项目区别
前端·nginx·node.js
跟橙姐学代码2 分钟前
学Python必须迈过的一道坎：类和对象到底是什么鬼？
前端·python
汪子熙4 分钟前
浏览器里出现 .angular/cache/19.2.6/abap_test/vite/deps 路径究竟说明了什么
前端·javascript·面试
Benzenene!5 分钟前
让Chrome信任自签名证书
前端·chrome
yangholmes88885 分钟前
如何在 web 应用中使用 GDAL （二）
前端·webassembly
jacy7 分钟前
图片大图预览就该这样做
前端
林太白9 分钟前
Nuxt3 功能篇
前端·javascript·后端
YuJie11 分钟前
webSocket Manager
前端·javascript
Mapmost26 分钟前
Mapmost SDK for UE5 内核升级，三维场景渲染效果飙升！
前端
Mapmost28 分钟前
重磅升级丨Mapmost全面兼容3DTiles 1.1，3DGS量测精度跃升至亚米级！
前端·vue.js·three.js
热门推荐
01UV安装并设置国内源02DeepSeek更新！速览DeepSeek V3.1新特性03Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code04KGG转MP3工具|非KGM文件|解密音频05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接06【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）072025最新国内服务器可用docker源仓库地址大全（2025年8月更新）08Spring 调试终于不再痛苦了09TRAE 规则（Rules）配置指南：个人习惯、团队规范与最佳实践10Claude Code VSCode集成开发指南：AI编程助手完整配置