当前位置： 首页 > news >正文

HTML学习笔记（4）

news 2025/12/24 16:27:16

目录

一、背景相关样式

二、定位position

三、javascript

1、变量的定义

2、数据类型

3、绑定事件

一、背景相关样式

background-image: url(); // 背景图片
background-repeat: repeat; // 背景图片是否平铺 no-repeat
background-size: 200px;  // 背景图片尺寸 cover把所在容器铺满
background-position:50px 10px; // 背景图片位置 距离左50px 上10px 也可以是单词center
background-attachment:fixed; // 背景图片不随浏览器的滚动而滚动

二、定位position

  • static：静态模式|常态模式。
  • relative：代表相对模式，随着浏览器的滚动而滚动，参考物是自己原来的位置，保留自己原来的空间。
  • absolute：代表绝对模式，随着浏览器的滚动而滚动，参考物是浏览器，会释放掉自己原来的空间。
  • fixed：代表绝对模式，不随着浏览器的滚动而滚动，参考物是浏览器，会释放掉自己原来的空间。

vh视口高度 wh视口宽度

默认position为static不动,测试如下:

/*
html结构如下
<div class="demo"><div class="t1">top</div><div class="m1">middle</div><div class="b1">bottom</div>
</div>
*/.t1 {width: 200px;height: 100px;background: palegreen;
}.m1 {width: 200px;height: 100px;background: plum;position: static;
}
.b1 {width: 200px;height: 100px;background: skyblue;
}

 

position为relative不动,测试如下:

/*
html结构如下
<div class="demo"><div class="t1">top</div><div class="m1">middle</div><div class="b1">bottom</div>
</div>
*/.t1 {width: 200px;height: 100px;background: palegreen;
}.m1 {width: 200px;height: 100px;background: plum;position: relative;top: 20px;left: 50px;
}
.b1 {width: 200px;height: 100px;background: skyblue;
}

我们发现相对模式，是相对静态时候，通过left，top控制与静态的相对位置，并且可以随浏览器滚动而滚动。

position为absolute不动,测试如下:

/*
html结构如下
<div class="demo"><div class="t1">top</div><div class="m1">middle</div><div class="b1">bottom</div>
</div>
*/
.demo{height: 1100px;
}
.t1 {width: 200px;height: 100px;background: palegreen;
}.m1 {width: 200px;height: 100px;background: plum;position: absolute;top: 20px;left: 50px;
}
.b1 {width: 200px;height: 100px;background: skyblue;
}

我们发现绝对模式，是相对浏览器，与原来静态位置无关，通过top,left调整在浏览器的位置，并且可以随浏览器滚动而滚动。 

position为fixed不动,测试如下:

/*
html结构如下
<div class="demo"><div class="t1">top</div><div class="m1">middle</div><div class="b1">bottom</div>
</div>
*/
.demo{height: 1100px;
}
.t1 {width: 200px;height: 100px;background: palegreen;
}.m1 {width: 200px;height: 100px;background: plum;position: fixed;top: 20px;left: 50px;
}
.b1 {width: 200px;height: 100px;background: skyblue;
}

 与absolute大致相同都是以浏览器为基础，但是不随浏览器的滚动而滚动，同样通过top等方位词控制位置。

三、javascript

两种使用方式

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><!-- 内嵌 --><script>alert(1);</script>
</head>
<body></body>
</html>

 2、外引

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/javascript基础语法.js"></script>
</head>
<body></body>
</html>

 js文件内容如下：

alert("hello")

1、变量的定义

// var 声明变量的关键字
var a = 3;
var b = "hello";
var c = 3.1415926;

2、数据类型

基本类型可以分为如下几类：

  1. 数字（小数、整数）
  2. 字符串（单引号，双引号索引的内容)
  3. 布尔类型（true,false)
  4. undefined（声明变量但没赋值）
  5. null 涉及一个量、但是这个量本身不存在

复合类型可以分为如下几类

1、数组

var arr = [10, 5.3, true, undefined, null, "hhh", [10, 2]];

  下标从0开始访问

2、对象

var obj = {name:"张三", age:50, marry:true, play:['足球','篮球']};

类似于python的字典，C++的map容器 ，访问方式———对象.属性

3、函数


// 定义函数
function f(a, b) {console.log("函数已执行");
}// 调用函数
f(a, b);//匿名函数
var ff = function(a,b){console.log("函数已执行");
}// 调用匿名函数
ff(a, b);

注：

var f = function ff(a, b){}
// 调用方法
f(a, b);
// 不能用ff(a, b);var a = {name:function(){}};
//调用方法
a.name();var b = [function(){}] 
//调用方法
b[0]();// 如果不传参，不耽误函数运行
// 如果不传参，就相当于函数内的变量为undefined

3、绑定事件

  • onclick点击
  • ondblclick双击
  • onmouseenter鼠标放上去
  • onmouseleave鼠标离开
// 鼠标点击页面，出现弹窗1
document.onclick = function(){alert(1);
}// 鼠标双击页面，出现弹窗2
document.ondblclick = function(){alert(2);
}// 鼠标放页面上，出现弹窗3
document.onmouseenter = function(){alert(3);
}// 鼠标离开页面上，出现弹窗4
document.onmouseleave = function(){alert(4);
}

 小总结，如何利用js实现点击一次屏幕，背景换个随机颜色，代码如下：

document.onclick = function(){var color = "";for(var i = 0; i < 6; i ++ ){var num = Math.round(Math.random() * 15);if(num == 10){num = 'a';} else if(num == 11) {num = 'b';} else if(num == 12) {num = 'c';} else if(num == 13) {num = 'd';} else if(num == 14) {num = 'e';} else if(num == 15) {num = 'f';}color = color + num;}document.body.style.background = "#" + color;
}

 简单介绍这节用到的常用的测试函数

console.log(x);  // 控制台打印x
console.dir(x);  //打印对象x的基本属性
alert(x); // 网页弹窗

相关文章：

HTML学习笔记（4）

目录 一、背景相关样式 二、定位position 三、javascript 1、变量的定义 2、数据类型 3、绑定事件 一、背景相关样式 background-image: url(); // 背景图片 background-repeat: repeat; // 背景图片是否平铺 no-repeat background-size: 200px; // 背景图片尺寸 cover把…...

编程日记 2025/1/19 6:21:32

解决 MySQL 服务无法启动：failed to restart mysql.service unit not found

目录 前言1. 问题描述2. 问题分析3. 解决步骤 3.1 检查 MySQL 服务文件3.2 备份旧的服务文件3.3 启动 MySQL 服务3.4 验证服务状态 4. 总结结语 前言 在日常使用 MySQL 数据库时&#xff0c;有时候可能会遇到服务无法正常启动的问题。这类问题通常出现在系统更新或者服务配置…...

编程日记 2025/1/19 6:20:31

在 Ubuntu 上安装 Nginx 的详细指南

在Ubuntu系统中从源码安装Nginx可以让您自定义Nginx的编译选项和模块&#xff0c;以满足特定需求。以下是详细的步骤指南&#xff1a; 前提条件 更新系统包列表 sudo apt update sudo apt upgrade -y安装必要的依赖包 sudo apt install -y build-essential libpcre3 libpcre3-…...

编程日记 2025/1/19 6:19:27

58,【8】BUUCTF [PwnThyBytes 2019]Baby_SQL1

进入靶场 和2次注入的页面很像 不过养成查看源代码的好习惯 先访问source.zip 下载后解压&#xff0c;发现两个文件 第一个文件夹打开又有4个PHP文件 那还是先看index.php文件好了 有PHP和HTML两部分&#xff0c;下面是PHP部分代码&#xff08;HTML太长了&#xff0c;先放一…...

编程日记 2025/1/19 6:18:24

2.1 三个世界”与“图灵测试”：人工智能与人类智能的深度探索

“三个世界”与“图灵测试”：人工智能与人类智能的深度探索 人工智能的研究和发展，尤其是对其认知能力和智能表现的探索，早在20世纪中期就已成为科学家的热议话题。随着技术的进步，学者们提出了许多思想框架来理解人工智能的运作及其与人类智能的关系。其中，“三个世界”…...

编程日记 2025/1/19 6:11:16

基于微信小程序的优购电商系统设计与实现（LW+源码+讲解）

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…...

编程日记 2025/1/19 6:10:15

JS宏进阶: 工厂函数与构造函数

一、构造函数 在JavaScript中&#xff0c;构造函数是一种用于创建和初始化对象的特殊函数。构造函数的名字通常以大写字母开头&#xff0c;以区分于普通函数。通过new关键字调用构造函数&#xff0c;可以创建一个新的实例对象&#xff0c;并自动执行构造函数内部的代码来初始化…...

编程日记 2025/1/19 6:09:12

【Linux】线程全解：概念、操作、互斥与同步机制、线程池实现

&#x1f3ac; 个人主页&#xff1a;谁在夜里看海. &#x1f4d6; 个人专栏&#xff1a;《C系列》《Linux系列》《算法系列》 ⛰️ 道阻且长&#xff0c;行则将至 目录 &#x1f4da;一、线程概念 &#x1f4d6; 回顾进程 &#x1f4d6; 引入线程 &#x1f4d6; 总结 &a…...

编程日记 2025/1/19 6:08:11

关于ubuntu命令行连接github失败解决办法

如果发现ping github.com有问题 使用sudo gedit /ect/hosts 打开host文件 添加 140.82.114.4 github.com 发现使用git 克隆失败&#xff0c;出现 aliaubuntu:~/文档/ctest$ git clone https://github.com/LearningInfiniTensor/learning-cxx.git 正克隆到 ‘learning-cxx’… …...

编程日记 2025/1/19 6:07:10

# [游戏开发] [Unity游戏开发]3D滚球游戏设计与实现教程

在这篇文章中，我们将通过一个简单的3D滚球游戏的设计与实现，讲解游戏开发中的一些关键概念和技术。游戏的核心目标是让玩家控制一个小球在跑道上左右移动，躲避障碍物并尽量向前跑，直到成功或失败。通过这一过程，我们会涉及到功能点分析、场景搭建、主体控制、游戏机制等多…...

编程日记 2025/1/19 6:06:09

强推未发表！3D图！Transformer-LSTM+NSGAII工艺参数优化、工程设计优化！

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Transformer-LSTMNSGAII多目标优化算法&#xff0c;工艺参数优化、工程设计优化&#xff01;&#xff08;Matlab完整源码和数据&#xff09; Transformer-LSTM模型的架构&#xff1a;输入层&#xff1a;多个变量作…...

编程日记 2025/1/19 6:05:08

Flutter中的事件冒泡处理

在 Flutter 中&#xff0c;GestureDetector 的点击事件默认是冒泡的&#xff0c;即如果嵌套了多个 GestureDetector&#xff0c;点击事件会从最内层的 GestureDetector 开始触发&#xff0c;然后依次向外层传递。如果你希望控制事件的优先级或阻止事件冒泡&#xff0c;可以使用…...

编程日记 2025/1/19 6:01:04

昇腾环境ppstreuct部署问题记录

测试代码 我是在华为昇腾910B3上测试的PPStructure。 import os import cv2 from PIL import Image #from paddleocr import PPStructure,draw_structure_result,save_structure_res from paddleocr_asyncio import PPStructuretable_engine PPStructure(show_logTrue, imag…...

编程日记 2025/1/19 6:00:03

基于 Python 的财经数据接口库：AKShare

AKShare 是基于 Python 的财经数据接口库&#xff0c;目的是实现对股票、期货、期权、基金、外汇、债券、指数、加密货币等金融产品的基本面数据、实时和历史行情数据、衍生数据从数据采集、数据清洗到数据落地的一套工具&#xff0c;主要用于学术研究目的。 安装 安装手册见…...

编程日记 2025/1/19 5:58:01

电力场景红外测温图像绝缘套管分割数据集labelme格式2436张1类别

数据集格式&#xff1a;labelme格式(不包含mask文件&#xff0c;仅仅包含jpg图片和对应的json文件) 图片数量(jpg文件个数)&#xff1a;2436 标注数量(json文件个数)&#xff1a;2436 标注类别数&#xff1a;1 标注类别名称:["arrester"] 每个类别标注的框数&am…...

编程日记 2025/1/19 5:53:58

数字艺术类专业人才供需数据获取和分析研究

本文章所用数据集&#xff1a;数据集 本文章所用源代码&#xff1a;源代码和训练好的模型 第1章 绪论 1.1研究背景及意义 随着社会经济的迅速发展和科技的飞速进步&#xff0c;数字艺术类专业正逐渐崛起&#xff0c;并呈现出蓬勃发展的势头。数字艺术作为创作、设计和表现形式的…...

编程日记 2025/1/19 5:50:54

Java中json的一点理解

一、Java中json字符串与json对象 1、json本质 json是一种数据交换格式。 常说的json格式的字符串 > 发送和接收时都只是一个字符串&#xff0c;它遵循json这种格式。 2、前后端交互传输的json是什么&#xff1f; 前后端交互传输的json都是json字符串 比如&#xff1a;…...

编程日记 2025/1/19 5:35:41

Vue项目搭建教程超详细

目录 一. 环境准备 1. 安装node.js 2. 安装Vue cli 二. 创建 Vue 2 项目 1. 命令行方式 2. vue ui方式 一. 环境准备 1. 安装node.js 可参考node.js卸载与安装超详细教程-CSDN博客 2. 安装Vue cli npm install -g vue/cli检查是否安装成功 vue --version Vue CLI …...

编程日记 2025/1/19 5:32:38

2025年01月蓝桥杯Scratch1月stema选拔赛真题—美丽的图形

美丽的图形 编程实现美丽的图形具体要求: 1)点击绿旗&#xff0c;角色在舞台中心&#xff0c;如图所示&#xff1b; 2)1秒后&#xff0c;绘制一个边长为 140的红色大正方形&#xff0c;线条粗细为 3&#xff0c;正方形的中心为舞台中心&#xff0c;如图所示; 完整题目可点击下…...

编程日记 2025/1/19 5:26:31

【React】插槽渲染机制

目录 通过 children 属性结合条件渲染通过 children 和 slot 属性实现具名插槽通过 props 实现具名插槽 在 React 中&#xff0c;并没有直接类似于 Vue 中的“插槽”机制&#xff08;slot&#xff09;。但是&#xff0c;React 可以通过 props和 children 来实现类似插槽的功能…...

编程日记 2025/1/19 5:20:25

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/12/24 1:49:19

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/10/25 17:23:41

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

编程新知 2025/12/24 2:04:45

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2025/12/23 14:57:58

进程地址空间（比特课总结）

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

编程新知 2025/11/15 6:48:52

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2025/12/20 8:36:22

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/11/9 19:17:07

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2025/12/23 4:08:51

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

编程新知 2025/12/21 9:43:13

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2025/12/10 5:18:09