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

泰勒今天想展开2024-08-09 10:46

一、前端技术结构分析


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

1.HTML定义界面整体结构

2.CSS定义页面样式

3.JS实现动态效果

二、HTML

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

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

2.2新浪新闻页面结构分析

  1. 图片标签

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>


两者区别：

  1. get：在url后面进行表单数据的拼接，但是url长度有限制，数据较多无法使用，<form action="" method="post">即使method不设置，默认时get
  2. 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数组对象

  1. 定义方式（区别Java中用的是大括号）
javascript 复制代码 
const cars = ["Tesla", "Volvo", "BMW"];
  1. 访问
    数组索引从零开始：数组中的第一个元素是 0，第二个元素是 1，依此类推。
javascript 复制代码 
<script>
        var arr=new Array(1,2,3,4);
        console.log(arr[2]);//输出到控制台
    </script>
  1. 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对象

  1. 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() -重新调整当前窗口

4.4JS事件

相关推荐
tekin3 分钟前
Go、Java、Python、C/C++、PHP、Rust 语言全方位对比分析
java·c++·golang·编程语言对比·python 语言·php 语言·编程适用场景
李长渊哦1 小时前
Java 虚拟机（JVM）方法区详解
java·开发语言·jvm
陌殇殇2 小时前
002 SpringCloudAlibaba整合 - Feign远程调用、Loadbalancer负载均衡
java·spring cloud·微服务
猎人everest3 小时前
SpringBoot应用开发入门
java·spring boot·后端
山猪打不过家猪5 小时前
ASP.NET Core Clean Architecture
java·数据库·asp.net
AllowM5 小时前
【LeetCode Hot100】除自身以外数组的乘积｜左右乘积列表，Java实现！图解+代码，小白也能秒懂！
java·算法·leetcode
不会Hello World的小苗6 小时前
Java——列表（List）
java·python·list
二十七剑7 小时前
jvm中各个参数的理解
java·jvm
东阳马生架构8 小时前
JUC并发—9.并发安全集合四
java·juc并发·并发安全的集合
想睡好8 小时前
css文本属性
前端·css
热门推荐
01太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04本地部署DeepSeek教程（Mac版本）05本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程06DeepSeek本地部署详细指南07DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具08Page Assist - 本地Deepseek模型 Web UI 的安装和使用09DeepSeek r1本地安装全指南10本地部署DeepSeek后的调用与删除全攻略