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>

参考

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/796895.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从三个维度看,你的企业是否需要引入精益管理咨询?

在快速变化的商业环境中&#xff0c;企业不断寻求提升自身运营效率和竞争力的方法。其中&#xff0c;精益管理作为一种追求卓越、消除浪费的管理理念&#xff0c;被越来越多的企业所认可。但是&#xff0c;如何判断自己的组织是否需要进行精益企业管理咨询呢&#xff1f;天行健…

【漏洞复现】通天星CMSV6车载视频监控平台FTP匿名访问

Nx01 产品简介 通天星车载视频监控平台软件拥有多种语言版本&#xff0c;应用于公交车车载视频监控、校车车载视频监控、大巴车车载视频监控、物流车载监控、油品运输车载监控等公共交通上。 Nx02 漏洞描述 通天星车载视频监控平台安装完毕后会默认开放端口2121作为ftp服务使用…

多语言婚恋交友APP开发的关键成功因素

随着移动互联网的快速发展&#xff0c;多语言婚恋交友APP的需求和发展逐渐成为了一个备受关注的话题。在全球范围内&#xff0c;人们希望通过移动应用来寻找爱情、建立关系和拓展社交圈子&#xff0c;因此开发一款具有全球影响力的多语言婚恋交友APP成为了许多开发者的目标。针…

Java实现Excel百万级数据的导入(约30s完成)

前言 在遇到大数据量excel&#xff0c;50MB大小或数百万级别的数据读取时&#xff0c;使用常用的POI容易导致读取时内存溢出或者cpu飙升。 本文讨论的是针对xlsx格式的excel文件上传&#xff0c;采用com.monitorjbl.xlsx.StreamingReader 。 什么是StreamReader? StreamReader…

开源低代码平台概况和说明推荐

开源低代码平台是一类允许开发者通过图形化界面和预构建的代码块&#xff0c;而非传统的手动编程方式&#xff0c;来创建应用程序的工具。这些平台通常提供了丰富的功能和特性&#xff0c;帮助开发者更加高效地进行应用开发。 开源低代码平台的概况可以总结为以下几点&#xf…

【C++】背包问题

目录 背包问题01 背包背包不装满问题背包必须满问题 完全背包 背包问题 背包问题属于动态规划的一类题型 01 背包 背包不装满问题 背包必须满问题 #include <iostream> using namespace std; const int N 1010; #include <vector> int main() {int n , V;int v[…

【Ambari】Ansible自动化部署大数据集群

目录 一&#xff0e;版本说明和介绍信息 1.1 大数据组件版本 1.2 Apache Components 1.3 Databases支持版本 二&#xff0e;安装包上传和说明 三&#xff0e;服务器基础环境配置 3.1global配置修改 3.2主机名映射配置 3.3免密用户名密码配置 3.4 ansible安装 四. 安…

2024.4.1-[作业记录]-day06-认识 CSS(三大特性、引入方式)

个人主页&#xff1a;学习前端的小z 个人专栏&#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结&#xff0c;欢迎大家在评论区交流讨论&#xff01; day06-认识 CSS(三大特性、引入方式) 文章目录 day06-认识 CSS(三大特性、引入方式)作业…

实践笔记-03 docker buildx 使用

docker buildx 使用 1.启用docker buildx2.启用 binfmt_misc3.从默认的构建器切换到多平台构建器3.1创建buildkitd.toml文件&#xff08;私有仓库是http没有证书的情况下&#xff0c;需要配置&#xff09;3.2创建构建器并使用新创建的构建器 4.构建多架构镜像并推送至harbor仓库…

JVM—对象的创建流程与内存分配

JVM—对象的创建流程与内存分配 创建流程 对象创建的流程图如下&#xff1a; 对象的内存分配方式 内存分配的方式有两种&#xff1a; 指针碰撞&#xff08;Bump the Pointer&#xff09;空闲列表&#xff08;Free List&#xff09; 分配方式说明收集器指针碰撞&#xff08…

三防笔记本丨加固笔记本丨三防笔记本电脑赋能车辆检修

随着汽车数量的不断增加和交通运输行业的发展&#xff0c;车辆检修行业成为了保障交通安全和延长车辆寿命的重要领域。在车辆检修过程中&#xff0c;需要使用各种工具和设备来进行检测、维修和保养&#xff0c;而信息化技术的应用正逐渐渗透到这一行业中&#xff0c;为检修工作…

51单片机实验03-定时器T0来实现流水灯从左到右再从右到左

目录 一、实验目的 二、实验说明 1、51单片机有两个16位内部计数器/定时器&#xff08;C/T&#xff0c; Counter/Timer&#xff09;。 2、模式寄存器TMOD 1) M1M0工作模式控制位&#xff1b; 2) C/T定时器或计数器选择位&#xff1a; 3&#xff09;GATE定时器/计数器运行…

超声波清洗机哪家强?超声波清洗机排行榜!最强超声波清洗机推荐

眼镜作为日常生活中不可或缺的用品&#xff0c;对于很多人来说是必备的。然而&#xff0c;随着使用时间的增长&#xff0c;眼镜表面往往会沾染灰尘、污垢等&#xff0c;这不仅影响了镜片的透光性&#xff0c;也可能影响到使用者的视力和舒适度。因此&#xff0c;清洁眼镜成了一…

2_6.Linux高级存储管理

##1.逻辑卷## pv ##物理卷 被处理过的物理分区 pe ##物理扩展 设定存储最小单元 vg ##物理卷组 捆绑pv到一个组中 lv ##逻辑卷 分配最终的使用设备 监控建立过程&#xff1a; watch -n 1 "pvs;echo ;vgs;echo ;lvs;echo ;df -h /weixindata" &#xff08;1&#xf…

wheeltec轮趣ROS教育机器人的网络连接

一、术语解析 宿主机&#xff1a;宿主机是指物理主机&#xff0c;比如用于开发测试的笔记本电脑和台式机电脑。 虚拟机&#xff1a;虚拟机是指安装在宿主机的VMware&#xff0c;推荐在宿主机上安装虚拟机&#xff0c;官方提供虚拟机的镜像以及配套的开发环境。 ROS主机&…

DC/DC1A30V高效同步降压转换器H4010

DC/DC 1A30V高效同步降压转换器是一种高频、同步、整流、降压、开关模式转换器&#xff0c;内置功率MOSFET。它可以在宽输入电源范围内实现1.5A峰值输出电流&#xff0c;并具有出色的负载和线路调节性能。此外&#xff0c;该转换器需要最少数量的现成外部元件&#xff0c;并采用…

微信聊天记录恢复只需简单3招,快速找回聊天内容!

各种社交软件早已深深融入我们的日常生活&#xff0c;无论是与亲朋好友的闲聊&#xff0c;还是与同事伙伴的工作沟通&#xff0c;都离不开它们的陪伴。然而&#xff0c;有时由于误操作、系统更新或手机故障等原因&#xff0c;我们可能会不小心删除了重要的聊天记录&#xff0c;…

PCI总线学习笔记:读写篇

前言 最近在写E1000网卡的驱动&#xff0c;这其中涉及到了PCI总线的相关内容。但是网上大部分关于PCI的文章都只局限在概念上的描述&#xff0c;并没有给出具体的例子来解释。这其实也是情理之中的&#xff0c;因为PCI总线规范就像是一个抽象的接口&#xff0c;其具体怎么实现…

C语言之自定义类型联合和枚举

目录 前言 一&#xff1a;联合体&#xff08;共用体&#xff09;union 1.联合体类型的声明 2.联合体的特点 3.联合体大小的计算 4.联合体判断机器的大小端 二&#xff1a;枚举enum 1.概念 2.枚举的优点 3.枚举的使用 接下来的日子会顺顺利利&#xff0c;万事胜意…

C++ 类和对象(中篇)

类的6个默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空类。空类中什么都没有吗&#xff1f;并不是的&#xff0c;任何一个类在我们不写的情 况下&#xff0c;都会自动生成下面6个默认成员函数。 构造函数&#xff1a; 定义&#xff1a;构造函数是一个特殊的成员…