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

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

news 2025/9/19 8:20:36

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

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2025/9/19 2:49:47

突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

编程新知 2025/9/19 3:04:29

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2025/9/11 12:55:06

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

编程新知 2025/8/30 19:28:38

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2025/9/14 12:58:54

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/7/5 23:14:36

聊一聊接口测试的意义有哪些？

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

编程新知 2025/8/30 20:33:26

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

编程新知 2025/9/16 11:00:23

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2025/9/3 19:49:50

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...

编程新知 2025/6/15 18:10:15