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

前端简介（HTML+CSS+JS）

news 2026/5/19 9:19:12

学习Django过程中遇到一些前端相关的内容，于是整理了一下相关概念。

前端开发是创建WEB页面或APP等前端界面呈现给用户的过程。
如果只是想要入门前端，只要学习网页三剑客(HTML、CSS、JavaScript)即可。
！图片HTML、CSS、JavaScript

如果把网页比喻成一个房子，HTML就是房子的地基和框架，决定了房子的结构；CSS是对房子进行装修，决定了房子的样式；JS为房子接上网线、水管，为房子提供功能。

下面看一下维基百科上的定义：
HTML：超文本标记语言（HyperText Markup Language）是一种用于创建网页的标准标记语言。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义，是一种标记语言而非编程语言。我们可以用HTML显示文字、图片、按钮、表单等。

CSS：层叠样式表（Cascading Style Sheets）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。

JavaScript：JavaScript（通常缩写为JS）是一种编程语言。它可以直接在浏览器上运行，并且有很多为专门为网页提供的功能。当然JS也可以作为后端运行。

JavaScript和Java没有什么关系。起这个名字主要是为了蹭一下Java的热度。

例子

看一个HTML、CSS、JavaScript一起工作的例子。
在这里插入图片描述

创建一个文件夹，然后新建文件hello.html，用任意文本编辑器（推荐VSCode）打开，然后写入：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello</title>
<!--我是注释-->
<!--引用css-->
<link rel="stylesheet" type="text/css" href="hello.css">
</head>
<body><h1>我的第一个标题</h1><p>我的第一个段落。</p><button type="button">点击这里</button><!--引用JS--><script src="hello.js"></script>
</body></html>

可以看到html主要内容就是一些标记（tag），比如<h1>一个标题</h1>、<p>我的第一个段落。</p>
在这里插入图片描述
图片来自https://www.runoob.com/html/html-intro.html

用浏览器打开这个HTML文件，可以看到：
在这里插入图片描述

接下来我们可以添加css文件，设置网页的格式。
创建hello.css：

/*这是个注释*//*修改标题颜色 大小*/
h1 {color:blue; font-size: 34px
}
/*修改段落颜色*/
p {color:red;
}

css 先选择html元素然后设置样式。
例如h1 选择了html中的h1元素（标题），然后通过color: blue;设置属性。
在这里插入图片描述

最后我们添加JS文件，实现一个功能：点击按钮改变段落颜色。
创建hello.js，写入：

//获取button
const btn = document.querySelector('button')
//将点击和changeColor绑定
btn.addEventListener('click', changeColor)
function changeColor(e) {console.log("in changeColor")// 获取段落元素const paragraph = document.querySelector("p");// 生成随机颜色const randomColor = "#" + Math.floor(Math.random()*16777215).toString(16);// 修改段落颜色paragraph.style.color = randomColor;
}

在这里插入图片描述

推荐:

MDN（前端开发文档及教程）:https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web

菜鸟教程（简洁的教程和文档）：https://www.runoob.com/

相关文章：

前端简介（HTML+CSS+JS）

学习Django过程中遇到一些前端相关的内容&#xff0c;于是整理了一下相关概念。 前端开发是创建WEB页面或APP等前端界面呈现给用户的过程。 如果只是想要入门前端&#xff0c;只要学习网页三剑客(HTML、CSS、JavaScript)即可。 如果把网页比喻成一个房子&#xff0c;HTML就是…...

编程日记 2023/8/24 17:11:34

List与String数组互转

一.List 转为 String 数组 1.使用toArray方法 public static void main(String[] args) {List<String> list Lists.newArrayList("1","2","3");// Java6以前版本String[] str1 list.toArray(new String[list.size()]);// Java6以后版本…...

编程日记 2023/8/24 17:10:33

MySQL中的数据类型

文章目录 1 常见的数据类型2 整数类型2.1 属性 M2.2 属性 UNSIGNED2.3 属性 ZEROFILL2.4 整数类型的适用场景 3 浮点类型4 定点类型5 位类型6 日期与时间类型6.1 YEAR 类型6.2 DATE 类型6.3 TIME 类型6.4 DATETIME 类型6.5 TIMESTAMP 类型 1 常见的数据类型 类型类型分类整数类…...

编程日记 2023/8/24 17:09:30

python多任务

​ 一、多任务 1.1 概念 多任务就是指&#xff1a;同一时间能执行多个任务。比方我们的电脑能一边QQ聊天&#xff0c;一边写论文&#xff0c;还能听歌。 1.2 多任务的优势&#xff1a; 多任务的最大好处是 充分利用CPU资源&#xff0c;提高程序的执行效率。 1.3 多任务的两种表…...

编程日记 2023/8/24 17:08:29

c语言 - inline关键字（内联函数）

概念 在编程中&#xff0c;inline是一个关键字&#xff0c;用于修饰函数。inline函数是一种对编译器的提示&#xff0c;表示这个函数在编译时应该进行内联展开。 内联展开是指将函数的代码插入到调用该函数的地方&#xff0c;而不是通过函数调用的方式执行。这样可以减少函数调…...

编程日记 2023/8/24 17:07:27

如何在Ubuntu 18.04上安装PHP 7.4并搭建本地开发环境

引言 PHP是一种流行的服务器脚本语言&#xff0c;用于创建动态和交互式web页面。开始使用你选择的语言是学习编程的第一步。 本教程将指导您在Ubuntu上安装PHP 7.4&#xff0c;并通过命令行设置本地编程环境。您还将安装依赖管理器Composer&#xff0c;并通过运行脚本来测试您…...

编程日记 2023/8/24 17:06:25

狭义相对论

文章目录 一、为什么光速不变&#xff1f;二、为什么爱因斯坦坚信“相对性原理”三、逻辑和数学显威力&#xff0c;狭义相对论时空变换&#xff08;洛伦兹变换&#xff09;推导四、新时空变换带来的新时空观1、有关相对论时间的“傻问题”2、关于相对论的“怪问题”3、关于“双…...

编程日记 2023/8/24 17:05:25

仓库使用综合练习

目录 1、使用mysql:5.6和 owncloud 镜像&#xff0c;构建一个个人网盘。 2、安装搭建私有仓库 Harbor 3、编写Dockerfile制作Web应用系统nginx镜像&#xff0c;生成镜像nginx:v1.1&#xff0c;并推送其到私有仓库。 4、Dockerfile快速搭建自己专属的LAMP环境&#xff0c;生…...

编程日记 2023/8/24 17:04:23

如何在前端实现WebSocket发送和接收TCP消息（多线程模式)

目录 第一步&#xff1a;创建WebSocket连接第二步&#xff1a;监听WebSocket事件第三步&#xff1a;发送消息第四步&#xff1a;后端处理函数说明 当在前端实现WebSocket发送和接收TCP消息时&#xff0c;可以使用以下步骤来实现多线程模式。本文将详细介绍如何在前端实现WebSoc…...

编程日记 2023/8/24 17:03:22

VB.NET通过VB6 ActiveX DLL调用PowerBasic及FreeBasic动态库

前面说的Delphi通过Activex DLL同时调用PowerBasic和FreeBasic写的DLL&#xff0c;是在WINDOWS基础平台上完成的。 而 .NET平台是架在WINDOWS基础平台之上的&#xff0c;它的上面VB.NET或C#等开发的APP程序&#xff0c;下面写一下用VB.NET&#xff0c;通过VB6注册的Activex DLL…...

编程日记 2023/8/24 17:02:19

怎样不引入图片实现前端css实现x关闭按钮

首先初始化一个dom节点 <span class"closeButton"></span>设置样式 .closeButton {width: 12px;height: 12px;margin-top: 5px;margin-right: 5px;float: right;cursor: pointer;color: #105c86;}通过伪元素before after画两条线 margin-left 的设置是…...

编程日记 2023/8/24 17:01:16

SpringBoot实现文件下载的多种方式

SpringBoot实现文件下载的几种方式 1. 将文件以流的形式一次性读取到内存&#xff0c;通过响应输出流输出到前端1.1 下载文件 2. 将输入流中的数据循环写入到响应输出流中&#xff0c;而不是一次性读取到内存&#xff0c;通过响应输出流输出到前端3. 下载网络文件到本地4. 网络…...

编程日记 2023/8/24 17:00:15

uniapp简单版语音播放

mounted() {this.ScanAudio(http://118.178.137.235:88/ipoker.mp3, 3); // 开始播放音频},ScanAudio(url, count) {// 递归终止条件&#xff1a;当循环次数小于等于 0 时&#xff0c;停止递归if (count < 0) return;// 创建内部音频上下文对象var music uni.createInnerAu…...

编程日记 2023/8/24 16:59:12

前端三剑客入门一文解决

文章目录 HTML快速开发网站Flask页面结构标签基础标签超链接图片列表下拉框表格input系列多行文本form表单 网络请求HTML案例 CSSCSS盒模型CSS样式定义CSS选择器 CSS样式使用1. 在标签上直接写2. 在head标签中写3.写到css文件中 标签样式1. 高度和宽度2. 块级和行内标签3.字体设…...

编程日记 2023/8/24 16:58:11

php curl apache 超时 500错误

web请求超过40s 就返回500错误 php的超时时间 set_time_limit无效 curl CURLOPT_TIMEOUT 设置请求时间 无效 设置apache Timeout 链接超时 无效 最后添加 Fcgid才可以 apache 配置文件 httpd.conf <IfModule mod_fcgid.c>FcgidProcessLifeTime 10000FcgidIOTimeout 1000…...

编程日记 2023/8/24 16:57:10

ValueError: too many values to unpack (expected 4)

ValueError: too many values to unpack (expected 4)这个错误通常是由于解包赋值个数与返回值个数不匹配所致。 比较常见的情况是: 1.在数据预处理函数中,使用train_test_split对数据进行分割后返回值,但解包赋值时个数与返回值不匹配。 train_test_split返回的就是(X_trai…...

编程日记 2023/8/24 16:56:09

学习Vue过程中遇到的问题汇总

Vue 控制台出现You are running Vue in development mode. Make sure to turn on production mode when deploying for production. 在页面的body标签或head标签中加入如下代码 <script type"text/javascript">Vue.config.productionTip false</script>…...

编程日记 2023/8/24 16:55:08

cloud_mall-notes03

请求方式GetMapping&#xff08;11&#xff09;用途方法返回值GetMapping(“info”)查询管理员信息getByIdsysUserGetMapping(“info/{userId}”)查询管理员详情getByIdsysUserGetMapping(“info/{roleId}”)查询角色详情getByIdsysRoleGetMapping(“info/{categoryId}”)根据标…...

编程日记 2023/8/24 16:54:06

Redis注入中出现的问题

Redis注入中出现的问题 出现的问题 Error starting ApplicationContext. To display the conditions report re-run your application with debug enabled. 2023-08-23 16:38:42.294 ERROR 32136 --- [ main] o.s.b.d.LoggingFailureAnalysisReporter : *********…...

编程日记 2023/8/24 16:53:05

机器学习实战之模型的解释性：Scikit-Learn的SHAP和LIME库详解

引言&#xff1a;机器学习模型的“黑箱”困境 机器学习模型的崛起让我们惊叹不已&#xff01;不论是预测房价、识别图片中的猫狗&#xff0c;还是推荐给你喜欢的音乐&#xff0c;这些模型都表现得非常出色。但是&#xff0c;有没有想过&#xff0c;这些模型到底是如何做出这些决…...

编程日记 2023/8/24 16:52:04

Kali Linux 保姆级教程｜从入门到渗透测试，一篇封神！

前言 Kali Linux 作为网络安全领域的「瑞士军刀」&#xff0c;集成 600 专业渗透工具&#xff0c;覆盖信息收集、漏洞利用、权限维持等全流程。本文结合最新实战场景&#xff0c;整理系统学习路径、核心工具解析及资源获取方式&#xff0c;助你快速掌握这门渗透测试必备技能。…...

编程新知 2026/5/19 7:46:38

基于树莓派A+与3.5寸PiTFT打造便携式触摸屏设备全攻略

1. 项目概述与核心价值如果你和我一样&#xff0c;对嵌入式开发和硬件DIY有浓厚的兴趣&#xff0c;那么将一块功能强大的单板计算机&#xff08;比如树莓派&#xff09;变成一个可以揣在口袋里、随时掏出来就能用的便携式触摸屏设备&#xff0c;绝对是一个充满成就感的项目。这…...

编程新知 2026/5/19 6:55:59

给排水设计新人必看：如何用SWMM快速搭建一个‘麻雀虽小五脏俱全’的练习模型？

SWMM实战入门&#xff1a;从零构建微型排水系统的设计思维训练 刚接触市政给排水设计的职场新人&#xff0c;面对SWMM软件界面总有种"知道每个按钮功能&#xff0c;却不知从何下手"的困惑。这就像拿到一套精良的绘图工具&#xff0c;却不知道如何组合线条构成有意义的…...

编程新知 2026/5/19 6:43:49

算法工程师简历封神指南：项目细节 + 论文 / 竞赛成果缺一不可

引言：算法岗简历的“死亡三连”，你中了吗？ “熟悉CNN、Transformer、大模型微调，掌握PyTorch、TensorFlow”——当面试官第88次看到这句“算法词典式”技能描述时，已经开始默默划走简历。2026年算法岗卷到什么程度？智联招聘数据显示，硕士学历算法岗平均竞争比达300:1，…...

编程新知 2026/5/19 6:43:49

德勤预计机器人投资将在2026年增长的地方

尽管德勤预测到2026年全球⼯业机器⼈基数可能达到550万个&#xff0c;但也承认“⾃2021年以来&#xff0c;年度新机器⼈销量停滞在50万台以上。”为了满⾜以⼈⼝统计为驱动的需求&#xff0c;技术⽣态系统必须解决与数据质量、集成和安全性相关的瓶颈&#xff0c;公司强调“⽬前…...

编程新知 2026/5/19 5:19:25

电子项目布线指南：从导线、电缆到连接器的核心选型与避坑

1. 项目概述&#xff1a;为什么“线”比“电路”本身更重要&#xff1f;干了十几年电子项目&#xff0c;从学生时代的第一个闪烁LED&#xff0c;到后来复杂的机器人系统和工业控制器&#xff0c;我踩过最多的坑&#xff0c;往往不是芯片选型或代码逻辑&#xff0c;而是那些看起…...

编程新知 2026/5/19 5:15:01

LOCAL_SENSITIVE_PATTERNS：不经过大模型的本地正则补强:开源免费的WPS AI 软件 察元AI文档助手

LOCAL_SENSITIVE_PATTERNS：不经过大模型的本地正则补强 摘要 本文围绕标题所述主题，结合本仓库当前源码行进行说明。仅供技术理解与内部培训，不构成定密、法务或密码测评结论。文中代码块均摘自本地仓库对应路径与行号。 正文 0. 结论先行 结论先行：保密检查由内置助手…...

编程新知 2026/5/19 3:40:39

中美Agent生态的路径差异——《重构与崛起——OpenClaw时代的中国Agent产业生态报告》解读三

易观分析&#xff1a;面对OpenClaw掀起的全球AI Agent技术浪潮&#xff0c;中美两国走出截然不同的发展路径。美国生态追求底层框架与协议的原创定义&#xff1b;而中国生态以应用驱动、平台绑定和合规先行为核心逻辑&#xff0c;快速将前沿技术转化为可落地的商业现实。这两条…...

编程新知 2026/5/19 3:29:55

【技术解析】从点测量到全场感知：DIC三维应变测量如何革新传统应变片测试范式

1. 从点到面的技术革命&#xff1a;为什么我们需要全场应变测量&#xff1f; 记得我第一次接触材料力学测试时&#xff0c;导师让我用传统应变片测量一块铝合金板的拉伸变形。我花了整整三天时间&#xff0c;在试样上贴了二十多个应变片&#xff0c;结果数据还是支离破碎。那时…...

编程新知 2026/5/19 3:00:08

2026年Java面试，不会背这些八股文真不行

Java 面试 Java 作为编程语言中的 NO.1,选择入行做 IT 做编程开发的人&#xff0c;基本都把它作为首选语言,进大厂拿高薪也是大多数小伙伴们的梦想。以前 Java 岗位人才的空缺&#xff0c;而需求量又大&#xff0c;所以这种人才供不应求的现状&#xff0c;就是 Java 工程师的薪…...

编程新知 2026/5/19 2:05:37