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

HTML学习笔记（4）

news 2025/9/16 7:54: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

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2025/9/14 1:53:04

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2025/9/13 17:45:20

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/7/30 23:37:23

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/9/9 14:51:30

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2025/9/10 3:42:08

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2025/7/22 6:12:57

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/9/15 8:33:21

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/6/25 2:48:04

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

编程新知 2025/9/5 23:36:27

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/6/15 10:41:11