菜单 搜索
首页 前端知识 JavaWeb-01(Java进阶内容详解，Html、CSS、JS、Vue)

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

2024-08-27 21:08:56 前端知识 前端哥 698 130 我要收藏

一、前端技术结构分析

在这里插入图片描述
网页的结构（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 -->
<!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选择器不可以重复
在这里插入图片描述

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

在这里插入图片描述

3.4超链接引入

a标签引入
在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述

3.5正文排版

在这里插入图片描述

3.5.1 br实现换行

<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段落标签

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述

3.6页面布局

在这里插入图片描述

3.6.1div与span

在这里插入图片描述
在这里插入图片描述

3.7表格标签

在这里插入图片描述
在这里插入图片描述

<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方式提交

    <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输出语句

在这里插入图片描述

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

在这里插入图片描述

4.2.2变量

在这里插入图片描述
不用指定数据类型，且定义的变量是全局类型
在这里插入图片描述

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

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

局部变量声明
常量声明
在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

4.2.3函数

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

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

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

在这里插入图片描述
3. JS中的数组类似于java中的集合：长度和数据类型可变

<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循环会遍历所有值

 <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>

在这里插入图片描述

        //添加值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.4Json对象

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

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

JavaScript 对象可以转换为 JSON，JSON 可以转换回 JavaScript 对象。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

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

4.3.5BOM对象

浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。
以下为最主要的BOM对象
在这里插入图片描述
在这里插入图片描述

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

在这里插入图片描述

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

其他窗口方法

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

在这里插入图片描述

4.3.6Dom对象

在这里插入图片描述
浏览器中会形成一个Dom树
在这里插入图片描述
JS主要实现网页行为的，主要就是通过Dom和事件监听机制实现网页动态行为
在这里插入图片描述
比如可以通过点击某按钮，对html中的元素内容和样式进行修改
在这里插入图片描述
在这里插入图片描述
Html-DOM使用，HtmlDOM将标签定义为了一个个的对象，以便Script中调用对象并对其相应的属性进行更改。
在这里插入图片描述
使用：

  1. 获取对象在这里插入图片描述
<body>
    <div id="h1">创智教育</div><br>
    <div class="cls">黑马程序员</div><br>

    <input type="checkbox" name="hobby">电影
    <input type="checkbox" name="hobby">旅游
    <input type="checkbox" name="hobby">游戏
    
</body>
<!-- 可以定义在任何位置 -->
 <!-- 获取Element（标签）元素 ,如果有多个返回值，返回的是数组-->
<script>
//01通过id获取
var H1 =document.getElementById("h1")
alert("通过id获取"+H1)
//02通过标签获取
var Tag1=document.getElementsByTagName("div")
for (let index = 0; index < Tag1.length; index++) {
    alert("通过标签获取:"+Tag1[index])
    
}
//02通过name获取
var Name1=document.getElementsByName("hobby")
//02通过class获取
var Class1=document.getElementsByClassName("cls")
</script>
  1. 改变该对象的属性
var H1 =document.getElementById("h1")
H1.innerHTML="调用div对象后更改"
//获取的是div标签

在这里插入图片描述
找到div对象对于的属性
在这里插入图片描述使用：innerHTML 属性设置或返回元素的 HTML 内容（内部 HTML）。
在这里插入图片描述
在这里插入图片描述

4.4JS事件

在这里插入图片描述
在这里插入图片描述

五、Vue

一、概念

Vue.js是一套构建用户界面的渐进式 JavaScript框架，专注于视图层，提供MVVM风格的双向数据绑定，并具备组件化机制。
Vue.js非常注重核心库的精简，其核心库只关注视图层，这使得Vue与其它大型框架不同，它被设计为可以自底向上逐层应用。当涉及到复杂单页应用时，Vue不仅能提供简洁的数据绑定和模板语法，还能结合多种工具和库，如Vue Router、Vuex等，来支持复杂的应用开发。

Vue.js的推出，主要是为了应对Web应用开发中的日益增长的复杂性。在传统的DOM操作中，开发者需要频繁地进行手动操作，这导致代码难以维护，性能也受到影响。Vue通过引入声明式渲染和组件化机制，有效解决了这些问题。声明式渲染让开发者可以通过模板语法直接表达数据与界面的关系，而无需直接操作DOM；组件化则允许将界面拆分成独立、可复用的组件，每个组件包含自己的逻辑和样式。
在这里插入图片描述
在这里插入图片描述

二、工具安装

V2官网
在这里插入图片描述
下载开发版本：完整版本，会有常见问题的警告提示，项目上线如果用到核心包，可以使用生产版本。
在这里插入图片描述
在这里插入图片描述

三、用法

在这里插入图片描述
在这里插入图片描述

3.1快速上手

  1. 插值表达式+双向绑定数据指令
    在这里插入图片描述
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 02引入vue.js开发包，一旦引入Vue开发工具包，全局环境中就有了Vue的构造函数，就可以创建Vue的实例，new Vue -->
    <script src="D:\Java\JavaWeb\Html_2024_8_7\vue.js"></script>
</head>
<body>
    <!-- 01引入容器 -->
    <div id="app1">
        <!-- 04渲染代码的逻辑 -->
         {{ msg }} <br>
         <a>{{count}}</a>
         <h1>{{ms}}</h1>
         <input type="text" v-model="msg"><!-- 数据绑定 -->
 
    </div>
    
</body>
<!-- 03创建实例 -->
<script>
 const app=new Vue({
    //配置选择器，指定管理的对象
    el:"#app1",
    //通过data提供数据
    data:{
        msg:"hello world",
        count:666,
        ms:7777
    }
})
</script>
</html>

在这里插入图片描述
双向数据绑定：
在这里插入图片描述
在这里插入图片描述

3.2常用指令

在这里插入图片描述

3.2.1bind绑定标签属性值，model绑定数据

在这里插入图片描述

<body>
    <!-- 01引入容器 -->
    <div id="app1">
        <!-- 04渲染代码的逻辑 -->
         <a v-bind:href="url">百度</a> 
    </div>   
</body>
<!-- 03创建实例 -->
<script>
 const app=new Vue({
    //配置选择器，指定管理的对象
    el:"#app1",
    //通过data提供数据
    data:{
        url:"https://www.baidu.com/"
    }
})
</script>

在这里插入图片描述

3.2.2v-on绑定事件

在这里插入图片描述

<!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>
<!-- 01引入vue包 -->
 <script src="D:\Java\JavaWeb\Html_2024_8_7\vue.js"></script>
<body>
    <div id="bind1">
        <!-- 通过vue实现事件绑定 -->
         <input type="button" value="点我一下" v-on:click="Click()"><!-- js实现绑定事件直接写click： -->
         <input type="button" value="简化写法：点我一下" @click="Click()"><!-- 简化 -->

    </div>
    
</body>
<script>
    new new Vue({
        el:"#bind1",
        data:{

        },
        //定义方法
        methods: {
            Click:function(){
                alert("你点了我一下")

            }
        }

    })

</script>
</html>

在这里插入图片描述

3.2.3v-if条件判断，v-show

在这里插入图片描述
两者的区别：
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 01引入vue包 -->
 <script src="D:\Java\JavaWeb\Html_2024_8_7\vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-for="item in Array">{{item}}</div>
        <input type="text" v-model="msg">
    </div>
    
    
</body>
<script>
     const app=new Vue({
        el:"#app",
        data:{
            msg:"Hello",
            Array:["北京","天津","河北","安徽"]
        }
    })
</script>
</html>

3.3案例

在这里插入图片描述

<body>
    <div id="app">
        <!-- 定义一个表格 -->
         <table border="1" cellspacing="0" width="60%">
            <tr>
                <!-- 表头部署 -->
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>
            <!-- 一行静态数据 -->
            <tr align="center">
                <td>1</td>
                <td>Alex</td>
                <td>18</td>
                <td>
                    <span>男</span>
                    <span>女</span>
                </td>
                <td>90</td>
                <td>
                    <span>优秀</span>
                    <span>及格</span>
                    <span style="color: red;">不及格</span>
                </td>

            </tr>
                     
        </table>


    </div>
    
</body>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-案例</title>
    <script src="D:\Java\JavaWeb\Html_2024_8_7\vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 定义一个表格 -->
         <table border="1" cellspacing="0" width="60%">
            <tr>
                <!-- 表头部署 -->
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            <tr align="center" v-for="(user,index) in users">
                <td>{{index+1}}</td><!-- 加1的原因是index默认从0开始 -->
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span  v-if="user.gender==1">男</span>
                    <span  v-if="user.gender==0">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score>=85">优秀</span>
                    <span v-else-if="user.score>=60">及格</span>
                    <span style="color: red;" v-else>不及格</span>
                </td>

            </tr>
                     
        </table>
    </div>   
</body>
<script>
 new Vue({
    el:"#app",
    data:{
        users:[
            { name: 'Tom', age: 20, gender: 1, score: 80 },
            { name: 'Alice', age: 22, gender: 0, score: 90 },
            { name: 'Bob', age: 24, gender: 1, score: 75 },
            { name: 'Jane', age: 21, gender: 0, score: 55 },
            { name: 'Mike', age: 23, gender: 1, score: 95 }
        ]
    }
        
    })
</script>
</html>

在这里插入图片描述

3.4生命周期

钩子方法自动调用，不需要绑定，根据上图中的生命周期，挂载执行完之前调用mounted（）方法，一般在此方法中执行向服务器请求数据请求。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

转载请注明出处或者链接地址：https://www.qianduange.cn//article/17091.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

jQuery 小技巧教程

2024-09-08 02:09:07

jQuery HashChange 插件指南

2024-09-08 02:09:07

jQuery-HAML 使用教程

2024-09-08 02:09:06

jquery.datetimepicker无法添加清除按钮的问题

2024-06-13 21:06:58

初识Jquery

2024-05-10 08:05:00

jQuery PJAX 使用教程

2024-09-08 02:09:03

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

vue使用datav echarts

2024-09-06 00:09:381000
3

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
4

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
5

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
6

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
7

npm的使用

2024-08-18 00:08:131000
8

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
9

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
10

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！