当前位置：首页 > news >正文

【JavaEE】(11) 前端基础三件套

news 2025/8/11 13:19:40

一、用到的工具

系统自带的文本编辑器，整篇内容样式一样，不好看。可以下载一种文本编辑器，比如 Notepad++ 免费的（会有高亮，方便看）：

还有更强大的编辑器 VS Code，样子跟集成工具一样，但是没有上面说的文本编辑器轻量。编辑前端代码，可以安装的插件：view-in-browser（编辑器右键打开 HTML 页面，不用每次去点 html 文件用浏览器运行）、Live Server（保存代码后会自动刷新页面，不用在浏览器手动刷新）。

调试工具，浏览器按：Fn+F12 或右键检查，html 阶段看元素、选中元素可以在控制台调试 css，直接在上面修改，页面符合预期后再改代码。JS 阶段观察控制台 console.log 打印的信息。

可以直接在控制台改代码调试，但是不能修改服务器上的代码。

二、HTML（骨）

1、什么是 HTML

超文本（超过文本，内容可以是视频、图片、音频、链接等）标记语言（用不同标签来包含不同类型的内容）。

标签通常是一对，少部分单个，开始标签中可以带属性。比如 id：标识该标签唯一身份。

标签层次结构，构成 Dom 树，每个标签就是一个元素：

在 VS Code 里创建一个 html 文件，!+Enter，自动生成 html 结构：

2、常用标签

（1）标题标签

h1~h6，数字越大，字号越小：

    <h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>

（2）段落 p、换行 br、空格

HTML 中，段落（<p>内容</p>）、换行（<br/>）、空格（转义字符&nbsp）全部失效。

根据浏览器宽度排版：

段落跟换行的间隙也不一样：

网上查 html 转义字符表。

（3）图片标签 img

<img src="https://pica.zhimg.com/v2-b9baddb53f230dfbabb4f1f62f4c4c9c_r.jpg?source=1940ef5c" alt="显示失败" title="小猫咪" width="500">

属性：

图片来源 src：可以是本地绝对路径、相对路径、网络路径（在网络图片上右键，复制图片链接）。
alt：图片显示失败时，显示的默认文字。
width、height：宽、高。一般只设置宽，高度自适应原比例。

title：鼠标放到图片上，浏览器显示的文字。

（4）超链接

点击超链接会跳转页面。

     <a href="./text.rar">下载文件</a><a href="https://sogou.com/" target="_blank">打开搜狗</a>

属性：

href：跳转到的资源的路径。可以是本地绝对路径、相对路径、网络路径、#（占位作用，不会跳转）。如果资源是压缩包，则会下载。

target：跳转方式。_self 在当前页面跳转（默认）；_blank 在新的页面跳转。

（5）表格标签

     <table border="1" cellspacing="0" width="200" height="100" cellpadding="15"><tr><td rowspan="2">11</td><td colspan="2">12</td><!-- <td>13</td> --></tr><tr><!-- <td>21</td> --><td>22</td><td>23</td></tr></table>

标签：table（表）、tr（行）、td（单元格）。

表属性：

border：表格边框线的粗细，空表示没有，1 表示 1 px。

cellspacing：单元格之间的间隙。

width、height：宽高。

cellpadding：单元格内容到边框的距离。

单元格属性：

rowspan、colspan：合并行、宽。

（6）表单标签

可以输入数据的标签。

表单控件：input 标签

属性：

type：选哪种控件。
name：给控件起名字，相同名字的空间为一组（对于单选、多选控件很重要）。
value：控件的默认输入值。
checked：默认被选中（单选、多选控件）。

各种控件：

     文本框 <input type="text"> <br/>密码框 <input type="password"> <br/><!-- 同 name 的为一组，才能实现只能点击一个 --><!-- id 标识唯一的标签，label 的 for 属性可绑定到某个标签，实现点击文字也能选择 -->单选 <input type="radio" name="gender" id="gender1"> <label for="gender1">男性</label><input type="radio" name="gender" id="gender2"> <label for="gender2">女性</label> <br/>多选框 <input type="checkbox" name="hobby"> 音乐<input type="checkbox" name="hobby"> 画画<input type="checkbox" name="hobby"> 打篮球<input type="checkbox" name="hobby"> 跳舞 <br/><!-- 普通按钮按了没动作，需搭配JS，后面再学 --><input type="button" value="普通按钮"><button>普通按钮</button><input type="submit" value="提交">

表单域：form 标签

把 form 标签内获取到的数据，用什么方式（method，http 的方法）提交到哪个页面（action）。

表单控件的 name 就是请求字符串中键值对的键，而值就是 value 默认值或者输入值。传输的数据，最好是 ascii 码表里的字符，避免前后端多余的编码解码处理。

    <!-- 表单标签 --><form action="demo.html" method="get">文本框 <input type="text" name="userName"> <br/>密码框 <input type="password" name="password"> <br/><!-- 同 name 的为一组，才能实现只能点击一个 --><!-- id 标识唯一的标签，label 的 for 属性可绑定到某个标签，实现点击文字也能选择 -->单选 <input type="radio" name="gender" id="gender1" value="0"> <label for="gender1">男性</label><input type="radio" name="gender" id="gender2" value="1"> <label for="gender2">女性</label> <br/>多选框 <input type="checkbox" name="hobby" value="0"> 音乐<input type="checkbox" name="hobby" value="1"> 画画<input type="checkbox" name="hobby" value="2"> 打篮球<input type="checkbox" name="hobby" value="3"> 跳舞 <br/><input type="submit" name="submit" value="submit"></form><!-- 普通按钮按了没动作，需搭配JS，后面再学 --><input type="button" name="button" value="普通按钮"><button>普通按钮</button>

textarea 标签

标签的内容，就是标签的默认值；rows、cols 设置行、列。

    <form action="demo.html" method="get"><textarea name="introduce" rows="10" cols="30">hello!</textarea> <br/><input type="submit" name="submit" value="submit"></form>

select 标签

selected 默认选中。

    <select name="city"><option value="0">北京</option><option value="1">上海</option><option value="2" selected="selected">广州</option><option value="3">深圳</option></select>

（7）无语义标签 div、span

就是用来装一个布局内所有标签的盒子，方便同一设置样式、动作。div 独占一行，span 不换行。

（8）列表标签

ul：无序列表。一般用这个

ol：有序列表。一般不用，顺序自己打

li：列表中一行。

    <ul><li>111</li><li>222</li><li>333</li></ul><ol><li>111</li><li>222</li><li>333</li></ol>

3、综合练习（用户注册界面）

代码：

<body><div><h1>用户注册</h1></div><div><table><tr><td>用户名</td><td><input type="text" name="userName" placeholder="请输入用户名"></td></tr><tr><td>手机号</td><td><input type="text" name="phone" placeholder="请输入手机号"></td></tr><tr><td>密码</td><td><input type="password" name="password" placeholder="请输入密码"></td></tr></table></div><div><input type="button" value="注册"> <span>已有帐号</span> <a href="#" target="_blank">登录</a></div>
</body>

页面：

三、CSS（皮）

CSS 基本格式：修饰谁+哪些修饰。每条修饰格式：键:值;

1、三种引入方式

行内引入：标签内使用。只修饰某一个标签，修饰不能太复杂。
内部引入：定义 style 标签，一般放在 head 标签中。每个 html 页面都需要定义一个，内容容易重复。
外部引入：定义 link 标签，一般放在 head 标签中。html 与 css 分离，企业用的方式。

2、选择器

用于选择修饰哪些元素。

（1）标签选择器

选择某种标签。语法：标签名 {}

修饰全部 div：

因为标签 a 有默认样式，就近原则，div 的 css 没生效。加上 a 的 css 即可。

（2）类选择器

选择某一类。标签属性中，加上 class 属性，同 class 的为同一类。语法：.类名 {}

只修饰部分 div：

（3）id 选择器

选择某个 id 的标签。标签属性中，加上唯一标识 id。语法：#id值 {}。

只选择某一个 div：

（4）复合选择器

以上三种的复合。>=2

ul>li*3 快捷键，ul 里包 3 个 li。

选择 ul 里的 li（如果直接选择 li，ol 的 li 也会被选择。如果把 ul 里的 li 加上同一个 class，又太麻烦）：（ul 与 li 是父子，祖先后代关系都行）

选择 ul 里的 css1 类：

选择 ol 标签和 a 标签：（并集）

如果只是 ol，a 因为有默认样式（就近原则），不会被修饰。

选择所有是 css1 类的 li 标签：（交集，两个选择器紧挨着）

（5）通配符选择器

选择所有标签。适用场景：不同浏览器有不同的默认样式，比如边界距离。为了不影响后续添加的 css，通常会把浏览器默认样式清空（比如化妆师化妆前，会卸妆）。语法：* {}

比如，浏览器页面的 body 有默认的 margin：

3、常用 css 样式

这一部分是怎么修饰。最重要的是会查网上的资料，比如：

MDN Web Docs （MDN Web Docs）

（1）color

英文字母、十进制 rgb、十六进制 rgb、rgba（带透明色）：

（2）font

复合属性。

font-style：字体。可以设置多个字体，从左到右优先级，用户系统有哪个就用哪个。
font-size：常用的是 px 单位，静态的，在每个浏览器上都不会变。em，相对于父元素的大小。

（3）border

复合属性，可以同时设置关于 border 的多个属性（顺序不定）。例如：border: 1px solid purple;

也可以单独设置：

border-color
border-style：边框的样式。solid，实线。默认是 none，不显示。也符合下述的上下左右。
border-width：边框粗细。也是符合属性，细分上下左右。如果设置的 1 个值，表示四边相同。2 个值，上下、左右。三个值，上、左右、下。四个值，上、右、下、左（顺时针）。

（4）width、height

块级元素（独占一行的元素，如 div、p、h1~h6）才能设置。行内元素（如 span、a、input）不能。

display 可修改显示模式：

block：行内改块级。
inline：块级改行内。

（5）margin、padding

这俩都是相对距离。对于某元素，如果另一个元素相对它在里面，它们的距离就是 padding；如果另一个元素相对它在外面，它们的距离就是 margin。

同样，这俩值，也是复合属性，可以设置 1~4 个值。

四、JavaScript（魂）

JavaScript 是个脚本语言，不用像 Java 一样编译，可以直接插入 HTML。它跟 Java 没任何关系，只不过参考了 Java 的一些语法，叫 JavaScript 是蹭热度。

1、基础语法

（1）变量声明

var：过时了，不管。
let：声明变量。
const：声明常量。

变量命名规则跟 Java 一样。+ 可以拼接字符串。\n 表示换行。

（2）变量类型

number（数字）、string（字符串，单引号、双引号都可）、boolean（true、false）、undefined（未初始化的变量值）。typeof 返回变量类型。

JavaScript 是动态弱类型语言（变量声明不用固定类型，即动态。不同类型的变量之间可以互相转换，即弱类型）；Java 是静态强类型语言。

consle.log() 打印数据到浏览器调试控制台。

（3）运算符

重点是 ==、=== （!=、!==）的区别，还有除号 / 。

==：只比较内容。
===：比较内容和类型。
/：不整除。

（4）JavaScript 对象

这个对象是指结构化数据类型，不是指 Java 中的对象。

数组

定义：new 或者 [ ]。里面的值类型可以不同。

查、增、改：下标访问，从 0 开始。

删：splice(x,y)，从下标 x 开始删 y 个。

数组下标可以是非法值，像字典一样用：

函数

两种定义方式：类似 Java 的；匿名函数。

重点关注函数的形参：实参比形参多，多的部分不参加运算；实参比形参少，少的形参为 undefined。number+undefined=NAN（Not A Number） string+undefined=拼接

对象

跟 Java 的对象概念差不多，使用时要 new。

2、三种引入方式

CSS 是元素修饰，加载网络时，让用户提前看到画面能提升体验感，所以 CSS 引入一般放到 head。而 JS 是用户与网页的交互动作，可以暂缓放到外观之后，所以 JS 一般放到 body 的末尾。

3、JQuery

就是 JavaScript 的框架，现在已经过时不用，但是它作为经典框架进行入门教学。

（1）引入依赖

下载 JQuery CDN：

右键，打开链接，右键，另存为：

外部引入 JQuery：

（2）语法

选择什么元素，对元素执行了什么动作，这些动作触发了什么操作。

$(选择器).什么动作(function(){触发什么操作
})

执行 JQuery 代码前，要加：

$(document).ready(function(){JQuery code
})// 可简写成
$(function(){JQuery code
})

防止页面（document）没加载完毕，就执行动作。

（3）选择器

跟 CSS 差不多，选择哪些元素：

（2）事件

对元素做的动作。

更多事件查文档。

（3）操作元素

操作元素的值

获取：没参数

设置：有参数

操作元素的属性

获取：attr("属性")

设置：attr("属性", "内容")

操作元素的 css 属性

获取：css("css 属性")

设置：css("css 属性", "css 值")

添加元素

删除元素

remove()：删除被选元素及子元素。
empty()：删除备选元素的子元素。

五、综合实践

1、猜数字

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>猜数字游戏</title>
</head>
<body><div><button id="reset">重新开始一局游戏</button></div><div><span>请输入要猜的数字：</span><input type="text" id="guess"><button id="buttonGuess">猜</button></div><div><span>已经猜的次数：</span><span id="count">0</span></div><div><span>结果：</span><span id="result"></span></div><script src="jquery-3.7.1.min.js"></script><script>$(function() {// 每局生成一个随机数let num = Math.floor(Math.random()*100)+1;console.log(num);let count = 0;// 点击 “猜”，执行比较逻辑$("#buttonGuess").click(function() {// 每猜一次，设置计数count++; $("#count").text(count);// 获取输入值，比较let guess = $("#guess").val();if(guess < num) {$("#result").text("猜小了");$("#result").css("color", "red");}else if(guess > num) {$("#result").text("猜大了");$("#result").css("color", "red");} else {$("#result").text("猜对了");$("#result").css("color", "green");}})// 点击重新开始，重置$("#reset").click(function() {// 重新生成随机数num = Math.floor(Math.random()*100)+1;console.log(num);// 输入清空$("#guess").val("");// 结果清空$("#result").text("");// 猜的次数置 0count = 0;$("#count").text(count);})})</script>
</body>
</html>

2、表白墙

直接导入 html、css，实现 js。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>留言板</title><style>.container {width: 350px;height: 300px;margin: 0 auto;/* border: 1px black solid; */text-align: center;}.grey {color: grey;}.container .row {width: 350px;height: 40px;display: flex;justify-content: space-between;align-items: center;}.container .row input {width: 260px;height: 30px;}#submit {width: 350px;height: 40px;background-color: orange;color: white;border: none;margin: 10px;border-radius: 5px;font-size: 20px;}</style>
</head><body><div class="container"><h1>留言板</h1><p class="grey">输入后点击提交, 会将信息显示下方空白处</p><div class="row"><span>谁:</span> <input type="text" name="" id="from"></div><div class="row"><span>对谁:</span> <input type="text" name="" id="to"></div><div class="row"><span>说什么:</span> <input type="text" name="" id="say"></div><input type="button" value="提交" id="submit" onclick="submit()"><!-- <div>A 对 B 说: hello</div> --></div><script src="jquery-3.7.1.min.js"></script><script>// 实现 submit 的操作function submit() {// 获取输入值let from = $("#from").val();let to =  $("#to").val();let say = $("#say").val();// TODO，判断输入是否合法if(from == "" || to == "" || say == "") {return;}// 拼接let html = "<div>" + from +" 对 " + to +" 说: " + say + "</div>"// 添加元素$(".container").append(html);// 清空输入值$(":input").val("");}</script>
</body></html>

查看全文

http://www.xdnf.cn/news/1265761.html