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

一、前端技术结构分析

在这里插入图片描述
网页的结构（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);        // 调用函数，返回值被赋值给 xfunction 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>

在这里插入图片描述

        //添加值pusharr.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事件

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/397515.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

golang并发控制

golang并发控制

常见的并发控制 常见的并发控制 channel:通过无缓冲的channel进行同步调用&#xff0c;有缓冲的channel进行异步调用&#xff0c;也可限制并发数量 waitgroup:可以通过add来动态调整&#xff0c;释放的时间需要使用defer 进行wg.done操作 context&#xff1a;通过在协程之间…
阅读更多...
笔记本CPU天梯图（2024年8月），含AMD/骁龙等新CPU

笔记本CPU天梯图（2024年8月），含AMD/骁龙等新CPU

原文地址&#xff08;高清无水印原图/持续更新/含榜单出处链接&#xff09;&#xff1a; 2024年8月笔记本CPU天梯图 2024年8月笔记本CPU天梯图 2024年8月5日更新日志&#xff1a;常规更新Cinebench R23、PassMark笔记本CPU天梯图&#xff0c;新增Geekbench 6.2单核多核天梯图&…
阅读更多...
inner join, left join, right join, full join 的区别

inner join, left join, right join, full join 的区别

1. 初始化表结构 SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS 0;-- ---------------------------- -- Table structure for t_city -- ---------------------------- DROP TABLE IF EXISTS t_city; CREATE TABLE t_city (id varchar(255) CHARACTER SET utf8mb4 COLLATE utf…
阅读更多...
Windows Server修改远程桌面端口

Windows Server修改远程桌面端口

新建入站规则 填写端口 允许连接 修改远程桌面端口 winR打开注册表 计算机\HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Terminal Server\Wds\rdpwd\Tds\tcp修改PortNumber为新端口 计算机\HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Terminal Server\Wi…
阅读更多...
根据 IP 地址配置子网示例（下挂 hub 接不同 vlan 终端）

根据 IP 地址配置子网示例（下挂 hub 接不同 vlan 终端）

我们一般根据端口配置子网比较简单&#xff0c;但是如果换接口&#xff0c;就又要到交换机上重新配置端口所属 vlan 了&#xff0c;紧急情况下&#xff0c;还是比较耽误时间的。但如果根据IP地址配置 vlan&#xff0c;则可以插在交换机上任意端口&#xff0c;排障时比较节省时间…
阅读更多...
深入理解Linux线程：从基础到进阶的全面指南

深入理解Linux线程：从基础到进阶的全面指南

目录 一.线程概念1.理解Linux下的线程2.线程优缺点与异常3.线程VS进程4.再谈进程地址空间 二.线程控制1.线程的创建使用2.线程在进程地址空间的结构3.初窥多线程4.多线程抢票 三.线程互斥1.进程线程间的互斥相关背景概念2.互斥锁 四.线程安全1.线程安全和可重入函数2.死锁3.线程…
阅读更多...
人工智能时代：程序员的核心竞争力重塑之旅

人工智能时代：程序员的核心竞争力重塑之旅

人工智能时代&#xff1a;程序员的核心竞争力重塑之旅 在人工智能&#xff08;AI&#xff09;技术日新月异的今天&#xff0c;程序员的角色与职责正经历着前所未有的变革。随着自动化、智能化工具的普及&#xff0c;许多传统编程任务被高效替代&#xff0c;这不禁让人思考&…
阅读更多...
【基础算法总结】BFS 解决 FloodFill 算法

【基础算法总结】BFS 解决 FloodFill 算法

BFS 解决 FloodFill 算法 1.图像渲染2.岛屿数量3.岛屿的最大面积4.被围绕的区域 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一起努力吧!&#x1f603;&#x1f603; FloodFill 算…
阅读更多...
【基础算法总结】BFS 解决最短路径问题

【基础算法总结】BFS 解决最短路径问题

BFS 解决最短路径问题 1.最短路径问题简介2.迷宫中离入口最近的出口3.最小基因变化4.单词接龙4.为高尔夫比赛砍树 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一起努力吧!&#x1…
阅读更多...
Day17 枚举、typedef、位运算、堆空间的学习

Day17 枚举、typedef、位运算、堆空间的学习

目录 枚举 typedef 位运算 堆上的空间 枚举 一个一个列举出来&#xff0c;是指将变量的值一一列举出来&#xff0c;变量的值只限于列举出来的值的范围内。 作用&#xff1a; 1、为了提高代码的可读性 2、提高代码的安全性 枚举类型 基本语法&#xff1a; enum 枚举名 { …
阅读更多...
根据toml编译生成whl

根据toml编译生成whl

1、安装build pip install build如果已经安装build, 那就执行一下升级命令 python3 -m pip install --upgrade build2、在pyproject.toml所在的文件夹那一层执行 # -w:生成whl文件 -v:显示python编译过程 python3 -m build -w -v2.1 当出现以下输出&#xff0c;需要耐心等待…
阅读更多...
Java 集成测试详解及示例

Java 集成测试详解及示例

通过综合指南探索 Java 集成测试的世界。了解工具、流程和最佳实践&#xff0c;并辅以实际示例。 随着软件系统变得越来越大、越来越复杂&#xff0c;组件和服务以错综复杂的方式交互&#xff0c;集成测试已变得不可或缺。通过验证所有组件和模块在组合时是否正常工作&#xff…
阅读更多...
入门岛2-python实现wordcount并进行云端debug

入门岛2-python实现wordcount并进行云端debug

书生大模型学习 任务&#xff1a; 1.实现一个wordcount函数&#xff0c;统计英文字符串中每个单词出现的次数。返回一个字典&#xff0c;key为单词&#xff0c;value为对应单词出现的次数。 2.Vscode连接InternStudio debug TIPS&#xff1a;记得先去掉标点符号,然后把每个单词…
阅读更多...
Mybatis学习-day19

Mybatis学习-day19

Mybatis学习-day19 1. resultMap resultMap 是 MyBatis 中最复杂的元素&#xff0c;主要用于解决实体类属性名与数据库表中字段名不一致的情况&#xff0c;可以将查询结果映射成实体对象。 <resultMap id"staffAndDep" type"com.easy.bean.Staff">…
阅读更多...
解決android Studio在导入已有的工程 build 时出现的错误

解決android Studio在导入已有的工程 build 时出现的错误

最近在学习andriod方面的知识&#xff0c;第一次使用android Studio导入别人的项目&#xff0c;从导入到build出现了几个问题&#xff0c;在这里记录以下解决过程。 SDK location not found 如下图报错所示&#xff0c;看网上教程有的说是SDK未安装&#xff0c;这里我是明确自…
阅读更多...
两个AI关小黑屋：Llama3.1把Claude Opus聊自闭了

两个AI关小黑屋：Llama3.1把Claude Opus聊自闭了

把Llama 3.1 405B和Claude 3超大杯Opus双双送进小黑屋&#xff0c;你猜怎么着—— Llama把Claude整得精神崩溃了&#xff0c;Claude明确拒绝继续聊天&#xff0c;还要再被Llama PUA的那种。 在一场AI和AI对话的安全词模拟实验中&#xff0c;X上的这位人类监督者记录下了一出好…
阅读更多...
【HarmonyOS NEXT星河版开发学习】小型测试案例12-点赞案例

【HarmonyOS NEXT星河版开发学习】小型测试案例12-点赞案例

个人主页→VON 收录专栏→鸿蒙开发小型案例总结​​​​​ 基础语法部分会发布于github 和 gitee上面&#xff08;暂未发布&#xff09; 前言 本案例主要运用了交互点击事件和基础的算术运算符的应用&#xff0c;难度并不大&#xff0c;卡片的制作相对来说并不是太难&#xff0…
阅读更多...
机器学习/深度学习——模型的欠拟合和过拟合，正则化方法详解

机器学习/深度学习——模型的欠拟合和过拟合，正则化方法详解

机器学习/深度学习——模型的欠拟合和过拟合&#xff0c;正则化方法 详解 搭配以下文章进行学习&#xff1a; 卷积神经网络&#xff1a; 深度学习——卷积神经网络&#xff08;convolutional neural network&#xff09;CNN详解&#xff08;一&#xff09;——概述. 步骤清晰…
阅读更多...
深度解析HAProxy：构建高可用负载均衡的终极指南

深度解析HAProxy：构建高可用负载均衡的终极指南

目录 haproxy配置文件组成 实验环境 haproxy安装 haproxy的配置文件说明 全局配置段global 多进程和多线程配置 代理配置段proxies server配置说明 实验相关配置 测试效果&#xff1a; haproxy的状态页 socat命令 socat命令的一些常用示例 HAProxy的调度算法 静…
阅读更多...
网鼎杯-2018-Web-Unfinish

网鼎杯-2018-Web-Unfinish

先尝试万能注入&#xff1a; 如果万能注入缺少符号&#xff0c;如果加符又进不去&#xff0c;那我们尝试扫描文件,然后发现有一个register.php的文件&#xff0c;应该是注册页面&#xff0c;我们去打开 知道存储的文件&#xff0c;并利用状态码进行过滤 我们注册的用户名就是aa…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发