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

一、前端技术结构分析

在这里插入图片描述
网页的结构（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 -->
<!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>

在这里插入图片描述

两者区别：

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

在这里插入图片描述

<!-- 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数组对象

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

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

访问
数组索引从零开始：数组中的第一个元素是 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对象
在这里插入图片描述

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中调用对象并对其相应的属性进行更改。
在这里插入图片描述
使用：

获取对象

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

改变该对象的属性

var H1 =document.getElementById("h1")
H1.innerHTML="调用div对象后更改"
//获取的是div标签

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

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.4Json对象

4.3.5BOM对象

4.3.6Dom对象

4.4JS事件

网站公告

今日签到

热门文章

最新发布