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

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

news 2026/3/30 3:53:33

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

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

一、导言

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

如何用Alternative Mod Launcher彻底解决XCOM 2模组管理的五大难题

如何用Alternative Mod Launcher彻底解决XCOM 2模组管理的五大难题 【免费下载链接】xcom2-launcher The Alternative Mod Launcher (AML) is a replacement for the default game launchers from XCOM 2 and XCOM Chimera Squad. 项目地址: https://gitcode.com/gh_mirrors/…...

编程新知 2026/3/30 2:46:38

VSCode安装与应用

vscode官网&#xff1a;https://code.visualstudio.com/Download 点击下一步 注意&#xff1a;这里将创建桌面快捷和下面的1、2勾选&#xff0c;3取消掉&#xff08;以便后续VSCode能右键快捷打开相关文件&#xff0c;3若不取消会将改变文件默认图标为VSCode&#xff0c;并且打…...

编程新知 2026/3/30 2:40:36

UniApp地图组件实战：5分钟搞定腾讯位置服务+自定义气泡弹窗（附避坑指南）

UniApp腾讯地图组件深度实战&#xff1a;从Key申请到自定义弹窗全流程解析 1. 腾讯位置服务Key申请与配置 在manifest.json中配置腾讯地图Key是第一步&#xff0c;但90%的开发者会忽略安全配置细节。正确的申请流程应该是&#xff1a; 访问腾讯位置服务官网&#xff0c;进入控制…...

编程新知 2026/3/30 1:30:07

Hugo-PaperMod导航菜单异常修复：从故障诊断到性能优化全指南

Hugo-PaperMod导航菜单异常修复&#xff1a;从故障诊断到性能优化全指南 【免费下载链接】hugo-PaperMod A fast, clean, responsive Hugo theme. 项目地址: https://gitcode.com/GitHub_Trending/hu/hugo-PaperMod Hugo-PaperMod作为一款轻量级响应式主题&#xff0c;…...

编程新知 2026/3/30 0:29:43

从零开始：Windows与Ubuntu20.04双系统安装全指南

1. 为什么需要双系统&#xff1f; 对于很多刚接触Linux的朋友来说&#xff0c;直接在物理机上安装Ubuntu可能会有点担心。毕竟Windows用习惯了&#xff0c;万一Ubuntu用不顺手怎么办&#xff1f;这时候双系统就是最好的解决方案。我自己的第一台开发机就是WindowsUbuntu双系统&…...

编程新知 2026/3/30 0:27:42

颠覆性AI语音转换技术深度解析：Retrieval-based-Voice-Conversion-WebUI的5大创新特性揭秘

颠覆性AI语音转换技术深度解析&#xff1a;Retrieval-based-Voice-Conversion-WebUI的5大创新特性揭秘 【免费下载链接】Retrieval-based-Voice-Conversion-WebUI 语音数据小于等于10分钟也可以用来训练一个优秀的变声模型&#xff01; 项目地址: https://gitcode.com/GitHub…...

编程新知 2026/3/29 23:41:19

BarrageGrab技术深度解析：构建高可用跨平台直播弹幕抓取架构

BarrageGrab技术深度解析&#xff1a;构建高可用跨平台直播弹幕抓取架构 【免费下载链接】BarrageGrab 抖音快手bilibili直播弹幕wss直连&#xff0c;非系统代理方式&#xff0c;无需多开浏览器窗口 项目地址: https://gitcode.com/gh_mirrors/ba/BarrageGrab 在当今直播…...

编程新知 2026/3/29 23:05:08

OptiScaler终极指南：3步解锁跨平台超分辨率技术，让所有显卡享受DLSS级画质提升

OptiScaler终极指南&#xff1a;3步解锁跨平台超分辨率技术&#xff0c;让所有显卡享受DLSS级画质提升 【免费下载链接】OptiScaler DLSS replacement for AMD/Intel/Nvidia cards with multiple upscalers (XeSS/FSR2/DLSS) 项目地址: https://gitcode.com/GitHub_Trending/…...

编程新知 2026/3/29 22:46:59

告别无效Agent工程！掌握这3大核心，让你的AI助手效率飙升10倍！

最近 X 上有篇文章很火&#xff0c;叫《How To Be A World-Class Agentic Engineer》&#xff0c;作者是个深度的 Agent 工程实践者。 文章开头是这样描述的&#xff1a;你用着 Claude Code&#xff0c;每天琢磨自己是不是把它的能力榨干了。偶尔看到它干出极其弱智的事情&…...

编程新知 2026/3/29 22:10:41

别再折腾无障碍服务了！用Android蓝牙HID实现投屏反控的保姆级避坑指南

蓝牙HID协议在Android投屏反控中的深度实践 如果你正在开发一款类似Scrcpy的Android投屏工具&#xff0c;肯定遇到过这样的困境&#xff1a;无障碍服务(AccessibilityService)的授权流程繁琐且容易被厂商拦截&#xff0c;反射调用InputManagerService又需要系统级权限。这时候&…...

编程新知 2026/3/29 21:56:32