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

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

news 2025/12/27 23:34:42

一.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

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/12/3 9:38:15

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2025/12/20 13:54:16

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2025/8/12 22:58:13

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

编程新知 2025/9/25 5:16:24

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2025/12/21 3:27:44

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

编程新知 2025/11/13 8:14:48

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

编程新知 2025/12/14 7:26:20

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2025/12/15 11:08:22

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

编程新知 2025/12/17 21:09:21