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

html,css,js速成

news 2025/7/20 0:13:28

准备：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

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...

编程新知 2025/7/9 19:27:38

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式，避免服务器受到各种恶意攻击和网络威胁，那么，服务器硬防通常都会应用在哪些场景当中呢？ 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/7/6 11:27:06

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...

编程新知 2025/7/16 1:37:04

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种）方法描述是否推荐…...

编程新知 2025/7/5 12:54:36

有限自动机到正规文法转换器v1.0

1 项目简介这是一个功能强大的有限自动机（Finite Automaton, FA）到正规文法（Regular Grammar）转换器，它配备了一个直观且完整的图形用户界面，使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

编程新知 2025/7/12 2:16:53

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考将在近日拉开帷幕，#AI 监考一度冲上热搜。当AI深度融入高考，#时间同步不再是辅助功能，而是决定AI监考系统成败的“生命线”。 AI亮相2025高考，40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕，江西、…...

编程新知 2025/7/18 20:03:36

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit（传感器服务）# 前言在运动类应用中，运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据，如配速、距离、卡路里消耗等，用户可以更清晰…...

编程新知 2025/7/18 23:39:16

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版，莫兰迪调色板清新简约工作汇报PPT模版，莫兰迪时尚风极简设计PPT模版，大学生毕业论文答辩PPT模版，莫兰迪配色总结计划简约商务通用PPT模版，莫兰迪商务汇报PPT模版，…...

编程新知 2025/7/18 23:12:29

腾讯云V3签名

想要接入腾讯云的Api，必然先按其文档计算出所要求的签名。之前也调用过腾讯云的接口，但总是卡在签名这一步，最后放弃选择SDK，这次终于自己代码实现。可能腾讯云翻新了接口文档，现在阅读起来，清晰了很多&…...

编程新知 2025/7/5 14:21:20

接口自动化测试：HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具，支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议，涵盖接口测试、性能测试、数字体验监测等测试类型…...

编程新知 2025/7/18 11:06:27

1. html

1. 基础语法

2. 元素与属性

3. 表格

4. 表单

2. css

1. 基础语法

2. 层级关系

3. 颜色和文本

4. 盒子模型

5. display布局

6. 定位

3. javaScript

1. 基础

2. 变量与常量

3. 引用数据类型

4. 对象数组和JSON

5. if…switch…for…while

6. 函数

更多参考

相关文章：