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

HTML学习笔记（4）

news 2026/2/10 0:29:14

目录

一、背景相关样式

二、定位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

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

编程新知 2025/11/30 15:33:36

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/9/28 20:12:12

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2026/2/5 4:23:49

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2026/2/7 17:41:40

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/11/9 1:27:18

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2026/1/30 20:05:06

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2026/1/30 13:40:43

Neo4j 集群管理：原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...

编程新知 2025/12/27 16:43:24

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2026/1/8 11:38:36

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2026/1/27 4:58:14