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

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

news 2025/7/7 23:03:27

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

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

一、导言

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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/7/7 5:29:47

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2025/7/5 21:20:33

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/6/21 16:43:12

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/6/26 0:06:54

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2025/7/5 0:21:39

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/6/21 0:42:19

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/7/7 8:27:43

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/6/21 22:11:13

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2025/7/5 22:43:06

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2025/7/7 12:16:45