JavaWeb-01(Java进阶内容详解，Html、CSS、JS)

一、前端技术结构分析

网页的结构（HTML）、表现(CSS)、行为(JS)

1.HTML定义界面整体结构

2.CSS定义页面样式

3.JS实现动态效果

二、HTML

2.1安装VS Code及前端开发插件

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
Code Spell Checker检查单词错误
HTML CSS Support
IntelliJ IDEA Keybindings
JavaScript (ES6) code snippets
Mithril Emmet
Path Intellisense
Path Intellisense
VueHelper
10.Auto Close Tag
Auto Rename Tag
Beautify
[Deprecated] Bracket Pair Colorizer 2
open in browser
Vetur

2.2新浪新闻页面结构分析

图片标签

2.3创建文件

html 复制代码

<!-- 声明文档类型是html -->
<!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>
    <!-- 01、绝对路径
     <img src="D:\Java\JavaWeb\Html_2024_8_7\news_logo.png">  -->
    <!-- 02、相对路径 ./ 表示当前目录  ../表示上一级目录--> 

    <!-- 宽度，高度：width height  单位：px像素  或者%百分比
     一般只设置一个另一个等比例缩放，百分比占的是整个body的大小 -->
     <img src="./news_logo.png">新浪政务>正文
     <!-- 标题 -->
      <h1>焦点访谈：关于开展学习运用"千万工程"经验加强金融支持乡村全面振兴专项行动的通知</h1>
      <hr><!-- 水平分割线 -->
      原标题：中国人民银行、金融监管总局、中国证监会、财政部、农业农村部关于开展学习运用"千万工程"经验加强金融支持乡村全面振兴专项行动的通知
      <hr>
</body>
</html>

三、CSS

3.1引入CSS

3.1.1行内样式和内嵌样式

3.1.2外联模式引入（常用）

3.2引入标签span

当存在多个标签时如何选择让固定标签中内容使用css样式？

3.3选择器引入

类选择器的命名可以重复，id选择器不可以重复

css 复制代码

h1{
    color: blueviolet;
}
.cls1{
    color: blueviolet;
}
span{
    color: aqua;
}

3.4超链接引入

a标签引入

css 复制代码

a{
    color: black;
    /* 设置超链接没有下划线 */
    text-decoration: none;
}

3.5正文排版

3.5.1 br实现换行

css 复制代码

<video src="./oceans.mp4" controls width="1000"> </video>
       <br>
       2023年12月，石家庄市生态环境局执法人员对近年因出具虚假环境监测报告被依法处罚的第三方机构名单进行梳理，
       发现河北从瑞环保科技有限公司（以下简称从瑞公司）在2023年分别被石家庄、邯郸、保定等地生态环境部门处罚9次。经核查，从瑞公司的虚假报告均在2022年至2023年期间出具，并且在2023年1月9日、6月16日被地方生态环境部门分别实施两次行政处罚后，又于7月6日出具虚假报告，8月16日被石家庄生态环境局再次行政处罚。

3.5.2段落标签

css 复制代码

p{
    text-indent: 35px;/* 设置首行缩进 */
    line-height: 40px;/* 设置行高 */
    
}

3.6页面布局

3.6.1div与span

3.7表格标签

html 复制代码

<table border="1px" width="300" cellspacing="0"> 
 <!-- cellspacing="0"设置单元格之间的空白为0 -->
        <tr>
            <!-- 表头要用th -->
             <th>Id</th>
             <th>name</th>
        </tr>
        <tr>
            <td>001</td>
            <td>华为</td>
        </tr>
        <tr>
            <td>002</td>
            <td>小米</td>
        </tr>
       </table>

3.8表单

3.8.1get方式请求

请求结果会直接拼接到url后面

3.8.2post方式提交

html 复制代码

    <form action="" method="post">
        用户名：<input type="text" name="username">
        密码：<input type="text" name="password">
        年龄：<input type="text" name="age">
        <input type="submit" name="提交">
    </form>

两者区别：

get：在url后面进行表单数据的拼接，但是url长度有限制，数据较多无法使用，<form action="" method="post">即使method不设置，默认时get
post：在消息体（请求体）中传递，参数大小无限制

3.9表单项

四、JS

4.1引入Script

4.1.1内部脚本引入

4.1.2外部脚本引入

4.2基础语法

4.2.1输出语句

javascript 复制代码

<!-- Js三种输出语句 -->
    <!-- 弹出警告框 -->
     <Script>
        window.alert("警告");
     </Script>
     <!-- document -->
      <script>
        document.write("hello JS")
      </script>
      <!-- 浏览器控制台输出 -->
       <Script>
        console.log("浏览器控制台输出")
       </Script>

4.2.2变量

不用指定数据类型，且定义的变量是全局类型

javascript 复制代码

<script>
        /* 定义变量 */
        {
            var x=1;
        x="hello";/* 对数据类型没有要求 */
        }
        window.alert(x);/* 即使用括号括起来，var定义的变量默认是全局数据类型，仍然可以取到 */
        

        var x=20;/* 可以重复定义变量区别java */
       </script>

局部变量声明

常量声明

javascript 复制代码

<body>
    <!-- 局部变量声明let -->
     <script>
        {
            var a=100;
            let x=10;     
        }
        alert(a);
        alert(x);//访问不到
        
     </script>
</body>

javascript 复制代码

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象

4.2.3函数

javascript 复制代码

**JavaScript 函数语法**
function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}

JS是弱类型语言，形参不需要指定类型，方法返回值类型也不用指定

javascript 复制代码

var x = myFunction(7, 8);        // 调用函数，返回值被赋值给 x

function myFunction(a, b) {
    return a * b;                // 函数返回 a 和 b 的乘积
}

4.3JS对象

4.3.1常用基础对象

4.3.2Array数组对象

定义方式（区别Java中用的是大括号）

javascript 复制代码

const cars = ["Tesla", "Volvo", "BMW"];

访问
数组索引从零开始：数组中的第一个元素是 0，第二个元素是 1，依此类推。

javascript 复制代码

<script>
        var arr=new Array(1,2,3,4);
        console.log(arr[2]);//输出到控制台
    </script>

JS中的数组类似于java中的集合：长度和数据类型可变

javascript 复制代码

<script>
        var arr=new Array(1,2,3,4);
        console.log(arr[2]);//输出到控制台
        //JS中的数组类似于java中的集合：长度和数据类型可变
        arr[5]="hello";//在java中会报错数组越界异常
        console.log(arr[5]);
        
    </script>

foreach只遍历数组中有值的元素，for循环会遍历所有值

javascript 复制代码

 <script>
        var arr=new Array(1,2,3,4);
        console.log(arr[2]);//输出到控制台
        //JS中的数组类似于java中的集合：长度和数据类型可变
        arr[5]="hello";//在java中会报错数组越界异常
        console.log(arr[5]);
        //forEach遍历数组
        console.log("forEach循环结果：");
        arr.forEach(element => {
            console.log(element);
            
        });
        //for循环
        console.log("for循环结果：");
        
        for (let index = 0; index < arr.length; index++) {
            console.log(arr[index]);
            
            
        }
        
    </script>

javascript 复制代码

        //添加值push
        arr.push(10,11)
        //将项目添加到数组：
        arr.splice(2, 0, "Lemon", "Kiwi");
        console.log(arr);
        //在位置 2，添加新项目，并删除 1 个项目：
        var fruits = ["Banana", "Orange", "Apple", "Mango"];
        fruits.splice(2, 1, "Lemon", "Kiwi");
        console.log(fruits);
        //在位置 2，删除 2 个项目：
        var fruits2 = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
        fruits2.splice(2, 2);

4.3.3String对象

4.3.1Json对象

JSON 是用于存储和传输数据的格式。

JSON 是文本，文本可以在任何地方传输，并可通过任何编程语言读取。

JavaScript 对象可以转换为 JSON，JSON 可以转换回 JavaScript 对象。

javascript 复制代码

// JavaScript 对象...：
var myObj = { "name":"Bill", "age":19, "city":"Seattle" };

// ...转换为 JSON：
var myJSON = JSON.stringify(myObj);

4.3.4BOM对象

浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。
以下为最主要的BOM对象

Window对象
所有浏览器都支持 window 对象。它代表浏览器的窗口。
所有全局 JavaScript 对象，函数和变量 自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至（HTML DOM 的）document 对象也是 window 对象属性：

javascript 复制代码

window.document.getElementById("header");
//等同于
document.getElementById("header");

其他窗口方法

javascript 复制代码

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() -移动当前窗口
window.resizeTo() -重新调整当前窗口

JavaWeb-01(Java进阶内容详解，Html、CSS、JS)

一、前端技术结构分析

1.HTML定义界面整体结构

2.CSS定义页面样式

3.JS实现动态效果

二、HTML

2.1安装VS Code及前端开发插件

2.2新浪新闻页面结构分析

2.3创建文件

三、CSS

3.1引入CSS

3.1.1行内样式和内嵌样式

3.1.2外联模式引入（常用）

3.2引入标签span

3.3选择器引入

3.4超链接引入

3.5正文排版

3.5.1 br实现换行

3.5.2段落标签

3.6页面布局

3.6.1div与span

3.7表格标签

3.8表单

3.8.1get方式请求

3.8.2post方式提交

3.9表单项

四、JS

4.1引入Script

4.1.1内部脚本引入

4.1.2外部脚本引入

4.2基础语法

4.2.1输出语句

4.2.2变量

4.2.3函数

4.3JS对象

4.3.1常用基础对象

4.3.2Array数组对象

4.3.3String对象

4.3.1Json对象

4.3.4BOM对象

4.4JS事件