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

零基础学前端（二）用简单案例去理解 HTML 、CSS 、JavaScript 概念

news 2025/9/4 7:16:29

该篇适用于从零基础学习前端的小白

初学者不懂代码得含义也要坚持模仿逐行敲代码，以身体感悟带动头脑去理解新知识

一、导言

HTML，CSS，JavaScript 都是单独的语言；他们构成前端技术基础；

（1）HTML：负责网页的架构；

（2）CSS：负责网页的样式，美化；

（3）JavaScript（JS）：负责网页的行为；

我们将上述概念，拿出来，作为初学者可能还是不理解，还是一头雾水，很正常，那我们就以实践来帮助自己理解。接下来我们一起写一个简单的案例。

二、用小案例帮我们理解 HTML CSS JavaScript 各自的概念

注意: 初学者不懂代码得含义也要坚持模仿逐行敲代码，以身体感悟带动头脑去理解新知识。

我们的目标：模仿百度得输入框 和 按钮(百度一下)

1. HTML：负责网页的架构（结构）

我写了 input(文本框)标签 和 button(按钮)标签 ，在浏览器运行样式如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input /><button>百度一下</button>
</body>
</html>

在chrome浏览器运行显示效果：我们可以看出目前跟百度首页搜索行结构是一样的

2.  CSS：负责网页的样式，美化

我们观察自己编写的效果存在的问题：

第一，文本框宽度 和 高度，需要修改

第二，百度一下这个按钮，背景颜色 和 文字颜色，需要修改

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*将全部标签，自带的内外边距都设置为0，统一由自己单独去写*/*{padding: 0;margin: 0;}.inputName{width: 300px;                /* 设置宽度为300px  */height: 30px;                /* 设置高度为30px  */}.buttonName{background-color: #4E6EF2;  /* 设置背景颜色  */color: #fff;                /* 设置文字颜色  */height: 34px;                 /*为什么这里是34 而不是30*/border: none;                 /* 设置按钮的边框不显示  */padding-left: 5px;            /* 设置按钮左边内边距为 5px  */padding-right: 5px;           /* 设置按钮右边内边距为 5px  */}</style>
</head>
<body><input class="inputName" /><button class="buttonName">百度一下</button>
</body>
</html>

运行的效果图：我没有写过多的样式，主要写了基本的（担心初学者一下接受不完）

3.  JavaScript（JS）：负责网页的行为

网页的行为：主要就是指用户点击 ”百度一下“那个按钮，百度网站是发起一个搜索功能，

这里我模仿点击百度一下按钮，弹出一个警告框，之后跳转到百度官网

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;}.inputName{width: 300px;                /* 设置宽度为300px  */height: 30px;                /* 设置高度为30px  */}.buttonName{background-color: #4E6EF2;  /* 设置背景颜色  */color: #fff;                /* 设置文字颜色  */height: 34px;                 /*为什么这里是34 而不是30*/border: none;                 /* 设置按钮的边框不显示  */padding-left: 5px;            /* 设置按钮左边内边距为 5px  */padding-right: 5px;           /* 设置按钮右边内边距为 5px  */}</style>
</head>
<body><input class="inputName" /><button class="buttonName">百度一下</button>
</body>
<script>//1. 获取“百度一下”按钮的DOM节点let buttonDOM = document.getElementsByClassName("buttonName");//2. 给该按钮，添加一个点击事件的监听，当用户发起点击，就会进入function函数内部，执行下面语句buttonDOM[0].addEventListener('click',function(){alert("你点击按钮，马上跳转到百度页面");window.open("https://www.baidu.com/");});
</script>
</html>

目前JavaScript 的代码写在了<script>标签内，涉及的知识点DOM 和 BOM。

三、结束语

经过这样，我们大概理解了结构(HTML)、样式(CSS)、行为(JavaScript)，都写在哪里，具体是什么样子。不过你也会发现，他们的知识还是很多。

比如：CSS 写样式，class是什么
比如：JavaScript代码里，document、window是什么 


编程是一个很长的过程，不积跬步无以至千里，学习不能太着急。

接下来，我们就详细的学习JavaScript的知识（等我有时间更新，哈哈哈哈）

四、题外话：网页三剑客

网页三剑客，编程老人都晓得，

Dreamweaver（开发工具，作用和VsCode差不多，但功能相当老化，不是真正编程人该使用的）
Flash （由于安全问题，已经被chrome给封杀了）
Fireworks

=》这些技术都已经被淘汰，初学者不要纠结，当他们不存在就可以了。

相关文章：

零基础学前端（二）用简单案例去理解 HTML 、CSS 、JavaScript 概念

该篇适用于从零基础学习前端的小白 初学者不懂代码得含义也要坚持模仿逐行敲代码&#xff0c;以身体感悟带动头脑去理解新知识 一、导言 HTML&#xff0c;CSS&#xff0c;JavaScript 都是单独的语言&#xff1b;他们构成前端技术基础&#xff1b; &#xff08;1&#xff09;HTM…...

编程日记 2023/9/14 5:57:28

线性矩阵不等式（LMI）在控制理论中的应用

目录 &#xff08;一&#xff09;Matlab中的LMI处理工具包 &#xff08;二&#xff09;为什么LMI成为控制理论领域重要工具&#xff1f; &#xff08;三&#xff09;LMI在与Lyapunov不等式的关系 &#xff08;1&#xff09;线性矩阵不等式 &#xff08;2&#xff09;线性矩阵…...

编程日记 2023/9/14 5:55:26

如何在Python爬虫程序中使用HTTP代理？

在进行网络爬虫时&#xff0c;我们经常需要使用代理服务器来隐藏自己的真实IP地址&#xff0c;以避免被目标网站封禁或限制访问。本文将介绍如何将HTTP代理配置到Python爬虫程序中使用。 什么是HTTP代理&#xff1f; HTTP代理是一种网络代理&#xff0c;它充当客户端和服务器之…...

编程日记 2023/9/14 5:54:25

ARM架构指令集--专用指令

四、状态寄存器专用指令 CPSR寄存器-N Z C V T为0时 为ARM状态 F为0时 为开启FIQ状态 I为0时 为开启IRQ状态 图1 图2 一开始都是SVC指令&#xff0c;因为在操作系统启动的时候&#xff0c;在做一些初始化的操作&#xff0c;不允许被打断 图3 复位后CPSR寄存器为0xD3--…...

编程日记 2023/9/14 5:53:24

免费IP类api接口：含ip查询、ip应用场景查询、ip代理识别、IP行业查询...

免费IP类api接口&#xff1a;含ip查询、ip应用场景查询、ip代理识别… IP归属地-IPv6区县级&#xff1a;根据IP地址&#xff08;IPv6版本&#xff09;查询归属地信息&#xff0c;包含国家、省、市、区县和运营商等信息。IP归属地-IPv6城市级&#xff1a;根据IP地址&#xff08…...

编程日记 2023/9/14 5:52:24

Android Studio 中AGP ,Gradle ,JDK,SDK都是什么？

当进行 Android 开发时&#xff0c;以下是关键概念和工具的解释&#xff1a; Android Gradle Plugin&#xff1a; Android Gradle Plugin 是一个由 Google 提供的构建工具&#xff0c;它与 Gradle 配合使用来构建和打包 Android 应用。它提供了一组任务和功能&#xff0c;使开发…...

编程日记 2023/9/14 5:51:23

算法通关18关 | 回溯模板如何解决复原IP问题

18关的前几篇文章看过之后&#xff0c;对回溯的模板问题基本解题思路就知道了&#xff0c;就是固定的for循环问题&#xff0c;外层for循环控制横向&#xff0c;递归控制纵向&#xff0c;还要考虑撤销操作和元素是否能被重复利用问题&#xff0c;重复利用的情景较少&#xff0c;…...

编程日记 2023/9/14 5:50:22

Layui快速入门之第五节 导航

目录 一&#xff1a;基本概念 导航依赖element模块 API 渲染 属性 事件 二&#xff1a;水平导航 常规用法&#xff1a; 三&#xff1a;垂直导航 四&#xff1a;侧边垂直导航 五&#xff1a;导航主题 六&#xff1a;加入徽章等元素 七&#xff1a;面包屑导航 ps&a…...

编程日记 2023/9/14 5:49:21

使用分支——Git Checkout

这篇文章写的挺好&#xff1b; https://zhuanlan.zhihu.com/p/465954849 这里要注意&#xff0c;git 新的命令&#xff0c;通过 git switch 切换分支&#xff0c;虽然git checkout 分支 还可以用&#xff1b; 游离状态的HEADS 在我们已经见识到git checkout命令对于分支的三…...

编程日记 2023/9/14 5:48:20

【2023】数据挖掘课程设计：基于TF-IDF的文本分类

目录 一、课程设计题目 基于TF-IDF的文本分类 二、课程设计设置 1. 操作系统 2. IDE 3. python 4. 相关的库 三、课程设计目标 1. 掌握数据预处理的方法&#xff0c;对训练集数据进行预处理&#xff1b; 2. 掌握文本分类建模的方法&#xff0c;对语料库的文档进行建模…...

编程日记 2023/9/14 5:47:19

java.lang.NoSuchMethodError: java.lang.reflect.Field.trySetAccessible()Z

java.lang.NoSuchMethodError: java.lang.reflect.Field.trySetAccessible()Z 将JDK升级为11即可。 File --Project Structure – SDK Location --Gradle Setting --Gradle JDK 选择11...

编程日记 2023/9/14 5:46:18

如何使用SQL系列 之 如何在MySQL中使用存储过程

引言 通常&#xff0c;当使用关系型数据库时&#xff0c;你直接在应用程序代码中发出单独的结构化查询语言(SQL)查询来检索或操作数据&#xff0c;如SELECT、INSERT、UPDATE或DELETE。这些语句直接作用于并操作底层数据库表。如果相同的语句或一组语句中使用多个应用程序访问同…...

编程日记 2023/9/14 5:45:17

用 Github Codespaces 免费搭建本地开发测试环境

如何丝滑地白嫖一个本地开发环境&#xff1f;怎么新建一个代码空间&#xff1f; 1&#xff1a;通过Github网页新建2&#xff1a;通过VSCode插件新建 为代码创建相应的开发测试环境 如何丝滑地白嫖一个本地开发环境&#xff1f; 使用Codespaces为开发者解决这样的痛点&#xf…...

编程日记 2023/9/14 5:44:16

PyTorch实战-实现神经网络图像分类基础Tensor最全操作详解(一)

目录 前言 一、PyTorch数据结构-Tensor 1.什么是Tensor 2.数据Tensor使用场景 3.张量形态 标量&#xff08;0D 张量&#xff09; 向量&#xff08;1D 张量&#xff09; 矩阵(2D张量) 3D 张量与高维张量 二、Tensor的创建 1. 从列表或NumPy数组创建 2. 使用特定的初始…...

编程日记 2023/9/14 5:43:16

第29章_瑞萨MCU零基础入门系列教程之改进型环形缓冲区

本教程基于韦东山百问网出的 DShanMCU-RA6M5开发板 进行编写&#xff0c;需要的同学可以在这里获取&#xff1a; https://item.taobao.com/item.htm?id728461040949 配套资料获取&#xff1a;https://renesas-docs.100ask.net 瑞萨MCU零基础入门系列教程汇总&#xff1a; ht…...

编程日记 2023/9/14 5:42:15

如何搭建一个react项目（详细介绍）

要搭建一个基本的 React 项目&#xff0c;你需要执行以下步骤。在开始之前&#xff0c;请确保你已经安装了 Node.js 和 npm&#xff08;Node 包管理器&#xff09;。 搭建一个React项目 1&#xff0c;创建项目目录2&#xff0c;初始化项目3&#xff0c;安装 React 和 ReactDOM4…...

编程日记 2023/9/14 5:41:14

ActiveMQ用法

ActiveMQ 和 JMS的关系&#xff1f; ActiveMQ是流行的开源消息中间件&#xff0c;JMS是Java平台定义的一种消息传递的标准。ActiveMQ实现了JMS规范&#xff0c;因此可以使用JMS API来与ActiveMQ进行交互。 JMS定义了一种标准的API。API包括了一些接口和类&#xff0c;用于创建…...

编程日记 2023/9/14 5:40:13

TouchGFX之缓存位图

位图缓存是专用RAM缓冲区&#xff0c;应用可将位图保存&#xff08;或缓存&#xff09;在其中。 如果缓存了位图&#xff0c;在绘制位图时&#xff0c;TouchGFX将自动使用RAM缓存作为像素来源。位图缓存在许多情况下十分有用。 从RAM读取数据通常比从闪存读取要快&#xff08;特…...

编程日记 2023/9/14 5:39:12

线性代数的本质(十)——矩阵分解

文章目录 矩阵分解LU分解QR分解特征值分解奇异值分解奇异值分解矩阵的基本子空间奇异值分解的性质矩阵的外积展开式 矩阵分解 矩阵的因式分解是把矩阵表示为多个矩阵的乘积&#xff0c;这种结构更便于理解和计算。 LU分解 设 A A A 是 m n m\times n mn 矩阵&#xff0c;…...

编程日记 2023/9/14 5:37:11

vue实现鼠标拖拽div左右移动的功能

直接代码&#xff1a; <template><div class"demo"><div class"third-part" id"发展历程"><div class"title">发展历程</div><div class"content" id"nav" v-if"dataList…...

编程日记 2023/9/14 5:34:08

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

编程新知 2025/8/22 3:46:19

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/7/8 7:20:37

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

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

编程新知 2025/8/22 5:05:44

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...

编程新知 2025/8/24 2:34:08

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

编程新知 2025/8/25 12:12:12

智能仓储的未来：自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

编程新知 2025/9/1 23:52:40

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2025/9/1 20:53:16

解读《网络安全法》最新修订，把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

编程新知 2025/9/3 20:52:43

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

编程新知 2025/9/1 16:17:23

Linux系统部署KES

1、安装准备 1.版本说明V008R006C009B0014 V008&#xff1a;是version产品的大版本。 R006&#xff1a;是release产品特性版本。 C009&#xff1a;是通用版 B0014&#xff1a;是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存&#xff1a;1GB 以上 硬盘&#xf…...

编程新知 2025/8/16 12:41:25