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

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

news 文章来源：https://blog.csdn.net/m0_59247951/article/details/142098425 2025/5/4 14:50:10

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

密码学---真题演练

✨Base加密&#xff1a;题目-base? 靶场网址&#xff1a;https://polarctf.com/ Base100加密&#xff01;&#xff01;&#xff01; 得到的新的一串密码是 rot47 密码&#xff0c;属于凯撒密码的一种变体. ✨斐波那契&#xff1a;题目-FB 从第三项开始&#xff0c;每一项都等…...

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

时间日期工具类

时间日期工具类 import java.time.*; import java.time.format.DateTimeFormatter; import java.time.temporal.ChronoUnit;public class DateTimeUtils {private static final String DEFAULT_DATE_FORMAT "yyyy-MM-dd";private static final String DEFAULT_TIME_…...

编程日记 2024/9/11 7:58:19

linux中vim常用命令大全

前言 Linux有大量的配置文件&#xff0c;所以 Linux的文本处理工具也是比较多的&#xff0c;其中编辑一些配置文件时&#xff0c;常用的工具就是 vim。在Linux中&#xff0c;Vim编辑器是一个非常强大的文本编辑工具&#xff0c;它提供了多种模式和命令来满足不同的编辑需求。以…...

编程日记 2024/9/11 7:57:15

计算机的错误计算（八十九）

摘要 探讨反双曲余切函数 acoth(x) 在 附近的计算精度问题。 Acoth(x) 函数的定义为&#xff1a; 其中 x 的绝对值大于 1 . 例1. 计算 acoth(1.000000000002) . 不妨在 Excel 的单元格中计算&#xff0c;则有&#xff1a; 若在Python中用定义直接计算&#xff0c;则有几乎…...

编程日记 2024/9/11 7:56:13

深入理解java并发编程之aqs框架

跟synchronized 相比较&#xff0c;可重入锁ReentrankLock其实原理有什么不同&#xff1f; 所得基本原理是为了达到一个目的&#xff1b;就是让所有线程都能看到某种标记。synchronized通过在对象头中设置标记实现了这一目的&#xff0c;是一种JVM原生的锁实现方式。而Reentran…...

编程日记 2024/9/11 7:55:12

ubuntu配置tftp、nfs

tftp配置 tftp是简单文件传输协议&#xff0c;基于udp实现传输。这里的简单文件&#xff0c;指的是不复杂、开销不大的文件。 先在ubuntu中安装tftp&#xff0c;输入命令&#xff1a;sudo apt-get install tftp-hpa tftpd-hpa。 接着配置tftp。 输入命令&#xff1a;sudo v…...

编程日记 2024/9/11 7:54:11

Sklearn的datasets模块与自带数据集介绍

datasets 模块 用 dir() 函数查看 datasets 模块的所有属性和函数 import sklearn.datasets as datasets# 列出 sklearn.datasets 模块中的所有属性和函数 print(dir(datasets)) datasets 模块下的数据集有三种类型&#xff1a; &#xff08;1&#xff09;load系列的经典数…...

编程日记 2024/9/11 7:50:56

css 个人喜欢的样式 速查笔记

起因&#xff0c; 目的: 记录自己喜欢的&#xff0c; 觉得比较好看的 css. 下次用的时候&#xff0c;直接复制&#xff0c;很方便。 1. 个人 html 模板&#xff0c; 导入常用的 link 设置英语字体: Noto导入默认的 css使用网络 icon 图标导入 Bootstrap css 框架 html <…...

编程日记 2024/9/11 7:47:49

C/C++ let __DATE__ format to “YYYY-MM-DD“

C/C let DATE format to “YYYY-MM-DD” code&#xff1a; #include <iostream> #include <string>class compileDate {// 静态函数&#xff0c;用来格式化并返回编译日期 static std::string formatCompileDate() {// 编译时的日期&#xff0c;格式为 "MMM…...

编程日记 2024/9/11 7:46:47

git如何灵活切换本地账号对应远程github的两个账号

git如何灵活切换本地账号对应远程github的两个账号 问题&#xff1a; 有时候我们会同时维护两个github的账号里面的仓库内容&#xff0c;这时候本地git需要频繁的切换ssh&#xff0c;以方便灵活的与两个账号的仓库可以通信。这篇日记将阐述我是怎么解决这个问题的。1. 第一个账…...

编程日记 2024/9/11 7:45:45