JavaEE|前端集合

HTML

什么是HTML

HTML是一种超文本标记语言

超文本: 比文本要强大，通过链接和交互式方式来组织和呈现信息的文本形式。不仅仅有文本还可

能包含图片，音频等等

标记语言：由标签构成的语言

以下方代码为例：（此处的代码是在VS Code编辑器上进行编写）

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>
</body>
</html>

当把这么一段代码保存后用浏览器打开后，显示的结果如下：

上面代码中的<h1><h2><h3>就是标签

HTML的标签

HTML 代码是由 "标签" 构成的

html 复制代码

<h3>我是三级标题</h3>

对于这样的一段代码：

标签名 (body) 放到 < > 中
大部分标签成对出现，少数标签只有开始标签
开始标签和结束标签之间, 写的是标签的内容
开始标签中可能会带有 "属性"，id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码）

HTML 文件基本结构

html 复制代码

<html>
     <head>
         <title>第一个页面</title>
     </head>
     <body>
         hello world
     </body>
</html>

html标签是整个html文件的根标签
head标签书写页面的属性
title标签中写的是页面的标题
body标签中写的是页面上的显示内容

标签的层次结构

html和head是父子关系

head和title是父子关系

head和body是兄弟关系

HTML常见的标签

标题标签

有六个，从h1到h6，数字越大则字体越小

html 复制代码

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

段落标签：p

在HTML中，直接进行段落，换行符或者空格都会失效，则需要进行专门的标签进行段落分配

html 复制代码

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero quam, officiis hic commodi non dolorem, maxime soluta, 
        voluptas cum deleniti sit nemo corrupti. Expedita odio quasi, quo molestiae quae eveniet.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero quam, officiis hic commodi non dolorem, maxime soluta, 
        voluptas cum deleniti sit nemo corrupti. Expedita odio quasi, quo molestiae quae eveniet.</p>

效果如下图：

如果当不进行段落分配时

html 复制代码

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero quam, officiis hic commodi non dolorem, maxime soluta,  voluptas cum deleniti sit nemo corrupti. Expedita odio quasi, quo molestiae quae eveniet.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero quam, officiis hic commodi non dolorem, maxime soluta, voluptas cum deleniti sit nemo corrupti. Expedita odio quasi, quo molestiae quae eveniet.

效果如下：

换行标签：br

想要换行的话，可以通过<br/>标签来实现

html 复制代码

    这是一个br标签<br/>
    这是一个br标签<br/>
    这是一个br标签<br/>

效果如下图：

图片标签：img

img标签必须带有src属性，表示图片的路径

html 复制代码

 <img src="rose.jpg">

这里的路径既可以是相对路径也可以是绝对路径

html 复制代码

<img src="D:\code\vs code\前端代码\rose.jpg" alt="这是一个图片">

alt表示的是标签属性

效果如图：

img标签中其他的属性

width/height：控制宽度和高度

broder：边框

html 复制代码

<img src="rose.jpg" alt="这是一个图片" width="500px" height="800px" broder="5px">

效果如下图：

注意：

属性可以有多个，不能写到标签之前
属性之间用空格分隔，可以是多个空格也可以是换行
属性之间不分先后顺序
属性使用"键值对"的格式表示

超链接：a

href：必须具备，表示点击后具体的跳转页面

target: 打开方式默认是 _self，如果是 _blank 则用新的标签页打开

html 复制代码

<a href="https://www.baidu.com/">test1</a>

当点击test1会跳转到百度的页面，但此时原页面会被占据，但把target设为"_blank"后，原页面不

会在被占据，会重新开辟出一个新的页面

Go 复制代码

<a href="https://www.baidu.com/" target="_blank">test1</a>

表格标签

table标签：表示整个表格

tr：表示表格的一行

td：表示一个单元格

thread：表格的头部区域

tbody：表格的主体区域

示意图如下：

代码示例：

html 复制代码

<table style="width: 500px; height: 400px;" border="1px red" cellspacing="0">
        <tr>
            <td colspan="2">aaa</td>
        </tr>
        <tr>
            <td>ccc</td>
            <td rowspan="3">ddd</td>
        </tr>
        <tr>
            <td>eee</td>
        </tr>
        <tr>
            <td>ggg</td>
        </tr>
     </table>

这里的colspan是控制行的单元格，rowspan是控制列的单元格

效果如下图：

表单标签

表单是让用户输入信息的重要途径

表单域: 包含表单元素的区域，重点是 form 标签

表单控件: 输入框, 提交按钮等，重点是 input 标签

这一个大框是表单域，表单控件是小框

form 标签

描述了要把数据按照什么方式，提交到哪个页面中

html 复制代码

<form action="test.html">
      [form 的内容]
</form>

input 标签

各种输入控件，单行文本框，按钮，单选框，复选框

type(必须有)取值种类很多，button，checkbox，text，file，image，password，radio等

name: 给 input 起了个名字，尤其是对于单选按钮，具有相同的 name 才能多选一.

value: input 中的默认值.

checked: 默认被选中(用于单选按钮和多选按钮)

代码如下

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width, initial-scale=1.0">
    <title>表单练习</title>
</head>
<body>
    <form action="test1.html" method="get">
        用户名:<input type="text" name="username" size="30"><br/>
        密码:<input type="password" name="password"><br/>
        性别:<input type="radio" name="gender" id="gender1" > <label for="gender1">男</label>
        <input type="radio" name="gender" id="gender2"> <label for="gender2">女</label>
        <input type="radio" name="gender" id="gender3"> <label for="gender3">保密</label><br/>
        兴趣:<input type="checkbox" name="boddy" >篮球
            <input type="checkbox" name="boddy" >足球
            <input type="checkbox" name="boddy" >排球
            <input type="checkbox" name="boddy" >乒乓球<br/>
        </form>
</body>
</html>

效果如下：

select标签

下拉菜单

html 复制代码

        专业:<select>
            <option value="1">计算机科学与技术</option>
            <option value="2">软件工程</option>
            <option value="3">物联网</option>
            <option value="4">人工智能</option>

option 中定义selected="selected" 表示默认选中

textarea标签

html 复制代码

个人描述:<textarea row="10" col="50"></textarea>

无语义标签: div和span

div和span就是两个盒子用于网页布局

div是独占一行的，是一个大盒子

span 不独占一行，是一个小盒子

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>我是一个</div>
    <div>我是一个</div>
    <div>我是一个</div>
    <div>我是一个</div>
    <span>我是一个span</span>
    <span>我是一个span</span>
    <span>我是一个span</span>
    <span>我是一个span</span>
</body>
</html>

标签分类

块级标签：可以独占一行，例如：h1-h6，p，div.....

行级标签：不独占一行，例如：a，input，span......

综合练习

实现一个用户注册的页面

实现一个用户注册的页面，可以使用表格标签，用各种 input 标签实现页面中的输入控件，同时用

div和span将其分如不同盒子中去

代码如下

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>用户注册</h1>
    <div id="div1">用户注册</div>
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" placeholder="请输入用户名"></td>
        </tr>
        <tr>
            <td>手机号</td>
            <td><input type="text" placeholder="请输入手机号"</td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="text" placeholder="请输入密码"</td>
        </tr>
        </table>
        <div>
            <button>注册</button> <span>已有账号?</span> <a href="#">登录</a>
        </div>
    </body>
</html>

效果图如下

CSS

什么是CSS

CSS是层叠样式表，用于控制页面的样式，能实现美化页面的效果.

基本语法

选择器 + {一条/N条声明}

选择器决定针对谁修改(找谁)

声明决定修改啥(干啥)

声明的属性是键值对使用，区分键值对,

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color:red;
        }
    </style>
</head>
<body>
    <div>我是一个div</div>
    <div>我是一个div</div>
    <div>我是一个div</div>
    <div>我是一个div</div>
</body>
</html>

引入方式

CSS有3种引入方式语法如下表格所示

|------|-----------------------------|----------------------------------------------------------------------------|
| 引入方式 | 语法描述 | 示例 |
| 行内样式 | 在标签内使用style属性，属性值是css属性键值对 | |
| 内部样式 | 定义<style>标签，在标签内部定义css样式 | |
| 外部样式 | 定义标签，通过href属性引入外部css 文件 | |

CSS选择器

CSS 选择器的主要功能就是选中页面指定的标签元素，选中了元素才可以设置元素的属性

CSS选择器主要分以下几种

标签选择器
class选择器
id选择器
复合选择器
通配符选择器

标签选择器

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color:red;
        }
    </style>
</head>
<body>
     <div>我是一个div</div>
    <div>我是一个div2</div>
    <div>我是一个div3</div>
    <span>我是span</span>

</body>
</html>

类选择器

html 复制代码

<style>    
        .font40{
            color: rebeccapurple;
        }
    </style>
</head>
<body>
     <div id="div1" class="font40">我是一个div</div>
    <div id="div2" class="font40">我是一个div2</div>
    <div id="div3"><a href="#">我是一个div3</a></div>
    <span id="div4" class="font40">我是span</span>

</body>

ID选择器

html 复制代码

<style>    
       #div4{
        color:blue;
       }
    </style>
</head>
<body>
     <div id="div1" class="font40">我是一个div</div>
    <div id="div2" class="font40">我是一个div2</div>
    <div id="div3"><a href="#">我是一个div3</a></div>
    <span id="div4" class="font40">我是span</span>

</body>

通配符选择器

html 复制代码

 <style>    
       *{
        color:rebeccapurple;
       }
    </style>
</head>
<body>
     <div id="div1" class="font40">我是一个div</div>
    <div id="div2" class="font40">我是一个div2</div>
    <div id="div3"><a href="#">我是一个div3</a></div>
    <span id="div4" class="font40">我是span</span>

</body>

复合选择器

标签选择器，id选择器，class选择器都是单选择器，符合选择器是由多个单选择器组合而成的，单

选择器可以是标签选择器，id选择器，class选择器。多个选择器之间使用空格分开

ul是无序列表，ol是有序列表

html 复制代码

<ul>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
    </ul>
    <ol>
        <li>有序第一个1</li>
        <li>有序第二个2</li>
        <li>有序第三个3</li>
        <li>有序第四个4</li>
    </ol>

符合选择器代码总体如下：

html 复制代码

       } -->
   <style>    
         ol li a{
            color:green;
         }
    </style>
</head>
<body>
     <div id="div1" class="font40">我是一个div</div>
    <div id="div2" class="font40">我是一个div2</div>
    <div id="div3"><a href="#">我是一个div3</a></div>
    <span id="div4" class="font40">我是span</span>
     <ul>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
    </ul>
    <ol>
        <li>有序第一个1</li>
        <li><a href="#">有序第二个2</a></li>
        <li>有序第三个3</li>
        <li>有序第四个4</li>
    </ol>

</body>

效果如下图：

常用CSS

color

color: 设置字体颜色

颜色有如下几种表达方式

1.英文单词,如red,blue

2.rgb代码的颜色如rgb(255,0,0)

3.十六进制的颜色如#ff00ff

font-size

设置字体大小

border

border: 边框。边框是一个复合属性，可以同时设置多个样式不分前后顺序，浏览器会根据设置的

值自动判断

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 100px;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div id="div1">我是div1</div>
    <div id="div2">我是div2</div>
    <div id="div3">我是div3</div>
    <div id="div4">我是div4</div>
</body>
</html>

broder也有类似复合选择器的属性，可以通过分开设值来确定上，右，下，左的特性

当指定一个值时，该宽度将应用于四条边。
当指定两个值时，第一个宽度应用于顶部和底部，第二个宽度应用于左侧和右侧。
当指定三个值时，第一个宽度应用于顶部，第二个宽度应用于左侧和右侧，第三个宽度应用于底部。
当指定四个值时，这些宽度按照顶部、右侧、底部和左侧的顺序（顺时针）进行应用。

代码如图

html 复制代码

 <style>
        div{
            width: 500px;
            height: 200px;
            border-width: 1px,5px,10px,5px;
            border-style: solid;
            border-color: black;
        }
    </style>
</head>
<body>
    <div id="div1">我是div1</div>
    <div id="div1">我是div1</div>
    <div id="div1">我是div1</div>
    <div id="div1">我是div1</div>
</body>

也可以将四个边分开设置来确定四边的值

padding

padding: 内边距，设置内容和边框之间的距离

内容默认是顶着边框来放置的，用 padding来控制这个距离

html 复制代码

 div{
            border-style: solid;
            border-color: black;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="div1">div</div>
    <div id="div2">我是div2</div>
    <div id="div3">我是div3</div>
    <div id="div4">我是div4</div>
</body>

内容与边框的距离增加

也可以分开写来分配上下左右边框与内容的距离

html 复制代码

 div{
            border-style: solid;
            border-color: black;
            padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 15px;
            padding-left: 5px;
        }

margin

margin: 外边距, 设置元素和元素之间的距离

html 复制代码

 div{
            border-style: solid;
            border-color: black;
            margin: 10px;
        }

margin也是一个复合样式, 可以给四个方向都加上外边距

JavaScript

初识JavaScript

JavaScript (简称 JS)是一个脚本语言，解释型或即时编译型的编程语言

JavaScript和HTML和 CSS 之间的关系

HTML: 网页的结构(骨)

CSS: 网页的表现(皮)

JavaScript: 网页的行为(魂)

引入方式

与CSS相同，有行内样式，内部样式和外部样式三种形式

变量

创建变量JS声明变量主要用let类

注意事项:

JavaScript 是一门动态弱类型语言，变量可以存放不同类型的值(动态)，随着程序的运行, 变量的

类型可能会发生改变. (弱类型)

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    let aa=10;
    console.log(typeof aa);
    aa="aaa";
    console.log(typeof aa);
    aa=true;
    console.log(typeof aa);
    </script>
</body>
</html>

运算符

运算符大体与Java相同，主要是==和===的区别

==，是比较值是否相同；===，是比较数据类型是否相同

html 复制代码

let aa=10;
let bb="10";
console.log("aa==bb:"+(aa==bb));
console.log("aa===bb:"+(aa===bb));

数组

读

使用下标的方式访问数组元素(从 0 开始)

html 复制代码

let arr=[];
let array2=[10,"a",true];
console.log(array2[0]);
console.log(array2[1]);

增

通过下标新增, 或者使用 push 进行追加元素

html 复制代码

     let arr=[];
    let array2=[10,"a",true];
    array2[3] = "b";
    console.log(array2);
    array2[100] = "b";
    console.log(array2.length);

改

通过下标修改

html 复制代码

    let arr=[];
    let array2=[10,"a",true];
    array2[0] = 20;
    console.log(array2);

删

使用 splice 方法删除元素

html 复制代码

    let arr=[];
    let array2=[10,"a",true];
    array2.splice(1, 1);  
    console.log(array2);

函数定义

函数定义与前面的Java也大体相同，存在两种方式

html 复制代码

function sum(x, y){
            console.log(x + y);
        }

html 复制代码

let sum = function(x,y){
            console.log(x + y);
        }

对象定义

读

html 复制代码

        let student = {};
        let student2 = {
            "name": "zhangsan",
            "age": 15
        };
        console.log(student2.name);
        console.log(student2["name"]);

修改

html 复制代码

        student2.name = "lisi";
        console.log(student2.name);
        console.log(student2);

增加

html 复制代码

        student.name = "空对象赋值";
        console.log(student);

JQuery

jQuery是一个快速、简洁且功能丰富的JavaScript框架，它封装JavaScript常用的功能代码，提供

了简洁而强大的选择器和DOM操作方法

JQuery 语法

jQuery 语法是通过选取HTML元素并对选取的元素执行某些操作，$(selector).action()

$() 是一个函数，它是 jQuery 提供的一个全局函数，用于选择和操作 HTML 元素
Selector 选择器，用来"查询"和"查找" HTML 元素
action 操作, 执行对元素的操作

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-4.0.0.min.js"></script>
</head>
<body>
    <button>button</button>
    <script>
        $("button").click(function(){
            alert("点击弹框");
        });
    </script>
</body>
</html>

JQuery 选择器

|------------------|-------------------------------------|
| 语法 | 描述 |
| $("p") | 所有\元素 | |$ ("#box") | id="box" 的元素 |
| $(".box") | 所有 class="box" 的元素 | |$ (".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
| $("p.intro") | 选取 class 为 intro 的元素 |

JQuery事件

事件由三部分组成:

事件源:哪个元素触发的
事件类型: 是点击, 选中, 还是修改
事件处理程序: 进一步如何处理. 往往是一个回调函数.

常见的事件

|----------|-----------------------------|
| 事件 | 代码 |
| 点击事件 | $(selector).click(function) |
| 元素的值发生改变 | ange(function) |

操作元素

获取/设置元素内容

三个简单的获取元素内容的JQuery方法

|----------|-------------------------|
| JQuery方法 | 说明 |
| text() | 设置或返回所选元素的文本内容 |
| html() | 设置或返回所选元素的内容（包括 HTML 标签 |
| val() | 设置或返回表单字段的值 |

获取元素

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.7.1.min.js"></script>
</head>
<body>
     <div id="content">
        <span id="ele">页面元素</span>
    </div>
    <input type="text" value="input" id="name">
    <script>
    $("#content").click(function(){
    console.log($(this).text());
    console.log($(this).html());
    console.log($("#name").val());
    })
    </script>
</body>
</html>

修改元素

html 复制代码

     <div id="content">
        <span id="ele">页面元素</span>
    </div>
    <input type="text" value="input" id="name">
    <script>
    $("#content").click(function(){
     $(this).text("<h1>我是点击后的内容</h1>");
    $(this).html("<h1>我是点击后的内容</h1>")
    $("#name").val("input222222222");
    })
    </script>

点击前

点击后

获取/设置元素属性

JQuery attr() 方法用于获取属性值

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.7.1.min.js"></script>
</head>
<body>
    <a href="http://www.baidu.com">百度</a> 
    <script>
    console.log($("a").attr("href"));
    $("a").attr("href", "http://www.youdao.com");
    </script>
</body>
</html>

当点击后会跳转到别的网站

获取/返回css属性

css() 方法设置或返回被选元素的一个或多个样式属性

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.7.1.min.js"></script>
</head>
<body>
     <div style="font-size: 40px;">我是一个div</div>
    <script>
    console.log($("div").css("font-size"));
    $("div").css("font-size", "16px");
    </script>
</body>
</html>

16px下的字体大小

40px下的字体大小

添加元素

添加 HTML 内容

append() : 在被选元素的结尾插入内容
prepend() : 在被选元素的开头插入内容
after() : 在被选元素之后插入内容
before() : 在被选元素之前插入内容

html 复制代码

 <ol>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
    </ol>
    <script>
         $("ol").append("append");
         $("ol").prepend("prepend");
         $("ol").after("after");
         $("ol").before("before");

删除元素

remove() : 删除被选元素（及其子元素）
empty() : 删除被选元素的子元素