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

前端简介（HTML+CSS+JS）

news 2026/2/10 3:34:34

学习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

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2026/1/25 6:36:06

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2026/2/2 22:06:13

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

编程新知 2026/1/27 9:33:09

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/17 2:39:21

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...

编程新知 2025/9/29 4:00:38

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2026/2/4 13:10:38

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

编程新知 2025/9/13 18:20:34

（一）单例模式

一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

编程新知 2026/1/30 6:03:31

Qt学习及使用_第1部分_认识Qt---Qt开发基本流程

前言 学以致用,通过QT框架的学习,一边实践,一边探索编程的方方面面. 参考书:<Qt 6 C开发指南>(以下称"本书") 标识说明:概念用粗体倾斜.重点内容用(加粗黑体)---重点内容(红字)---重点内容(加粗红字), 本书原话内容用深蓝色标识,比较重要的内容用加粗倾…...

编程新知 2026/1/26 16:00:05

Oracle实用参考（13）——Oracle for Linux物理DG环境搭建（2）

13.2. Oracle for Linux物理DG环境搭建 Oracle 数据库的DataGuard技术方案，业界也称为DG，其在数据库高可用、容灾及负载分离等方面，都有着非常广泛的应用，对此，前面相关章节已做过较为详尽的讲解，此处不再赘述。 需要说明的是， DG方案又分为物理DG和逻辑DG，两者的搭建…...

编程新知 2025/11/27 17:33:50