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

html,css,js速成

news 2025/9/19 20:40:15

准备：vscode配好c，python，vue环境，并下载live server插件。

1. html

hypertext markup language(超文本标记语言)

1. 基础语法

一个html元素由开始标签，填充文本，结束标签构成。

常见标签	说明
`<b></b>`	粗体
`<i></i>`	斜体
`<ins></ins>`	下滑线
`<del></del>`	删除线
`<br>`	换行
`<hr>`	水平线
`<ul><li></li></ul>`	无序列表
`<ol><li></li></ol>`	有序列表

<!DOCTYPE html><!-- 解释文档的类型-->
<html><head><meta charset='utf-8'><title>hello world</title><!-- 注释 --></head><body><h1>有1-6级标题</h1><p>这是一个段落标签</p><ul><li>coffee</li><li>tea</li></ul></body>
</html>

2. 元素与属性

块级元素

<div><h1><p><ul><table>

在页面以块的形式展现

出现在新的一行

占全部宽度

内联元素

<a><img><span><strong><td>

通常在块级元素内

不会导致文本换行

只占必要的部分宽度

<p>hello <strong>world</strong>!</p>
<a href='www.baidu.com' target='_blank'>百度</a>
href和target都是a标签的属性
<img src='./1.jpg'alt='没找到图片'>

3. 表格

表格由table标签定义

在这里插入图片描述

<table><thead><!--标题栏--><tr><th>菜品</th><th>价格</th></tr></thead><tbody><tr><td>双皮奶</td><td>8</td></tr><tr><td>肠粉</td><td>7</td></tr></tbody>
</table>

4. 表单

使用form元素创建表单，action属性定义表单元素提交的目标url，method属性定义提交数据的http方法。

常见的表单元素有label，input，select，option

input的type属性有text,password,radio(单选框),checkboxes(复选框),submit

在这里插入图片描述

<form action='form.js' method='post'><div><label>username:</label><input type='text' name='u' placeholder='input your username'></input></div><div>password:<input type='password' name='p'></input><input type='submit' name='s' value='提交'></input></div>
</form>

2. css

1. 基础语法

Cascading Style Sheets，层叠样式表

css规则由选择器和声明构成。

选择器主要有元素选择器，类选择器，id选择器。

<style>
h4{/*元素选择器*/color:red;
}
.class1{ /* .号开头为类选择器*/color:green;
}
#id1{/* #号开头id选择器*/color:blue;
}
</style>
<h4>123</h4>
<p class='class1'>123</p>
<p id='id1'>123</p>

2. 层级关系

可以定义父类和子类，方便嵌套的时候区分。

<style>
.outside{color:red;.inner2{text-align:right;}
}
.outside .inner1{text-align:center;
}
.b{font-size:30px;
}
</style>
<div class='outside'>
<p>123</p>
<p class='inner1 b'>123</p><!--使用多个类-->
<p class='inner2 '>123</p>
</div>

3. 颜色和文本

颜色主要有名称，rgb和hex格式

green 绿色

rgb(0,0,255) 蓝色

#FF0000 红色

文本属性	说明
background-color:#f2f2f2;	背景颜色
background-image:url(‘1.jpg’);	背景图片
font-family:“Times New Roman”,Georgia;	字体
text-indent:50px;	首行缩进
line-height:32px;	行间距
text-align:left;	水平对齐方式
font-size:30px;	字体大小
font-weight:200;	字体粗细
word-spacing:20px;	字间距

4. 盒子模型

在这里插入图片描述

一般盒子模型包括：边距(margin)，边框(border)，填充(padding)，和实际内容(content)。

盒子的四个方位为top,right,bottom,left

.box1{/*border:1px solid #98bf21;*//*border-width:1px;*//*border-style:dashed;*//*margin-right:10px;右侧边距10px*//*margin: 10px;上下左右等宽*//*margin: 6px 12px;上下6px，左右12px*//*padding:6px 10px 4px 7px solid red;*//*分别指定上右下左*/}

5. display布局

块级元素(block)

内联元素(inline)

内联块级元素(inline-block)

隐藏元素(none)

灵活布局(flex)

网格布局(grid)

<style>
.none{display:none;
}
.inline-block{ <!--可设置宽高填充行间距-->display:inline-block;width:100px;height:120px;
}</style>
<p class='none'>看不见我</p>
<span class='inline-block'>good</span>
<span>job</span>

6. 定位

相对定位 relative，相对于正常位置移动

绝对定位 absolute，比如h2放在什么位置

静态定位 static ，不受top,bottom等影响

固定定位 fixed，窗口滚动它不移动。

<style>
h2.pos_abs{position:absolute;left:100px;top:150px;
}
h2.pos_rel{position:relative;top:100px;
}
</style>
<h2>正常位置</h2>
<h2 class='pos_abs'>绝对位置</h2>
<h2 class='pos_rel'>相对位置</h2>

3. javaScript

JS可以操作浏览器(BOM)和网页(DOM)。

vscode下载live server插件。

在index.html里输入!，然后按Tab生成html模板。

在这里插入图片描述

1. 基础

新建index.js文件写入<script>console.log('hello')</script>，然后在index.html里面写入如下代码。

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><p>新手入门</p><script src="index.js"></script>
</body>
</html>

用live server打开html文件，再F12就可以在console看到结果。

在这里插入图片描述

此外，还可以用node运行js文件。

在这里插入图片描述

2. 变量与常量

可以用var(全局)，let声明变量，用const声明常量。

var a=5;
let b;
b=4;
const c=6;//常量必须在声明时定义

基本类型	说明
String	字符串
Number	数字
Boolean	布尔
null	null的类型标记为0,null表示null指针，返回值为object
undefined	未定义

const a='John';
const price=65.5;
const is_not=false;
const x=null;
const y=undefined;
console.log(typeof y);
console.log("my name is "+a);
console.log(`A pair of shorts costs ${price} yuan.`);//写模板字符串记得用反引号

字符串内置属性和方法	说明
s.length	字符串长度
s.split(“”)	分割字符串成数组
s.toUpperCase()	全大写
s.toLowerCase()	全小写
s.substring(0,5)	起始0号位，左闭右开截取字符串

3. 引用数据类型

引用数据类型主要有：对象Object，数组Array，函数Function

//数组
const a=new Array(1,2,3,4,5);
const b=["a",123,"abc",true];
b[3]=567;
console.log(b[3]);a.push(6)//末尾添加元素
a.pop()//去除末尾元素
a.unshift(0)//开头添加元素
a.indexOf(2)//返回元素2的位置
Array.isArray(a)//判断a是否是个数组//对象
const p={f:"jkloli",a:18,homies:['miku','あずませれん','A-SOUL'],address:{detail:"Platform 9-3/4",state:"UK",},
};
p.n=66;//添加属性
console.log(p.homie[2]);
const {a,address:{state}}=p;//抽取同名变量
console.log(state);

4. 对象数组和JSON

//对象数组
const t=[{id:1,text:"apple"},{id:2,text:"banana"},{id:3,text:"coconut"}
];
console.log(t[2].text);
const j=JSON.stringify(t);//将一个JavaScript对象或值转换为JSON格式字符串
const k=JSON.parse(j);//转化成JSON对象
console.log(j);//[{"id":1,"text":"apple"},{"id":2,"text":"banana"},{"id":3,"text":"coconut"}]

5. if…switch…for…while

==相等，只比较值

===严格相等，比较值和类型

var x=0;
if(x===10){console.log("10");
}else if(x>10){console.log(">10");
}else{console.log("<10");
}

color="khaki";
switch(color){case "darkviolet":console.log("darkviolet");break;case "khaki":console.log("khaki");break;default:console.log("other");
}

let sum=0;
for(let i=0;i<10;i++){sum+=i;
}
console.log(sum);
let num=1;
i=1;
while(i<5){num*=i;i++;
}
console.log(num);

let a=[1,2,3,4,5];
for(let i of a){console.log(i);
}

6. 函数

function add(a,b){return a+b;
}
//匿名函数
const sub= function (a,b){return a-b;
}
console.log(sub(5,1));

html,css,js速成

准备：vscode配好c，python，vue环境，并下载live server插件。 1. html hypertext markup language(超文本标记语言) 1. 基础语法一个html元素由开始标签，填充文本，结束标签构成。常见标签说明<b>…...

编程日记 2024/2/6 18:16:59

《Docker极简教程》--Docker基础--基础知识（一）

在这篇文章中我们先大致的了解以下Docker的基本概念，在后续的文章中我们会详细的讲解这些概念以及使用。一、容器(Container) 1.1 容器的定义和特点容器的定义容器是一种轻量级、可移植的软件打包技术，用于打包应用及其依赖项和运行环境&#xff0c…...

编程日记 2024/2/6 18:13:56

Web html和css

目录 1 前言2 HTML2.1 元素(Element)2.1.1 块级元素和内联(行级)元素2.1.2 空元素 2.2 html页面的文档结构2.3 常见标签使用2.3.1 注释2.3.2 标题2.3.3 段落2.3.4 列表2.3.5 超链接2.3.6 图片2.3.7 内联(行级)标签2.3.8 换行 2.4 属性2.4.1 布尔属性 2.5 实体引用2.6 空格2.7 D…...

编程日记 2024/2/6 18:12:55

Three.js学习6：透视相机和正交相机

一、相机相机 camera，可以理解为摄像机。在拍影视剧的时候，最终用户看到的画面都是相机拍出来的内容。 Three.js 里，相机 camera 里的内容就是用户能看到的内容。从这个角度来看，相机其实就是用户的视野，就像用户的眼…...

编程日记 2024/2/6 18:04:46

❤ React18 环境搭建项目与运行（地址已经放Gitee开源）

❤ React项目搭建与运行环境介绍 node v20.11.0 react 18.2 react-dom 18.2.0一、React环境搭建第一种普通cra搭建 1、检查本地环境 node版本 18.17.0 检查node和npm环境 node -v npm -v 2、安装yarn npm install -g yarn yarn --version 3、创建一个新的React项目…...

编程日记 2024/2/6 18:02:45

2024 RTE行业（实时互动行业）人才发展学习总结

解决方案人才画像开发者人才素质要求： 具备多个领域的技术知识注重团队合作，具备协作能力以用户为导向的用户体验意识具备创新思维和解决问题的能力需快速响应行业变化和持续的学习能力具备项目管理能力学习和吸收新知识的渠道 RTE人才分类...

编程日记 2024/2/6 18:01:43

92.网游逆向分析与插件开发-游戏窗口化助手-显示游戏数据到小助手UI

内容参考于：易道云信息技术研究院VIP课上一个内容：游戏窗口化助手的UI设计-CSDN博客码云地址（游戏窗口化助手分支）：https://gitee.com/dye_your_fingers/sro_-ex.git 码云版本号：e8116af3a7b0186adba…...

编程日记 2024/2/6 17:59:41

Stable Diffusion 模型下载：majicMIX fantasy 麦橘幻想

文章目录模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十下载地址模型介绍非常推荐的一个非常绚丽、充满幻想的大模型，由国人“Merjic”发布，下载量颇高。这个模型风格炸裂，远距离脸部需要inpaint以达成…...

编程日记 2024/2/6 17:56:38

docker compose安装minio

要使docker-compose管理的容器（如MinIO）在系统启动时自动启动，你需要使用Docker的重启策略。在你的docker-compose.yml文件中为MinIO服务添加restart策略即可实现这一目标。restart: always指令确保了在容器退出时总是重新启动容器&#xff0…...

编程日记 2024/2/6 17:54:34

二、SSM 整合配置实战

本章概要依赖整合和添加控制层配置编写(SpringMVC 整合)业务配置编写(AOP/TX 整合)持久层配置编写(MyBatis 整合)容器初始化配置类整合测试 2.1 依赖整合和添加数据库准备数据库脚本 CREATE DATABASE mybatis-example;USE mybatis-example;CREATE TABLE t_emp(emp_id INT…...

编程日记 2024/2/6 17:53:34

『运维备忘录』之 Yum 命令详解

运维人员不仅要熟悉操作系统、服务器、网络等只是，甚至对于开发相关的也要有所了解。很多运维工作者可能一时半会记不住那么多命令、代码、方法、原理或者用法等等。这里我将结合自身工作，持续给大家更新运维工作所需要接触到的知识点，希望大…...

编程日记 2024/2/6 17:49:30

CSS中可继承与不可继承属性有哪些

一、无继承性的属性 1.display：规定元素应该生成的框的类型属性值作用none元素不显示，并且会从文档流中移除。block块类型。默认宽度为父元素宽度，可设置宽高，换行显示。inline行内元素类型。默认宽度为内容宽度，不…...

编程日记 2024/2/6 17:48:29

Zephyr NRF7002 实现AppleJuice

BLE的基础知识 ble的信道和BR/EDR的信道是完全不一样的。但是范围是相同的，差不多也都是2.4Ghz的频道。可以简单理解为空中有40个信道0~39信道。两个设备在相同的信道里面可以进行相互通信。而这些信道SIG又重新编号： 这个编号就是把37 38 39。 3个信道…...

编程日记 2024/2/6 17:46:26

（已解决）vue+element-ui实现个人中心，仿照原神

差一个个人中心页面，看到了这个博主的个人中心，真的很不错地址：vueelement仿原神实现好看的个人中心最终效果：...

编程日记 2024/2/6 17:43:24

Webpack插件浅析

常用的webpack插件功能介绍： 1.HotModuleReplacementPlugin 模块热更新插件。Hot-Module-Replacement的热更新是依赖于webpack-dev-server，有时是在打包文件改变时更新打包文件或者重新加载刷新整个页面，HMR是只更新修改的部分。 HotModul…...

编程日记 2024/2/6 17:39:18

【Java 数据结构】反射

反射 1 定义2 用途(了解)3 反射基本信息4 反射相关的类（重要）4.1 Class类(反射机制的起源 )4.1.1 Class类中的相关方法(方法的使用方法在后边的示例当中) 4.2 反射示例4.2.1 获得Class对象的三种方式4.2.2 反射的使用 5、反射优点和缺点 1 定义 Java的反…...

编程日记 2024/2/6 17:37:16

LangChain结合通义千问的自建知识库

LangChain结合通义千问的自建知识库在使用了通义千问API了之后，下一步就是构建知识库文档，使用了比较有名的LangChian，最后成果将自己的txt生成了知识向量库，最后我还把自己的论文生成了一个知识向量库，然后问他我的…...

编程日记 2024/2/6 17:36:14

【证书管理】实验报告

证书管理实验【实验环境】 ISES客户端【实验步骤】查看证书查看证书详细信息选择任意证书状态，在下方“证书列表”中出现符合要求的所有证书。在“证书列表”中点击要查看证书，在右侧“证书详细信息”栏出现被选证书信息。上述操作如图1.2.…...

编程日记 2024/2/6 17:34:12

App Store外区账号分享

App Store外区账号分享及注意事项外区苹果ID分享指南什么是外区苹果ID？为什么需要外区苹果ID？获取方法分享外区苹果ID的注意事项方式2获取步骤外区苹果ID分享指南在数字时代，我们的生活与各种应用和服务紧密相连。对于苹果用户而言&#…...

编程日记 2024/2/6 17:30:07

判断字符串是否包含正则表达式默认的特殊字符c++

判断字符串是否包含正则表达式默认的特殊字符业务描述： 上层配置的字符列表中，既有准确的字符串，又有可以进行正则匹配的字符串，这时候需要区分出来那些是正则匹配的字符串。思路: 判断字符串中，是否存在正则表达…...

编程日记 2024/2/6 17:29:06

地震勘探——干扰波识别、井中地震时距曲线特点

目录干扰波识别反射波地震勘探的干扰波井中地震时距曲线特点干扰波识别有效波：可以用来解决所提出的地质任务的波；干扰波：所有妨碍辨认、追踪有效波的其他波。地震勘探中，有效波和干扰波是相对的。例如，在反射波…...

编程新知 2025/9/18 14:46:36

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点： 路径验证：确保相对路径.…...

编程新知 2025/8/21 15:41:11

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用：实现组件通用属性的渐变过渡效果，提升用户体验。支持属性：width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项： 布局类属性（如宽高）变化时&#…...

编程新知 2025/9/19 1:59:06

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我，后续持续新增专题博文，谢谢！！！】上一篇我们讲了： 这一篇我们开始讲： 目录一、场景操作步骤二、日志基础关键字分级如下三、场景日志如下： 一、场景操作步骤操作步…...

编程新知 2025/9/19 13:36:41

Cesium1.95中高性能加载1500个点

一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/7/18 11:40:55