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

前端开发概论

article 2026/3/6 1:32:06

HTML,CSS,JS三者关系

html是骨架，决定呈现什么内容，而css定义样式，是华丽的外衣，javascript是操作逻辑，实现按钮等等，是人的灵魂

HTML文件存储着一个网页的骨架，CSS则是外衣，javascript则决定其行为逻辑
可以说，html决定了显示什么，而CSS决定了html决定的那些东西显示出来是怎样的
而我们使用的Vue,则是更高层次的框架，简化了语法
html有特定的结构，其由各种标签组成
  • 标签(tag)和元素(element)？
    简单来说，标签是构成元素的语法部分，而元素是包含标签、属性和内容的完整实体。

HTML和CSS是相互独立的，虽然css经常写在html中，但是切莫以为css是html的子集
html与css结合的方式有三种:

<!--内联式,直接在style属性里写CSS-->
<p style="color: blue;">这是一个蓝色文本的段落。</p>
  • 内部样式表：在 HTML 文件的 <head> 标签里使用 <style> 标签定义 CSS 代码。你当前编辑的文件就是这种方式：
<head><style>.container {width: 80%;margin: 0 auto;background-color: #f0f0f0;padding: 20px;}.header {background-color: #4CAF50;color: white;text-align: center;padding: 10px 0;}</style>
</head>
  • 外部样式表：把 CSS 代码存到独立的 .css 文件中，再通过 HTML 文件的 <link> 标签引入。示例：
<head><link rel="stylesheet" href="styles.css">
</head>

虽然我们日常经常见到内联和内部样式表的写法，但是CSS不是html的子集

学前端当从html学起，因为它是骨架。

html又是由标签所组成的一个个元素所组成的

html基本骨架

<!DOCTYPE html>  <!--文档类型声明，告诉浏览器，这是一个html文件-->
<html lang="zh-CN">  <!--根标签root element of an HTML page-->
<head><!--head里存放页面标题、框架和样式--><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>示例页面</title> <style>.container {width: 80%;margin: 0 auto;background-color: #f0f0f0;padding: 20px;}.header {background-color: #4CAF50;color: white;text-align: center;padding: 10px 0;}</style>
</head>
<body><!--body是血肉，给用户看的内容--><div class="container"><div class="header">这是页眉</div><p>这是一个段落，位于页眉下方。</p></div></body>
</html>

HTML is made up of elements. The HTML document is the root element.
HTML elements may have attributes, like id, class, style, etc.

in CSS, 一个选择器就是一种样式
选择器分为:

  • 元素选择器
  • class选择器
  • ID选择器

模拟数据Mock：
又称硬编码(Hard-Coded)，中文俗称“写死”，

前端这些东西忘了可以速查:
MDN
菜鸟教程
w3c

相关文章：

前端开发概论

HTML,CSS,JS三者关系 html是骨架&#xff0c;决定呈现什么内容&#xff0c;而css定义样式&#xff0c;是华丽的外衣&#xff0c;javascript是操作逻辑&#xff0c;实现按钮等等&#xff0c;是人的灵魂 HTML文件存储着一个网页的骨架&#xff0c;CSS则是外衣&#xff0c;javas…...

编程日记 2026/2/13 0:05:16

Canary

定义&#xff1a; Canary是一种用以防护栈溢出的保护机制。 原理&#xff1a; 是在一个函数的入口处&#xff0c;先从fs/gs寄存器中取出一个4字节&#xff08;eax,四字节通常是32位的文件&#xff09;或者8字节&#xff08;rax&#xff0c;通常是64位的文件&#xff09;的值…...

编程日记 2026/2/26 18:26:32

c++领域展开第十七幕——STL（vector容器的模拟实现以及迭代器失效问题）超详细！！！！

文章目录 前言vector——基本模型vector——迭代器模拟实现vector——容量函数以及push_back、pop_backvector——默认成员函数vector——运算符重载vector——插入和删除函数vector——实现过程的问题迭代器失效memcpy的浅拷贝问题 总结 前言 上篇博客我们已经详细介绍了vecto…...

编程日记 2026/2/19 14:18:45

BUUCTF Pwn babyheap_0ctf_2017 Unsorted bin attack部分

checksec exeinfo 开启了全保护 64位 查看函数&#xff1a; 堆题 增删查改齐了 可以在编辑堆的时候重新设置大小 存在堆溢出 delete函数的指针清零了 无UAF 想法是通过unsorted bin泄露libc基址&#xff1a; from pwn import *p process(./babyheap) #p remote("node…...

编程日记 2026/2/28 1:49:11

【C++指南】内存管理完全手册：new/delete

&#x1f31f; 各位看官好&#xff0c;我是egoist2023&#xff01; &#x1f30d; 种一棵树最好是十年前&#xff0c;其次是现在&#xff01; &#x1f680; 今天来学习C内存管理的相关知识。 &#x1f44d; 如果觉得这篇文章有帮助&#xff0c;欢迎您一键三连&#xff0c;分享…...

编程日记 2026/3/4 20:10:27

Vue3组合式函数（滚动监测 useScroll）

主要用于实时监测目标元素滚动位置及状态 工具函数源码 /*** 组合式函数* 实时监测目标元素滚动位置及状态** 自定义钩子用于处理滚动事件和状态* param target 滚动目标元素&#xff0c;可以是 Ref、HTMLElement、Window 或 Document&#xff0c;默认为 window* param throt…...

编程日记 2026/3/5 18:46:51

Vue.js+Element UI 登录界面开发详解【附源码】

成果图&#xff1a; 一、技术架构解析 本登录模块采用前后端分离架构&#xff0c;前端基于Vue.jsElement UI实现交互逻辑&#xff0c;主要包含以下技术要点&#xff1a; ​组件化开发 - 采用单文件组件形式组织代码​响应式设计 - 实现多终端适配​状态管理 - 使用sessionSto…...

编程日记 2026/2/25 9:47:27

瑞幸需要宇树科技

吃不到“星巴克红利”&#xff0c;瑞幸活成“Manner”。 作者|古廿 编辑|杨舟 “是不是又要开始3月革命了。”有瑞幸员工透露&#xff0c;今年开始瑞幸加强了系统排班的执行力度。新的排班体系下&#xff0c;要求各时段门店实际值班人员和排班系统一致。如果需要调整&#xf…...

编程日记 2026/2/20 5:43:49

linux 命令 vim

以下是 Linux 中 Vim 编辑器的核心命令总结&#xff0c;分为基础操作、高效编辑技巧和实用场景&#xff0c;助你快速掌握 1. 启动与退出 命令说明vim 文件名打开或新建文件vim 行号 文件名打开文件并跳转到指定行&#xff08;如 vim 10 file.txt&#xff09;:q退出 Vim&#…...

编程日记 2026/2/19 17:05:25

JS—基本数据类型和引用数据类型：1分钟掌握两者的区别

个人博客&#xff1a;haichenyi.com。感谢关注 一. 目录 一–目录二–分类三–核心区别四–实际场景中的问题五–总结对比 二. 分类 前面说过这么判断数据类型&#xff0c;今天来说说基本数据类型和引用数据类型的区别。 基本数据类型引用数据类型StringObjectNumberFunct…...

编程日记 2026/2/13 16:15:33

计算机网络的框架结构

计算机网络课程知识体系框架 一、计算机网络基础概念 1.1 网络组成要素 端系统&#xff08;主机、服务器&#xff09;通信链路&#xff08;有线/无线介质&#xff09;交换设备&#xff08;路由器、交换机&#xff09;协议体系&#xff08;TCP/IP协议簇&#xff09; 1.2 网络…...

编程日记 2026/2/18 18:59:45

解决MySQL字符集冲突引发的“Illegal mix of collations”错误

引言 在开发过程中&#xff0c;我们常常会遇到数据库层面的字符集兼容性问题。本文将通过一个典型的案例&#xff0c;分析因字符集不匹配导致的 Illegal mix of collations 错误&#xff0c;并提供完整的解决方案&#xff0c;帮助开发者彻底规避此类问题。 问题现象 假设我们…...

编程日记 2026/2/20 10:49:15

Vue中的publicPath释义

publicPath 部署应用包时的基本URL。用法和 webpack 本身的 output.publicPath 一致&#xff0c;但是 Vue CLI 在一些其他地方也需要用到这个值&#xff0c;所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。 默认情况下&#xff0c;Vue CLI 会假设你…...

编程日记 2026/2/22 15:50:22

python 库笔记：pytorch-tcn

提供以下功能 TCN类Conv1d 和 ConvTranspose1d 层的实现&#xff0c;并带有因果/非因果切换功能流式推理&#xff08;Streaming Inference&#xff09;选项&#xff0c;可用于实时应用兼容 ONNX&#xff08;Open Neural Network Exchange&#xff09;格式&#xff0c;可在非Py…...

编程日记 2026/2/15 1:18:07

如何使用MySQL快速定位慢SQL问题？企业级开发中常见业务场景中实际发生的例子，涉及分页查询问题。（二）

如何使用MySQL快速定位慢SQL问题&#xff1f; 在企业级开发中&#xff0c;尤其是涉及到订单查询的业务时&#xff0c;经常会发生慢查询的问题。比如用户翻页到后面的页数时&#xff0c;查询变慢&#xff0c;因为传统的LIMIT offset, size在数据量大时效率低下。这时候&#xff…...

编程日记 2026/2/20 5:19:25

新造车不再比拼排名，恰是曲终人散时，剩者为王

据称新能源汽车周销量不再发布&#xff0c;这可能也预示着新造车终于到了给出答案的时候了&#xff0c;新造车企业前三强已基本确立&#xff0c;其余那些落后的车企已很难有突围的机会&#xff0c;而特斯拉无疑是其中的最大赢家。 3月份第一周的数据显示&#xff0c;销量最高的…...

编程日记 2026/3/1 20:47:48

博客迁移----宝塔面板一键迁移遇到问题

前景 阿里云轻量级服务器到期了&#xff0c;又免费领了个ESC&#xff0c; 安转了宝塔面板。现在需要迁移数据&#xff0c;使用宝塔面板一键迁移功能&#xff0c;完成了数据的迁移&#xff0c;改了域名的解析&#xff0c;现在进入博客是显示502 bad grateway 宝塔搬家参考链接…...

编程日记 2026/2/20 4:49:31

蓝桥杯练习day1：自除数

前言 自除数 是指可以被它包含的每一位数整除的数。 例如&#xff0c;128 是一个 自除数 &#xff0c;因为 128 % 1 0&#xff0c;128 % 2 0&#xff0c;128 % 8 0。 自除数 不允许包含 0 。 给定两个整数 left 和 right &#xff0c;返回一个列表&#xff0c;列表的元素…...

编程日记 2025/9/3 7:23:00

大数据处理最容易的开源平台

大数据处理最容易的开源平台可以从多个角度进行分析&#xff0c;包括易用性、灵活性、成本效益以及社区支持等方面。 Apache Spark Apache Spark 是一个广泛使用的开源大数据处理框架&#xff0c;以其快速、通用和易于使用的特点而著称。它支持多种编程语言&#xff08;如 Scal…...

编程日记 2026/2/19 22:20:46

Dify 使用 - 创建 翻译 工作流

文章目录 1、选择 模板2、设置 和 基本使用3、运行应用 1、选择 模板 2、设置 和 基本使用 翻译模板 自带了系统提示词&#xff0c;你也可以修改 3、运行应用 右上角 点击 发布 – 更新&#xff0c;运行应用&#xff0c;就可以在新的对话界面中使用此功能 2025-03-18&#x…...

编程日记 2026/3/2 16:21:17

TreelabPLMSCM数字化供应链解决方案0608（61页PPT）（文末有下载方式）

详细资料请看本解读文章的最后内容。 资料解读&#xff1a;TreelabPLMSCM 数字化供应链解决方案 0608 在当今快速变化的市场环境中&#xff0c;企业面临着诸多挑战&#xff0c;Treelab 数智化 PLM_SCM 行业解决方案应运而生。该方案聚焦市场趋势与行业现状&#xff0c;致力于解…...

编程日记 2026/3/1 3:08:18

LogicFlow介绍

LogicFlow介绍 LogicFlow是一款流程图编辑框架&#xff0c;提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展机制。LogicFlow支持前端自定义开发各种逻辑编排场景&#xff0c;如流程图、ER图、BPMN流程等。在工作审批流配置、机器人逻辑编排、无代码平…...

编程日记 2026/3/2 5:58:45

[蓝桥杯 2023 省 B] 飞机降落

[蓝桥杯 2023 省 B] 飞机降落 题目描述 N N N 架飞机准备降落到某个只有一条跑道的机场。其中第 i i i 架飞机在 T i T_{i} Ti​ 时刻到达机场上空&#xff0c;到达时它的剩余油料还可以继续盘旋 D i D_{i} Di​ 个单位时间&#xff0c;即它最早可以于 T i T_{i} Ti​ 时刻…...

编程日记 2026/3/4 21:57:40

应用分层简介

一、什么是应用分层 应用分层是一种软件开发设计思想&#xff0c;它将应用程序分为多个层次&#xff0c;每个层次各司其职&#xff0c;多个层次之间协同提供完整的功能&#xff0c;根据项目的复杂程度&#xff0c;将项目分为三层或者更多层。 常见的MCV设计模式&#xff0c;就…...

编程日记 2026/2/22 14:20:47

基于香橙派 KunpengPro学习CANN(3)——pytorch 模型迁移

通用模型迁移适配可以分为四个阶段&#xff1a;迁移分析、迁移适配、精度调试与性能调优。 迁移分析 迁移支持度分析&#xff1a; 准备NPU环境&#xff0c;获取模型的源码、权重和数据集等文件&#xff1b;使用迁移分析工具采集目标网络中的模型/算子清单&#xff0c;识别第三方…...

编程日记 2026/2/21 2:35:55

【Ratis】ReferenceCountedObject接口的作用及参考意义

Apache Ratis的项目源码里，大量用到了自定义的ReferenceCountedObject接口。 本文就来学习一下这个接口的作用，并借鉴一下它解决的问题和实现原理。 功能与作用 ReferenceCountedObject 是一个接口，用于管理对象的引用计数。它的主要功能和作用包括： 引用计数管理： 提供…...

编程日记 2026/2/24 2:33:48

CentOS下安装ElasticSearch（日志分析）

准备目录 搞一个自己喜欢的目录 mkdir /usr/local/app 切换到该目录 cd /usr/local/app 下载 wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.9.2-linux-x86_64.tar.gz 选择其他版本 点击进入官网...

编程日记 2026/2/27 13:18:13

动态库、静态库、导入库

静态库、动态库与导入库详解 核心概念 类型定义文件扩展名链接方式运行时依赖静态库预编译代码集合&#xff0c;编译时嵌入可执行文件.lib (Windows)、.a (Linux/MinGW)直接链接到可执行文件无动态库运行时加载的代码库&#xff0c;允许多程序共享.dll (Windows)、.so (Linux)…...

编程日记 2025/12/26 1:09:43

电子硬件入门（三）——偏置电路

文章目录 一、先理解问题&#xff1a;为什么需要偏置电压&#xff1f;二.偏置电路生成的四大核心零件​三、工作流程图解​四、实物电路对照​五、常见问题答疑 一、先理解问题&#xff1a;为什么需要偏置电压&#xff1f; 想象一下&#xff0c;电机的电流像一条波浪线&#x…...

编程日记 2026/3/5 10:13:46

使用C++写一个递推计算均方差和标准差的用例

文章目录 代码输出关键实现说明1. 类设计2. 算法核心3. 数值稳定性 扩展应用场景1. 实时传感器数据处理2. 大规模数据集分块处理 总结 以下是用 C 实现递推计算均值、方差和标准差的完整示例代码&#xff0c;基于 Welford 算法&#xff0c;适用于实时数据流或大数据场景&#x…...

编程日记 2026/3/3 19:44:41