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

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

news 2025/7/13 8:41:09

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

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2025/7/12 6:00:25

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2025/7/10 15:05:29

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/7/12 23:50:30

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2025/7/12 13:01:09

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2025/7/8 17:54:23

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/6/21 8:18:07

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2025/7/11 21:26:03

C#学习第29天：表达式树（Expression Trees）

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

编程新知 2025/7/9 13:55:24

【LeetCode】3309. 连接二进制表示可形成的最大数值（递归|回溯|位运算）

LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 题目描述解题思路Java代码 题目描述 题目链接&#xff1a;LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...

编程新知 2025/7/5 18:01:05

如何在Windows本机安装Python并确保与Python.NET兼容

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

编程新知 2025/7/13 3:43:55