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

前端HTML+CSS+JS的入门学习

news 2026/3/28 3:30:51

一.HTML

HTML（HyperText Markup Language）即超文本标记语言，是用于创建网页和网页应用程序的标准标记语言。它不是一种编程语言，而是一种标记语言，通过一系列的元素（elements）来告诉浏览器如何显示网页上的内容，如文本、图片、链接、表格、列表等。

HTML 文档由一系列的标签（tags）组成，这些标签告诉浏览器如何显示内容。标签通常成对出现，例如 <p> 和 </p>，其中 <p> 是开始标签，表示一个段落的开始，而 </p> 是结束标签，表示该段落的结束。不过，也有一些标签是自闭和的，比如 <img /> 或 <br />，它们不需要结束标签。

HTML 文档的基本结构包括以下几个部分：

  1. <!DOCTYPE html>：声明文档类型和HTML版本，例如 <!DOCTYPE html> 表明这是一个HTML5文档。

  2. <html>：这个标签包裹了整个HTML文档的内容。

  3. <head>：包含了文档的元数据（metadata），如文档的标题（<title>）、字符集定义（<meta charset="utf-8">）、链接到样式表（<link rel="stylesheet" href="styles.css">）和脚本文件（<script src="script.js"></script>）等。

  4. <body>：包含了可见的页面内容，如文本、图片、视频、游戏、可交互的表单等。

下面是一个简单的HTML示例，展示了这些基本结构：

<!DOCTYPE html>  
<html>  
<head>  <meta charset="UTF-8">  <title>我的第一个网页</title>  
</head>  
<body>  <h1>欢迎来到我的网页</h1>  
<p>这是一个段落。</p>  </body>  
</html>

二.CSS

CSS（Cascading Style Sheets）即层叠样式表，是一种用来为结构化文档（如HTML或XML）添加样式（字体、间距和颜色等）的计算机语言。CSS 可以控制网页的布局，以及文本、颜色、字体等几乎所有外观方面的东西。通过使用CSS，网页的样式和内容可以分离，这使得网站的内容更加易于维护和更新。

CSS 有几个关键的特点：

  1. 层叠（Cascading）：CSS 允许来自多个源的样式信息被合并到一个文档中。这意呀着如果多个样式应用于同一个元素，浏览器将按照特定的规则（如重要性、源顺序和特异性）来决定哪个样式将最终应用于该元素。

  2. 继承和层叠：CSS 允许样式从一个元素“继承”到其他元素。这意味着如果你为某个元素设置了样式，那么它的子元素（在HTML结构中嵌套的元素）可能会继承这些样式，除非你为子元素明确指定了不同的样式。

  3. 选择器（Selectors）：CSS 使用选择器来指定哪些元素应该被样式化。选择器可以是基于元素名、类名、ID、属性等的简单或复杂的表达式。

  4. 样式规则（Style Rules）：每条CSS规则由选择器和一组声明组成。声明由属性和值组成，它们之间用冒号分隔，整个声明用分号结束。例如，color: blue; 是一条声明，它指定了文本颜色为蓝色。

  5. 外部、内部和内联样式：CSS 可以通过三种方式添加到HTML文档中：作为外部样式表（在单独的.css文件中）、作为内部样式表（在HTML文档的<head>部分中的<style>标签内），或作为内联样式（直接在HTML元素的style属性中）。

下面是一个简单的CSS示例，展示了如何改变HTML元素的样式：

<!DOCTYPE html>  
<html>  
<head>  <meta charset="UTF-8">  <title>CSS 示例</title>  <style>  /* 这是一个内部样式表 */  body {  background-color: lightblue;  }  h1 {  color: navy;  margin-left: 20px;  }  p {  color: gray;  }  </style>  
</head>  
<body>  <h1>这是一个标题</h1>  
<p>这是一个段落。</p>  </body>  
</html>

在这个示例中，我们使用了内部样式表来定义HTML文档的样式。我们为body元素设置了背景颜色，为h1元素设置了文本颜色和左边距，为p元素设置了文本颜色。当浏览器加载这个HTML文档时，它会应用这些样式，从而改变页面的外观。

三.JS

JS，全称JavaScript，是一种高级的、解释执行的编程语言，它是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。JavaScript 最初是由 Netscape 的 Brendan Eich 在1995年设计的，最初命名为 LiveScript，但后来 Netscape 与 Sun Microsystems 合作，将其更名为 JavaScript，以与 Java 语言产生关联（尽管它们之间并没有编程语言的直接联系）。

JavaScript 是一种广泛用于开发网页的脚本语言，它可以直接嵌入 HTML 页面中，并通过浏览器内置的 JavaScript 引擎执行。JavaScript 可以用来给 HTML 网页添加动态功能，比如响应用户的各种操作（点击、滚动、输入等）、操作 DOM（文档对象模型）以改变页面内容、发送和接收数据到服务器（通过 AJAX）、控制多媒体和图形（使用 HTML5 Canvas 或 WebGL）等。

JavaScript 的特点包括：

  1. 解释性：JavaScript 是一种解释性语言，这意味着它不需要预先编译成机器码即可执行。JavaScript 代码在运行时被浏览器中的 JavaScript 引擎逐行解释执行。

  2. 面向对象：虽然 JavaScript 是一种基于原型的语言，但它支持面向对象的编程范式，允许你使用对象、类（通过 ES6+ 中的类语法）和继承等概念。

  3. 事件驱动：JavaScript 允许你定义和响应 HTML 元素上的事件，如点击、滚动、键盘输入等。

  4. 跨平台：JavaScript 几乎在所有现代浏览器中都有支持，因此它是开发跨平台网页应用程序的理想选择。

  5. 动态类型：JavaScript 是一种动态类型语言，这意味着变量可以在运行时改变其类型。

  6. 异步编程：JavaScript 支持异步编程模式，如回调函数、Promises 和 async/await，这使得处理网络请求和等待长时间运行的操作变得更加容易。

JavaScript 的使用范围已经远远超出了浏览器的限制。通过 Node.js，JavaScript 可以在服务器端运行，用于构建高性能的网络服务器和应用程序。此外，JavaScript 还被用于开发移动应用（通过 React Native、Flutter 的 JavaScript 引擎等）、桌面应用（如使用 Electron 框架）和游戏（如使用 Phaser、Three.js 等库）。

相关文章：

前端HTML+CSS+JS的入门学习

一.HTML HTML&#xff08;HyperText Markup Language&#xff09;即超文本标记语言&#xff0c;是用于创建网页和网页应用程序的标准标记语言。它不是一种编程语言&#xff0c;而是一种标记语言&#xff0c;通过一系列的元素&#xff08;elements&#xff09;来告诉浏览器如何…...

编程日记 2024/9/11 8:40:10

通信电路和信道的区别与联系

通信电路和信道的区别 区分通信电路和信道主要在于理解它们的功能范围与作用机制。通信电路侧重于信息的处理和信号的调整&#xff0c;而信道更侧重于信号的实际传输。电路可以视为信道的接入点&#xff0c;但它们的设计和优化考量各不相同。例如&#xff0c;电路设计重视的传…...

编程日记 2024/9/11 8:38:08

基于深度学习的蛋白质结构预测

基于深度学习的蛋白质结构预测是利用深度学习模型来预测蛋白质的三维结构&#xff0c;这在生物学和药物研发领域具有重要意义。蛋白质的功能在很大程度上取决于其三维结构&#xff0c;准确预测蛋白质结构可以帮助科学家理解蛋白质的功能和相互作用&#xff0c;并加速药物发现的…...

编程日记 2024/9/11 8:35:05

基于 Redis 的分布式锁实现原理及步骤

实现分布式锁的目的是在分布式系统中&#xff0c;保证多个节点之间对共享资源的并发访问是互斥的。常用的分布式锁实现方式有以下几种&#xff1a;基于数据库、基于 Redis、基于 Zookeeper。下面详细介绍基于 Redis 的分布式锁实现原理及步骤。 一、Redis 分布式锁原理 唯一性…...

编程日记 2024/9/11 8:33:03

21_动态规划与数据结构结合

菜鸟&#xff1a;老鸟&#xff0c;我最近在处理一个数据操作时遇到了性能问题。我需要计算一个数组中某些子数组的和&#xff0c;但直接计算太慢了&#xff0c;有没有什么更高效的方法&#xff1f; 老鸟&#xff1a;你提到的这个问题其实可以通过动态规划结合数据结构来解决。…...

编程日记 2024/9/11 8:25:54

React与Vue的对比

异同总结 相同点&#xff1a; 都有组件化思想 都支持服务器端渲染 都有Virtual DOM&#xff08;虚拟dom&#xff09; 数据驱动视图 都有支持native的方案&#xff1a;Vue的weex、React的React native 都有自己的构建工具&#xff1a;Vue的vue-cli、React的Create React A…...

编程日记 2024/9/11 8:24:46

精密量测软件(仿KLA免费浏览器程序ProfilmOnline)

KLA在线软件分析图 软件仿KLA公司免费浏览器软件ProfilmOnline&#xff0c;软件地址ProfilmOnline - 用于3D轮廓仪和AFM的表面成像、分析和测量软件 可以直接从profilmonline上下载3D图加载对比分析&#xff0c;当前已完成的内容有 1、调平 2、尖峰去噪 3、能量密度图&…...

编程日记 2024/9/11 8:23:42

Java项目: 基于SpringBoot+mybatis+maven实现的IT技术交流和分享平台(含源码+数据库+毕业论文)

一、项目简介 本项目是一套基于SpringBootmybatismaven实现的IT技术交流和分享平台 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美…...

编程日记 2024/9/11 8:21:31

STL02——手写简单版本的list

手写一个简单版本的list 设计一个名为 List 的 List 类&#xff0c;该类具有以下功能和特性&#xff1a; 1、基础成员函数 构造函数&#xff1a;初始化 List 实例析构函数&#xff1a;清理资源&#xff0c;确保无内存泄露 2、核心功能 在 List 末尾添加元素在 List 开头添…...

编程日记 2024/9/11 8:20:21

基于SpringBoot的校园自助洗衣服务管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于JavaSpringBootVueMySQL的校园自助洗衣服务…...

编程日记 2024/9/11 8:19:19

音视频入门基础：AAC专题（2）——使用FFmpeg命令生成AAC裸流文件

在文章《音视频入门基础&#xff1a;PCM专题&#xff08;1&#xff09;——使用FFmpeg命令生成PCM音频文件并播放》中讲述了生成PCM文件的方法。通过FFmpeg命令可以把该PCM文件转为AAC裸流文件&#xff1a; ./ffmpeg -f s16le -ar 44100 -ac 2 -i audio1.pcm audio1.aac 由于…...

编程日记 2024/9/11 8:18:18

第 6 篇 自定义 Helm Chart

文章目录 第 1 步&#xff1a;创建 chartChart.yamlvalues.yamltemplates 模板文件_helpers.tpl 模板辅助文件serviceaccount.yamlservice.yamldeployment.yamlhpa.yamlingress.yamlNOTES.txttests/test-connection.yaml 第 2 步&#xff1a;检查 chart 格式第 3 步&#xff1a…...

编程日记 2024/9/11 8:17:17

Jenkis部署vue前端项目提示：sh: vue-cli-service: command not found

解决方法&#xff1a; 1. 进入到/var/lib/jenkins/workspace/项目名下&#xff0c;查看是否有node_modules&#xff0c;如果没有执行 npm install 2. 如果执行npm intall的过程中提示&#xff1a;npm ERR! 407 Proxy Authentication Required - GET http://registry.npm.taob…...

编程日记 2024/9/11 8:15:15

中介者模式mediator

学习笔记&#xff0c;原文链接 https://refactoringguru.cn/design-patterns/mediator 减少对象之间混乱无序的依赖关系。 该模式会限制对象之间的直接交互&#xff0c; 迫使它们通过一个中介者对象进行合作。...

编程日记 2024/9/11 8:14:13

GO语言性能分析

Go语言基准测试与pprof工具性能分析详解 在现代软件开发中&#xff0c;性能优化是一个重要的环节。Go语言提供了强大的工具来进行基准测试和性能分析&#xff0c;其中 testing 包用于基准测试&#xff0c;而 pprof 工具用于性能分析。本文将详细讲解如何使用这些工具来进行性能…...

编程日记 2024/9/11 8:13:12

关于 PreparedStatement

Mysql 层面的语法也支持 prepare 这个确实第一次见 PREPARE prepares a statement for execution (see Section 13.5.1, “PREPARE Statement”).EXECUTE executes a prepared statement (see Section 13.5.2, “EXECUTE Statement”).DEALLOCATE PREPARE releases a prepared…...

编程日记 2024/9/11 8:12:10

漫谈设计模式 [9]：外观模式

引导性开场 菜鸟&#xff1a;老鸟&#xff0c;我最近在做一个项目&#xff0c;感觉代码越来越复杂&#xff0c;我都快看不懂了。尤其是有好几个子系统&#xff0c;它们之间的调用关系让我头疼。 老鸟&#xff1a;复杂的代码确实让人头疼。你有没有考虑过使用设计模式来简化你…...

编程日记 2024/9/11 8:11:05

多进程编程

基本概念 进程是一个具有单独功能的程序对某个数据集在处理机上的执行过程&#xff0c;进程也是作为资源分配的一个单位。 进程和程序是相辅相成的&#xff0c;进程是一个动态概念。 进程具有并行性特征。进程具有独立性和异步性。 进程的描述 进程分为三部分&#xff1a;…...

编程日记 2024/9/11 8:07:38

7-Zip压缩包如何添加密码，加密后如何取消

压缩包文件大家经常使用&#xff0c;最熟悉的肯定是RAR、ZIP格式压缩文件&#xff0c;但是7z压缩文件格式也很好用&#xff0c;它是三种压缩文件格式中压缩率最大的。想要将文件压缩到最小&#xff0c;使用7z格式可以达到最大化。那么在使用7z压缩格式的时候&#xff0c;我们可…...

编程日记 2024/9/11 8:06:37

HarmonyOS---应用测试概述

一、应用质量要求 应用质量要求分为应用体验质量建议和应用内容合规要求两大部分。 1、应用体验质量建议 功能数据完备、基础体验要求、HarmonyOS特征增强体验要求。 &#xff08;1&#xff09;功能数据完备 &#xff08;2&#xff09;基础体验要求 &#xff08;3&#xff09;增…...

编程日记 2024/9/11 8:01:23

出海营销决战指南：从“流量过客”到“私域常客”的全局地图

2026 全球出海营销日历&#xff1a;如何在关键节点实现社媒私域流量的指数级增长&#xff1f;2026年&#xff0c;出海战场规则已变。粗放投放的红利耗尽&#xff0c;碎片化的渠道、敏感的风控与难以逾越的文化沟壑&#xff0c;正让每一分营销预算的效能急剧衰减。节点依旧汹涌&…...

编程新知 2026/3/28 3:13:14

CTE、临时表、子查询如何选？

在 SQL Server 等关系型数据库中&#xff0c;处理复杂查询逻辑时&#xff0c;子查询 (Subquery)、临时表 (Temporary Table) 和公共表表达式 (CTE, Common Table Expression) 是三种核心工具。它们各有优劣&#xff0c;选择哪种取决于具体的性能需求、数据规模、代码可读性以及…...

编程新知 2026/3/28 3:09:13

本地图片检索新方案：ImageSearch完全使用指南

本地图片检索新方案&#xff1a;ImageSearch完全使用指南 【免费下载链接】ImageSearch 基于.NET8的本地硬盘千万级图库以图搜图案例Demo和图片exif信息移除小工具分享 项目地址: https://gitcode.com/gh_mirrors/im/ImageSearch 当你的电脑中存储了成千上万张图片&…...

编程新知 2026/3/28 3:05:12

Halcon HImage转Bitmap性能大比拼：实测unsafe方案比安全方案快30倍的背后原因

Halcon HImage转Bitmap性能优化实战&#xff1a;从30倍差距到工业级解决方案 在工业视觉检测和实时图像处理领域&#xff0c;毫秒级的性能差异可能意味着生产线能否稳定运行。最近在为一个汽车零部件检测系统做性能优化时&#xff0c;我意外发现Halcon的HImage转Bitmap操作竟成…...

编程新知 2026/3/28 2:32:53

IP5306电源芯片的‘怪脾气’：实测开机半分钟就休眠？手把手教你两个硬件调试技巧

IP5306电源芯片实战调试&#xff1a;破解自动休眠难题的硬件级方案 实验室里&#xff0c;示波器屏幕上那条本该稳定的电压线突然跌落至零&#xff0c;系统再次陷入休眠——这已经是今天第七次重现IP5306芯片的"怪脾气"。作为一款广泛应用于移动电源的高集成度SOC&…...

编程新知 2026/3/28 2:32:53

从C语言到裸机运行：i.MX6ULL 的 GPIO 控制与编译链接过程分析

引言在嵌入式系统开发中&#xff0c;从高级语言到硬件控制的完整链路涉及编译、链接、寄存器配置等多个环节。本文基于 i.MX6ULL 平台&#xff0c;以 C 语言实现 LED 与蜂鸣器控制为例&#xff0c;系统分析 ARM 裸机开发中的编译工具链使用、链接脚本的作用&#xff0c;以及 GP…...

编程新知 2026/3/28 1:19:39

DXVK性能优化：让老旧系统重获新生的完美方案

DXVK性能优化&#xff1a;让老旧系统重获新生的完美方案 【免费下载链接】dxvk Vulkan-based implementation of D3D9, D3D10 and D3D11 for Linux / Wine 项目地址: https://gitcode.com/gh_mirrors/dx/dxvk 为什么老旧电脑运行新程序总是卡顿&#xff1f;DXVK如何解决…...

编程新知 2026/3/28 0:51:33

GIS开发必备：5分钟搞定EPSG3857转WGS84坐标转换（附proj4.js完整代码）

GIS开发实战&#xff1a;从原理到代码实现EPSG3857与WGS84的高效坐标转换 刚接触WebGIS开发的工程师们&#xff0c;常常会被各种坐标系搞得晕头转向。为什么高德地图上显示的位置和GPS设备采集的数据对不上&#xff1f;为什么Leaflet、OpenLayers这些库加载的瓦片地图坐标数值大…...

编程新知 2026/3/28 0:11:21

SQLite.Interop.DLL加载失败的3种修复方案 - 从运行库到项目配置全搞定

SQLite.Interop.DLL加载失败的终极解决方案&#xff1a;从运行环境到项目配置深度解析 当你正在开发一个依赖SQLite数据库的C#项目时&#xff0c;突然遇到"无法加载DLLSQLite.Interop.DLL"的错误提示&#xff0c;这绝对是一个令人头疼的问题。作为一名有多年.NET开发…...

编程新知 2026/3/28 0:11:21

MQTT通信中的QoS级别详解：SpringBoot如何选择最适合的传输质量？

MQTT通信中的QoS级别详解&#xff1a;SpringBoot如何选择最适合的传输质量&#xff1f; 在物联网和分布式系统架构中&#xff0c;消息传输的可靠性往往直接关系到业务逻辑的正确性。MQTT协议作为轻量级发布/订阅模式的通信标准&#xff0c;其QoS&#xff08;服务质量&#xff0…...

编程新知 2026/3/28 0:01:11