HTML学习笔记（4）

news2025/1/21 8:49:13

目录

一、背景相关样式

二、定位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); // 网页弹窗

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

亲测有效！如何快速实现 PostgreSQL 数据迁移到 时序数据库TDengine

亲测有效！如何快速实现 PostgreSQL 数据迁移到 时序数据库TDengine

小T导读&#xff1a;本篇文章是“2024&#xff0c;我想和 TDengine 谈谈”征文活动的优秀投稿之一&#xff0c;作者从数据库运维的角度出发&#xff0c;分享了利用 TDengine Cloud 提供的迁移工具&#xff0c;从 PostgreSQL 数据库到 TDengine 进行数据迁移的完整实践过程。文章…
阅读更多...
Excel 技巧11 - 如何使用Excel作成简单的排班表(★★），weekday 函数，TEXT函数

Excel 技巧11 - 如何使用Excel作成简单的排班表(★★），weekday 函数，TEXT函数

本文讲了如何在Excel中制作简单的排班表。 1&#xff0c;排班表Layout效果 - B2 单元格找那个输入 日期 - C3 - AG3 输入日&#xff0c;就是该月份的几号&#xff0c;比如1月5号&#xff0c;就输入5 如果是周六周日&#xff0c;背景色显示为绿色 - B4 ~ 输入员工名称 当 B2…
阅读更多...
mac m1下载maven安装并配置环境变量

mac m1下载maven安装并配置环境变量

下载地址&#xff1a;Download Apache Maven – Maven 解压到一个没有中文和空格的文件夹 输入pwd查看安装路径 输入cd返回根目录再输入 code .zshrc 若显示 command not found: code你可以通过以下步骤来安装和配置 code 命令&#xff1a; 1. 确保你已经安装了 Visual Studio…
阅读更多...
w-form-select.vue（自定义下拉框组件）

w-form-select.vue（自定义下拉框组件）

文章目录 1、w-form-select.vue 组件中每个属性的含义2、实例3、源代码 1、w-form-select.vue 组件中每个属性的含义 好的&#xff0c;我们来详细解释 w-form-select.vue 组件中每个属性的含义&#xff0c;并用表格列出它们是否与后端字段直接相关&#xff1a; 属性解释表格&…
阅读更多...
Flutter项目和鸿蒙平台的通信

Flutter项目和鸿蒙平台的通信

Flutter项目和鸿蒙平台的通信 前言Flutter和Harmonyos通信MethodChannelBasicMessageChannelEventChannel 前言 大家在使用Flutter开发项目的时候&#xff0c; Flutter提供了Platfrom Channel API来和个个平台进行交互。 Flutter官方目前提供了一下三种方式来和个个平台交互&…
阅读更多...
【KOA框架】koa框架基础入门

【KOA框架】koa框架基础入门

koa是express的一层封装&#xff0c;语法比express更加简洁。所以有必要了解下koa的相关开发方法。 代码实现 package.json {"name": "koapp","version": "1.0.0","main": "index.js","scripts": {&…
阅读更多...
我的创作纪念日——我与CSDN一起走过的365天

我的创作纪念日——我与CSDN一起走过的365天

目录 一、机缘&#xff1a;旅程的开始 二、收获&#xff1a;沿路的花朵 三、日常&#xff1a;不断前行中 四、成就&#xff1a;一点小确幸 五、憧憬&#xff1a;梦中的重点 一、机缘&#xff1a;旅程的开始 最开始开始写博客是在今年一二月份的时候&#xff0c;也就是上一…
阅读更多...
DenseNet-密集连接卷积网络

DenseNet-密集连接卷积网络

DenseNet&#xff08;Densely Connected Convolutional Network&#xff09;是近年来图像识别领域中一种创新且高效的深度卷积神经网络架构。它通过引入密集连接的设计&#xff0c;极大地提高了特征传递效率&#xff0c;减缓了梯度消失问题&#xff0c;促进了特征重用&#xff…
阅读更多...
人形机器人将制造iPhone！

人形机器人将制造iPhone！

前言 优必选机器人和富士康通过一项突破性的合作伙伴关系&#xff0c;正在将先进的人形机器人&#xff08;如Walker S1及其升级版Walker S2&#xff09;整合到制造流程中&#xff0c;以改变iPhone的生产方式。这一合作旨在通过提升机器人能力、优化工作流程以及实现更智能的自动…
阅读更多...
数据结构(链表 哈希表)

数据结构(链表 哈希表)

在Python中&#xff0c;链表和哈希表都是常见的数据结构&#xff0c;可以用来存储和处理数据。 链表是一种线性数据结构&#xff0c;由一系列节点组成&#xff0c;每个节点包含一个数据元素和一个指向下一个节点的指针。链表可以用来实现栈、队列以及其他数据结构。Python中可…
阅读更多...
[苍穹外卖] 1-项目介绍及环境搭建

[苍穹外卖] 1-项目介绍及环境搭建

项目介绍 定位&#xff1a;专门为餐饮企业&#xff08;餐厅、饭店&#xff09;定制的一款软件产品 功能架构&#xff1a; 管理端 - 外卖商家使用 用户端 - 点餐用户使用 技术栈&#xff1a; 开发环境的搭建 整体结构&#xff1a; 前端环境 前端工程基于 nginx 运行 - Ngi…
阅读更多...
vmware虚拟机配置ubuntu 18.04(20.04)静态IP地址

vmware虚拟机配置ubuntu 18.04(20.04)静态IP地址

VMware版本 &#xff1a;VMware Workstation 17 Pro ubuntu版本&#xff1a;ubuntu-18.04.4-desktop-amd64 主机环境 win11 1. 修改 VMware虚拟网络编辑器 打开vmware&#xff0c;点击顶部的“编辑"菜单&#xff0c;打开 ”虚拟化网络编辑器“ 。 选择更改设置&#…
阅读更多...
AUTOSAR OS模块详解(三) Alarm

AUTOSAR OS模块详解(三) Alarm

AUTOSAR OS模块详解(三) Alarm 本文主要介绍AUTOSAR OS的Alarm&#xff0c;并对基于英飞凌Aurix TC3XX系列芯片的Vector Microsar代码和配置进行部分讲解。 文章目录 AUTOSAR OS模块详解(三) Alarm1 简介2 功能介绍2.1 触发原理2.2 工作类型2.3 Alarm启动方式2.4 Alarm配置2.5…
阅读更多...
「免填邀请码」赋能各类APP，提升转化率与用户体验

「免填邀请码」赋能各类APP，提升转化率与用户体验

在当前移动互联网的高速发展下&#xff0c;用户获取和留存已成为各类APP成功的关键。传统的注册流程虽然能够有效识别用户来源并进行用户管理&#xff0c;但随着市场竞争的激烈&#xff0c;复杂的注册和绑定步骤往往会成为用户流失的瓶颈。免填邀请码技术&#xff0c;结合自研的…
阅读更多...
Linux：expect spawn简介与用法

Linux：expect spawn简介与用法

一、背景 大家在使用linux系统的很多时候&#xff0c;都用linux指令来实现一些操作&#xff0c;执行特定的job&#xff0c;有时一些场景中需要执行交互指令来完成任务&#xff0c;比如ssh登录这个命令大家一定很熟悉&#xff1a; ssh-keygen -t rsa # 以及 ssh-copy-id -i /hom…
阅读更多...
Express的接口

Express的接口

目录 接口的跨域问题域问题 request接口代码 const express require(express) const app express() //在路由之前&#xff0c;配置cors中间件&#xff0c;解决接口跨域问题 const cors require(cors) app.use(cors())const router require(./apiRouter)app.use(/api,rout…
阅读更多...
【PCIe 总线及设备入门学习专栏 6.2 -- PCIe VDM (Vendor Defined Messages)】

【PCIe 总线及设备入门学习专栏 6.2 -- PCIe VDM (Vendor Defined Messages)】

文章目录 OverviewPCIe VDM (Vendor Defined Messages) 概述PCIe VDM Header 的各个字段及作用VDM 的工作方式例子：一个简化的 VDM 示例注意事项Overview 本文将详细介绍 PCIe VDM 及 PCIe VDM Header 各个域的作用。 PCIe VDM (Vendor Defined Messages) 概述 在 PCIe 协议…
阅读更多...
微服务学习：基础理论

微服务学习：基础理论

一、微服务和应用现代化 1、时代的浪潮&#xff0c;企业的机遇和挑战 在互联网化数字化智能化全球化的当今社会&#xff0c;IT行业也面临新的挑战&#xff1a; 【快】业务需求如“滔滔江水连绵不绝”&#xff0c;企业需要更快的交付【变】林子大了&#xff0c;百色用户&…
阅读更多...
实战演示：利用ChatGPT高效撰写论文

实战演示：利用ChatGPT高效撰写论文

在当今学术界&#xff0c;撰写论文是一项必不可少的技能。然而&#xff0c;许多研究人员和学生在写作过程中常常感到困惑和压力。幸运的是&#xff0c;人工智能的快速发展为我们提供了新的工具&#xff0c;其中ChatGPT便是一个优秀的选择。本文将通过易创AI创作平台&#xff0c…
阅读更多...
【PCIe 总线及设备入门学习专栏 6 -- PCIe Inbound and Outbound】

【PCIe 总线及设备入门学习专栏 6 -- PCIe Inbound and Outbound】

文章目录 PCIe Outbound 和 Inbound 概念详解Outbound 与 Inbound 的基础定义基于角色的详细分析关于“上游”和“下游”方向应用举例小结PCIe Outbound 和 Inbound 概念详解 PCIe（Peripheral Component Interconnect Express）是一种高速串行通信协议，用于连接主机与外部设…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023