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

HTML学习笔记（4）

news 2026/2/8 9:37: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

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2026/1/26 19:01:00

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2026/1/25 3:21:09

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2026/2/7 10:59:19

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/10/11 0:24:31

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

编程新知 2026/2/4 16:07:02

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2026/2/5 2:28:27

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

编程新知 2025/10/24 12:31:26

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

编程新知 2026/1/26 5:53:30

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

编程新知 2026/1/30 4:58:21