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

HTML、CSS 和 JavaScript 基础知识点

article 2025/9/28 7:03:30

HTML、CSS 和 JavaScript 基础知识点

一、HTML 基础

1. HTML 文档结构

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文档标题</title>
</head>
<body><!-- 页面内容 -->
</body>
</html>

2. 常用 HTML 标签

  • 文本标签：

    <h1>到<h6>标题、<p>段落、<span>行内元素、<br>换行、<hr>水平线

  • 列表：

    <ul>无序列表、<ol>有序列表、<li>列表项、<dl>定义列表

  • 表格：

    <table>、<tr>行、<td>单元格、<th>表头、<thead>、<tbody>、<tfoot>

  • 表单：

    <form>、<input>、<textarea>、<select>、<option>、<button>、<label>

  • 多媒体：

    <img>、<audio>、<video>、<iframe>

3. HTML5 新特性

  • 语义化标签：<header>, <footer>, <nav>, <article>, <section>, <aside>
  • 表单增强：<input type="date">, <input type="email">, <input type="range">
  • 多媒体支持：<video>, <audio>, <canvas>
  • Web存储：localStorage, sessionStorage
  • Web Workers
  • 地理定位 API

二、CSS 基础

1. CSS 引入方式

<!-- 内联样式 -->
<div style="color: red;"></div><!-- 内部样式表 -->
<style>div { color: red; }
</style><!-- 外部样式表 -->
<link rel="stylesheet" href="styles.css">

2. CSS 选择器

  • 基础选择器：

    /* 元素选择器 */
p { color: blue; }/* 类选择器 */
.class-name { color: red; }/* ID选择器 */
#id-name { color: green; }/* 通配符选择器 */
* { margin: 0; padding: 0; }

  • 组合选择器：

    /* 后代选择器 */
div p { color: red; }/* 子元素选择器 */
div > p { color: blue; }/* 相邻兄弟选择器 */
h1 + p { color: green; }/* 通用兄弟选择器 */
h1 ~ p { color: yellow; }

  • 属性选择器：

    /* 存在属性 */
[title] { color: red; }/* 属性值等于 */
[type="text"] { color: blue; }/* 属性值包含 */
[class*="btn"] { color: green; }

  • 伪类和伪元素：

    /* 伪类 */
a:hover { color: red; }
li:nth-child(odd) { background: #eee; }/* 伪元素 */
p::first-letter { font-size: 2em; }
p::after { content: "★"; }

3. CSS 盒模型

  • 组成：content(内容) + padding(内边距) + border(边框) + margin(外边距)

  • box-sizing：

    /* 标准盒模型 */
box-sizing: content-box; /* 默认值 *//* 怪异盒模型 */
box-sizing: border-box; /* 宽度包含padding和border */

4. 布局技术

  • 浮动布局：

    .float-left { float: left; }
.clearfix::after {content: "";display: block;clear: both;
}

  • Flex 布局：

    .container {display: flex;justify-content: center; /* 主轴对齐 */align-items: center;    /* 交叉轴对齐 */flex-wrap: wrap;       /* 换行 */
}
.item {flex: 1;               /* 弹性比例 */
}

  • Grid 布局：

    .container {display: grid;grid-template-columns: 1fr 2fr 1fr; /* 列定义 */grid-template-rows: 100px auto;     /* 行定义 */gap: 10px;                          /* 间距 */
}
.item {grid-column: 1 / 3;                 /* 跨列 */grid-row: 1;                        /* 行位置 */
}

5. 响应式设计

  • 媒体查询：

    @media (max-width: 768px) {body { font-size: 14px; }
}

  • 视口单位：

    .box {width: 50vw;    /* 视口宽度的50% */height: 100vh;  /* 视口高度的100% */font-size: 2vmin; /* 视口较小尺寸的2% */
}

三、JavaScript 基础

1. 基础语法

  • 变量声明：

    // ES5
var name = "张三";// ES6+
let age = 25;       // 块级作用域变量
const PI = 3.14;    // 常量

  • 数据类型：

    // 原始类型
typeof "hello"      // "string"
typeof 42           // "number"
typeof true         // "boolean"
typeof undefined    // "undefined"
typeof null         // "object" (历史遗留问题)
typeof Symbol()     // "symbol"
typeof BigInt(10)   // "bigint"// 引用类型
typeof {}           // "object"
typeof []           // "object"
typeof function(){} // "function"

2. 运算符

// 算术运算符
let sum = 10 + 5;    // 15// 比较运算符
10 == "10"           // true (值相等)
10 === "10"          // false (值和类型都相等)// 逻辑运算符
true && false        // false
true || false       // true
!true               // false// 三元运算符
let result = age > 18 ? '成年' : '未成年';

3. 流程控制

  • 条件语句：

    if (score >= 90) {console.log('优秀');
} else if (score >= 60) {console.log('及格');
} else {console.log('不及格');
}// switch语句
switch(day) {case 1: console.log('周一'); break;case 2: console.log('周二'); break;default: console.log('周末');
}

  • 循环语句：

    // for循环
for (let i = 0; i < 5; i++) {console.log(i);
}// while循环
let j = 0;
while (j < 5) {console.log(j);j++;
}// for...of (ES6)
for (let item of array) {console.log(item);
}// for...in (遍历对象属性)
for (let key in obj) {console.log(key, obj[key]);
}

4. 函数

  • 函数定义：

    // 函数声明
function add(a, b) {return a + b;
}// 函数表达式
const multiply = function(a, b) {return a * b;
};// 箭头函数 (ES6)
const divide = (a, b) => a / b;// 默认参数 (ES6)
function greet(name = 'Guest') {console.log(`Hello, ${name}`);
}// 剩余参数 (ES6)
function sum(...numbers) {return numbers.reduce((acc, num) => acc + num, 0);
}

  • 高阶函数：

    // 函数作为参数
function operate(a, b, operation) {return operation(a, b);
}operate(5, 3, (x, y) => x * y); // 15// 函数返回函数
function multiplier(factor) {return function(number) {return number * factor;};
}const double = multiplier(2);
double(5); // 10

5. 对象和数组

  • 对象：

    // 对象字面量
const person = {name: '张三',age: 25,greet() {console.log(`我是${this.name}`);}
};// 访问属性
person.name;        // "张三"
person['age'];      // 25
person.greet();     // "我是张三"// ES6增强
const { name, age } = person; // 解构赋值
const newPerson = { ...person, age: 26 }; // 扩展运算符

  • 数组：

    // 数组方法
const numbers = [1, 2, 3, 4, 5];numbers.map(x => x * 2);      // [2, 4, 6, 8, 10]
numbers.filter(x => x > 2);   // [3, 4, 5]
numbers.reduce((a, b) => a + b); // 15// ES6数组操作
const newArr = [...numbers, 6, 7]; // [1, 2, 3, 4, 5, 6, 7]
const [first, second, ...rest] = numbers; // 解构赋值

6. DOM 操作

// 获取元素
const btn = document.getElementById('myButton');
const items = document.querySelectorAll('.item');// 事件监听
btn.addEventListener('click', function(event) {console.log('按钮被点击了');
});// 修改内容
const heading = document.querySelector('h1');
heading.textContent = '新标题';
heading.style.color = 'red';// 创建元素
const newDiv = document.createElement('div');
newDiv.className = 'box';
document.body.appendChild(newDiv);// 表单处理
const form = document.querySelector('form');
form.addEventListener('submit', function(e) {e.preventDefault();const input = this.querySelector('input');console.log(input.value);
});

7. 异步编程

  • 回调函数：

    function fetchData(callback) {setTimeout(() => {callback('数据加载完成');}, 1000);
}fetchData(function(data) {console.log(data);
});

  • Promise：

    function fetchData() {return new Promise((resolve, reject) => {setTimeout(() => {resolve('数据加载完成');// 或 reject('加载失败');}, 1000);});
}fetchData().then(data => console.log(data)).catch(error => console.error(error));

  • async/await：

    async function loadData() {try {const data = await fetchData();console.log(data);} catch (error) {console.error(error);}
}loadData();

四、综合案例

1. 简单的待办事项应用

<!DOCTYPE html>
<html>
<head><title>待办事项</title><style>body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; }#todo-form { display: flex; margin-bottom: 20px; }#todo-input { flex: 1; padding: 8px; }button { padding: 8px 16px; background: #4CAF50; color: white; border: none; }ul { list-style: none; padding: 0; }li { padding: 10px; border-bottom: 1px solid #ddd; display: flex; }li.completed { text-decoration: line-through; color: #888; }.delete-btn { margin-left: auto; color: red; cursor: pointer; }</style>
</head>
<body><h1>待办事项</h1><form id="todo-form"><input type="text" id="todo-input" placeholder="输入待办事项..." required><button type="submit">添加</button></form><ul id="todo-list"></ul><script>document.addEventListener('DOMContentLoaded', function() {const form = document.getElementById('todo-form');const input = document.getElementById('todo-input');const list = document.getElementById('todo-list');// 从本地存储加载待办事项let todos = JSON.parse(localStorage.getItem('todos')) || [];// 渲染待办事项列表function renderTodos() {list.innerHTML = '';todos.forEach((todo, index) => {const li = document.createElement('li');if (todo.completed) {li.classList.add('completed');}li.innerHTML = `<span>${todo.text}</span><span class="delete-btn" data-index="${index}">×</span>`;li.addEventListener('click', function() {toggleTodo(index);});list.appendChild(li);});// 保存到本地存储localStorage.setItem('todos', JSON.stringify(todos));}// 添加新待办事项form.addEventListener('submit', function(e) {e.preventDefault();const text = input.value.trim();if (text) {todos.push({ text, completed: false });input.value = '';renderTodos();}});// 切换完成状态function toggleTodo(index) {todos[index].completed = !todos[index].completed;renderTodos();}// 删除待办事项list.addEventListener('click', function(e) {if (e.target.classList.contains('delete-btn')) {const index = e.target.dataset.index;todos.splice(index, 1);renderTodos();}});// 初始渲染renderTodos();});</script>
</body>
</html>

在这里插入图片描述

相关文章：

HTML、CSS 和 JavaScript 基础知识点

HTML、CSS 和 JavaScript 基础知识点 一、HTML 基础 1. HTML 文档结构 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.…...

编程日记 2025/9/28 7:03:30

数据结构与算法分析实验12 实现二叉查找树

实现二叉查找树 1、二叉查找树介绍2.上机要求3.上机环境4.程序清单(写明运行结果及结果分析)4.1 程序清单4.1.1 头文件 TreeMap.h 内容如下&#xff1a;4.1.2 实现文件 TreeMap.cpp 文件内容如下&#xff1a;4.1.3 源文件 main.cpp 文件内容如下&#xff1a; 4.2 实现展效果示5…...

编程日记 2025/9/28 7:03:25

使用 Semantic Kernel 调用 Qwen-VL 多模态模型

使用 Semantic Kernel 调用 Qwen-VL 多模态模型 一、引言 随着人工智能技术的不断发展&#xff0c;多模态模型逐渐成为研究的热点。Qwen-VL 是阿里云推出的大规模视觉语言模型&#xff0c;支持图像、文本等多种输入形式&#xff0c;并能够进行图像描述、视觉问答等多种任务。…...

编程日记 2025/9/28 7:03:21

请求内存算法题

题意描述 有两个数组输入&#xff1a; mem [32,128,64,192,256]表示有数组长度个设备&#xff0c;每个设备能提供分配的内存大小值(均为4的倍数)&#xff0c;数组最大长度200000 reques [64,128,128,128,512]表示请求内存&#xff0c;在mem中找与请求内存大小最相近或相等的…...

编程日记 2025/9/21 5:32:43

（4）python开发经验

文章目录 1 使用ctypes库调用2 使用pybind11 更多精彩内容&#x1f449;内容导航 &#x1f448;&#x1f449;Qt开发 &#x1f448;&#x1f449;python开发 &#x1f448; 1 使用ctypes库调用 说明&#xff1a;ctypes是一个Python内置的库&#xff0c;可以提供C兼容的数据类型…...

编程日记 2025/9/28 7:03:17

深度剖析 GpuGeek 实例：GpuGeek/Qwen3-32B 模型 API 调用实践与性能测试洞察

深度剖析 GpuGeek 实例&#xff1a;GpuGeek/Qwen3-32B 模型 API 调用实践与性能测试洞察 前言 GpuGeek专注于人工智能与高性能计算领域的云计算平台&#xff0c;致力于为开发者、科研机构及企业提供灵活、高效、低成本的GPU算力资源。平台通过整合全球分布式数据中心资源&#…...

编程日记 2025/9/28 7:03:13

MindSpore框架学习项目-ResNet药物分类-数据增强

目录 1.数据增强 1.1设置运行环境 1.1.1数据预处理 数据预处理代码解析 1.1.2数据集划分 数据集划分代码说明 1.2数据增强 1.2.1创建带标签的可迭代对象 1.2.2数据预处理与格式化&#xff08;ms的data格式&#xff09; 从原始图像数据到 MindSpore 可训练 / 评估的数…...

编程日记 2025/9/28 7:03:09

e.g. ‘django.db.models.BigAutoField‘.

在Django框架中&#xff0c;django.db.models.BigAutoField 是一个用于数据库模型的字段类型&#xff0c;它用于自动增长的ID字段。这个字段类型特别适用于需要处理大量数据的应用&#xff0c;比如在大型网站或应用中&#xff0c;普通的 AutoField 可能不足以存储增长的ID值&am…...

编程日记 2025/7/6 20:02:45

ACM算法

在ACM模式下使用JavaScript/TypeScript获取输入值 在ACM编程竞赛或在线判题系统(如LeetCode、牛客网等)中&#xff0c;JavaScript/TypeScript需要特定的方式来获取输入值。以下是几种常见的获取输入的方法&#xff1a; 1. 使用Node.js的readline模块 这是最常见的处理ACM模式…...

编程日记 2025/8/6 22:39:28

MySQL入门指南：环境搭建与服务管理全流程

引言 各位开发者朋友们好&#xff01;今天我们将开启MySQL的学习之旅 &#x1f31f; 作为世界上最流行的开源关系型数据库&#xff0c;MySQL在Web应用、企业系统等领域占据着举足轻重的地位。无论你是刚入行的新手&#xff0c;还是想系统复习的老鸟&#xff0c;这篇教程都将为…...

编程日记 2025/6/4 13:17:45

【MySQL】别名设置与使用

个人主页&#xff1a;Guiat 归属专栏&#xff1a;MySQL 文章目录 1. 别名基础概念2. 列别名设置2.1 基础语法2.2 特殊字符处理2.3 计算字段示例 3. 表别名应用3.1 基础表别名3.2 自连接场景 4. 高级别名技术4.1 子查询别名4.2 CTE别名 5. 别名执行规则5.1 作用域限制5.2 错误用…...

编程日记 2025/9/28 7:03:06

【内网渗透】——S4u2扩展协议提权以及KDC欺骗提权

【内网渗透】——S4u2扩展协议提权以及KDC欺骗提权 文章目录 【内网渗透】——S4u2扩展协议提权以及KDC欺骗提权[toc]一&#xff1a;Kerberos 委派攻击原理之 S4U2利用1.1原理1.2两种扩展协议**S4U2Self (Service for User to Self)****S4U2Proxy (Service for User to Proxy)*…...

编程日记 2025/9/28 7:03:01

枢轴支压点策略

一种基于枢轴点&#xff08;Pivot Point&#xff09;的交易策略&#xff0c;主要用于在趋势行情中进行交易。 策略的核心思路是通过计算前一天的最高价、最低价和收盘价来确定当天的枢轴点&#xff0c;并据此计算出第一和第二阻力位以及第一和第二支撑位。 可以根据这些关键点位…...

编程日记 2025/6/29 12:56:31

Manus逆向工程：AI智能体的“思考”与“行动”

写在前面 本篇博客将基于 Manus 测试的行为日志，尝试反向推演其内部的核心逻辑。我们将探讨它如何巧妙地融合了计划-执行（Plan-Execute） 和 ReAct（Reasoning and Acting，即思考与行动） 两种范式，并灵活运用浏览器和 Python 解释器等工具来攻克复杂任务。 基本逻辑：从…...

编程日记 2025/7/31 17:23:39

Linux——CMake的快速入门上手和保姆级使用介绍、一键执行shell脚本

目录 一、前言 二、CMake简介 三、CMake与其他常见的构建、编译工具的联系 四、CMake入门 1、CMake的使用注意事项 2、基本的概念和术语 3、CMake常用的预定义变量 4、CMakeLists.txt文件的基本结构 五、上手实操 1、示例 ​编辑 2、一个正式的工程构建 2.1基本构…...

编程日记 2025/9/24 18:45:05

Keil5 MDK 安装教程

## 简介 Keil MDK&#xff08;Microcontroller Development Kit&#xff09;是ARM开发的一款集成开发环境&#xff08;IDE&#xff09;&#xff0c;主要用于ARM Cortex-M系列微控制器的开发。MDK包含了μVision IDE和调试器、ARM C/C编译器、中间件组件等工具。本教程将指导您完…...

编程日记 2025/9/21 0:15:04

深入浅出 IPFS 在 DApps 和 NFT 中的应用：以 Pinata 实战为例

目录 IPFS背景什么是 IPFS？IPFS 在 DApps 与 NFT 中的作用什么是 Pinata？为什么使用它？使用原生IPFS上传下载文件（HTML + JavaScript 示例）使用Pinata上传下载文件（HTML + JavaScript 示例）注册并创建APIKey使用 Pinata 上传文件和JSON（HTML + JavaScript 示例）总结IP…...

编程日记 2025/9/22 1:13:39

如何高效集成MySQL数据到金蝶云星空

MySQL数据集成到金蝶云星空&#xff1a;SC采购入库-深圳天一-OK案例分享 在企业信息化建设中&#xff0c;数据的高效流转和准确对接是实现业务流程自动化的关键。本文将聚焦于一个具体的系统对接集成案例——“SC采购入库-深圳天一-OK”&#xff0c;详细探讨如何通过轻易云数据…...

编程日记 2025/9/24 18:46:55

通过POI实现对word基于书签的内容替换、删除、插入

一、基本概念 POI&#xff1a;即Apache POI&#xff0c; 它是一个开源的 Java 库&#xff0c;主要用于读取 Microsoft Office 文档&#xff08;Word、Excel、PowerPoint 等&#xff09;&#xff0c;修改 或 生成 Office 文档内容&#xff0c;保存 为对应的二进制或 XML 格式&a…...

编程日记 2025/9/24 18:46:52

FlashInfer - 测试的GPU H100 SXM、A100 PCIe、RTX 6000 Ada、RTX 4090

FlashInfer - 测试的GPU H100 SXM、A100 PCIe、RTX 6000 Ada、RTX 4090 flyfish GPU 技术参数术语 1. Memory bandwidth (GB/s) 中文&#xff1a;显存带宽&#xff08;单位&#xff1a;GB/秒&#xff09; 定义&#xff1a;显存&#xff08;GPU 内存&#xff09;与 GPU 核心…...

编程日记 2025/9/24 18:44:09

MCP：开启AI的“万物互联”时代

MCP&#xff1a;开启AI的“万物互联”时代 ——从协议标准到生态革命的技术跃迁 引言&#xff1a;AI的“最后一公里”困境 在2025年的AI技术浪潮中&#xff0c;大模型已从参数竞赛转向应用落地之争。尽管模型能生成流畅的对话、创作诗歌甚至编写代码&#xff0c;但用户逐渐发现…...

编程日记 2025/9/22 8:15:50

企业级IP代理解决方案：负载均衡与API接口集成实践

在全球化业务扩张与数据驱动决策的背景下&#xff0c;企业级IP代理解决方案通过负载均衡技术与API接口集成&#xff0c;可有效应对高频请求、反爬机制及合规风险。以下是基于企业级场景的核心实践要点&#xff1a; 一、负载均衡与IP代理的深度协同 动态IP池的负载均衡策略 轮询…...

编程日记 2025/6/23 10:18:31

Vector和list

一、Vector和list的区别——从“它们是什么”到“区别在哪儿” 1. 它们是什么&#xff1f; Vector&#xff1a;类似于一排排整齐的书架&#xff08;数组&#xff09;&#xff0c;存放元素时&#xff0c;元素排成一条线&#xff0c;连续存储。可以很快通过编号&#xff08;索引…...

编程日记 2025/8/25 19:57:58

MongoDB从入门到实战之Windows快速安装MongoDB

前言 本章节的主要内容是在 Windows 系统下快速安装 MongoDB 并使用 Navicat 工具快速连接。 MongoDB从入门到实战之MongoDB简介 MongoDB从入门到实战之MongoDB快速入门 MongoDB从入门到实战之Docker快速安装MongoDB 下载 MongoDB 安装包 打开 MongoDB 官网下载页面&…...

编程日记 2025/9/24 18:44:15

Excelize 开源基础库发布 2.9.1 版本更新

Excelize 是 Go 语言编写的用于操作 Office Excel 文档基础库&#xff0c;基于 ECMA-376&#xff0c;ISO/IEC 29500 国际标准。可以使用它来读取、写入由 Excel、WPS、OpenOffice 等办公软件创建的电子表格文档。支持 XLAM / XLSM / XLSX / XLTM / XLTX 等多种文档格式&#xf…...

编程日记 2025/9/24 18:44:40

package-lock.json能否直接删除？

package-lock.json能否直接删除&#xff1f; package-lock.json 生成工具&#xff1a;由 npm 自动生成。 触发条件&#xff1a;当运行 npm install 时&#xff0c;如果不存在 package-lock.json&#xff0c;npm 会创建它&#xff1b;如果已存在&#xff0c;npm 会根据它精确安…...

编程日记 2025/8/10 22:16:26

Profibus DP主站转Modbus RTU/TCP网关接艾默生流量计与上位机通讯

Profibus DP主站转Modbus RTU/TCP网关接艾默生流量计与上位机通讯 艾默生流量计与Profibus DP主站转Modbus RTU/TCP网关的通讯&#xff0c;是现代工业自动化中的一个关键环节。为了实现这一过程&#xff0c;我们需要了解一些基础概念和具体操作方法。 在工业自动化系统中&…...

编程日记 2025/9/24 18:44:12

promise的说明

目录 1.说明 2.创建promise 3.处理promise结果 4.promise的链式调用 5.静态方法 6.错误处理及误区 7.then() 内部进行异步操作时&#xff0c;需返回新的 Promise 8.promise链式调用控制异步方法的执行顺序 9.总结 1.说明 Promise 是 JavaScript 中处理异步操作的核心对…...

编程日记 2025/7/31 5:08:37

Pass-the-Hash攻击原理与防御实战指南

当黑客说出"我知道你的密码"时&#xff0c;可能连他们自己都不知道你的真实密码。在Windows系统的攻防战场上&#xff0c;​​Pass-the-Hash&#xff08;哈希传递攻击&#xff09;​​就像一把可以复制的万能钥匙——攻击者不需要知道密码明文&#xff0c;仅凭密码的…...

编程日记 2025/9/19 8:26:53

Linux proc文件系统 内存影射

文章目录 常见的内存分配函数/proc/pid/ 目录解析 用户进程的内存空间分配算法mmap 分配大内存可能不在堆中换为 malloc 现象相同 常见的内存分配函数 malloc / calloc / realloc&#xff08;来自 C 标准库&#xff09; void *malloc(size_t size)&#xff1a;分配 size 字节…...

编程日记 2025/9/24 18:44:25