”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > HTML、CSS 和 JavaScript 的工作原理

HTML、CSS 和 JavaScript 的工作原理

发布于2024-08-02
浏览:525

什么是 HTML?

HTML 是超文本标记语言的缩写。我知道这很拗口,但基本上,我们使用 HTML 来定义网页的结构或构建块。

什么是CSS?

CSS 是层叠样式表的缩写。我们用它来设计网页样式并使其美观。

什么是 JavaScript?

JavaScript 用于向网页添加功能。打个比方吧

想象一座建筑物。

How HTML, CSS, and JavaScript Work

现实世界中的建筑物就像互联网上的网页。它有一个骨架或结构——建筑物的框架和基础 (HTML)。

它还可以有漂亮的墙壁、窗户和瓷砖,以完成它并使其看起来漂亮 (CSS)。

How HTML, CSS, and JavaScript Work

它可以具有某些功能,例如成为家庭、医院或超市 (JavaScript)。

How HTML, CSS, and JavaScript Work

比如,当我们按下电梯按钮时,它就会来接我们。在我们的类比中,JavaScript 可以实现这一点。

一个真实的例子

这是一个真实的例子。假设您想建立一个像 Twitter 这样的网站。对于配置文件,您希望有这样的布局:

How HTML, CSS, and JavaScript Work

首先,我们使用 HTML 来定义此布局的构建块。这里的构建块是什么?

  1. 一个图像。
  2. 一些指示用户 Twitter 句柄的文本(例如,@KarlgustaAnnoh)。
  3. 包含消息的另一个文本块(通过故事教学编码...)。
  4. 用于编辑个人资料、位置、链接和日期的按钮/图标。
  5. 关注者数量。

我们使用 HTML 将这些构建块添加到我们的网页中。

然后,我们使用 CSS 赋予其视觉吸引力。例如,使用 CSS,我们可以将文本设为粗体(如名称),我们可以将图像设为圆形。我们还可以更改位置、链接和日期图标的颜色,并定义将鼠标悬停在它们上方时的外观。

所以,CSS 就是关于视觉效果的。借助CSS,我们还可以创建漂亮的动画。

现在,大多数网页都是交互式的。它们响应我们的操作,例如单击和滚动。这就是 JavaScript 的用武之地。使用 JavaScript,我们可以向网页添加功能或行为。例如,我们可以点击一个按钮来关注一个人。

因此,JavaScript 是一种编程语言,而 HTML(标记语言)和 CSS(样式语言)从技术上来说不是。这意味着我们不能用它们来告诉计算机该做什么。我们使用它们来定义网页的构建块并设置它们的样式。

您在互联网上看到的每个网页都是用这三种语言构建的。因此,您越了解和理解它们及其功能,您在前端开发方面就会越好。

下期见!

附注这是我的新系列。如果您是编码新手,并且需要一些学习编码方面的帮助,请查看 2 小时 Web 开发人员。

版本声明 本文转载于:https://dev.to/thekarlesi/how-html-css-and-javascript-work-266f?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何处理PHP文件系统功能中的UTF-8文件名?
    如何处理PHP文件系统功能中的UTF-8文件名?
    在PHP的Filesystem functions中处理UTF-8 FileNames 在使用PHP的MKDIR函数中含有UTF-8字符的文件很多flusf-8字符时,您可能会在Windows Explorer中遇到comploreer grounder grounder grounder gro...
    编程 发布于2025-03-28
  • 如何使用组在MySQL中旋转数据?
    如何使用组在MySQL中旋转数据?
    在关系数据库中使用mySQL组使用mySQL组进行查询结果,在关系数据库中使用MySQL组,转移数据的数据是指重新排列的行和列的重排以增强数据可视化。在这里,我们面对一个共同的挑战:使用组的组将数据从基于行的基于列的转换为基于列。 Let's consider the following ...
    编程 发布于2025-03-28
  • 为什么我的CSS背景图像出现?
    为什么我的CSS背景图像出现?
    故障排除:CSS背景图像未出现 ,您的背景图像尽管遵循教程说明,但您的背景图像仍未加载。图像和样式表位于相同的目录中,但背景仍然是空白的白色帆布。而不是不弃用的,您已经使用了CSS样式: bockent {背景:封闭图像文件名:背景图:url(nickcage.jpg); 如果您的html,css...
    编程 发布于2025-03-28
  • 如何在全高布局中有效地将Flexbox和垂直滚动结合在一起?
    如何在全高布局中有效地将Flexbox和垂直滚动结合在一起?
    在全高布局中集成flexbox和垂直滚动Traditional Flexbox Approach (Old Properties)Flexbox layouts using the old syntax (display: box) permit full-height apps with ver...
    编程 发布于2025-03-28
  • 如何使用Python理解有效地创建字典?
    如何使用Python理解有效地创建字典?
    在python中,词典综合提供了一种生成新词典的简洁方法。尽管它们与列表综合相似,但存在一些显着差异。与问题所暗示的不同,您无法为钥匙创建字典理解。您必须明确指定键和值。 For example:d = {n: n**2 for n in range(5)}This creates a dicti...
    编程 发布于2025-03-28
  • 为什么PYTZ最初显示出意外的时区偏移?
    为什么PYTZ最初显示出意外的时区偏移?
    与pytz 最初从pytz获得特定的偏移。例如,亚洲/hong_kong最初显示一个七个小时37分钟的偏移: 差异源利用本地化将时区分配给日期,使用了适当的时区名称和偏移量。但是,直接使用DateTime构造器分配时区不允许进行正确的调整。 example pytz.timezone(...
    编程 发布于2025-03-28
  • 如何配置Pytesseract以使用数字输出的单位数字识别?
    如何配置Pytesseract以使用数字输出的单位数字识别?
    Pytesseract OCR具有单位数字识别和仅数字约束 在pytesseract的上下文中,在配置tesseract以识别单位数字和限制单个数字和限制输出对数字可能会提出质疑。 To address this issue, we delve into the specifics of Te...
    编程 发布于2025-03-28
  • 如何检查对象是否具有Python中的特定属性?
    如何检查对象是否具有Python中的特定属性?
    方法来确定对象属性存在寻求一种方法来验证对象中特定属性的存在。考虑以下示例,其中尝试访问不确定属性会引起错误: >>> a = someClass() >>> A.property Trackback(最近的最新电话): 文件“ ”,第1行, AttributeError: SomeClass...
    编程 发布于2025-03-28
  • 如何在Java中执行命令提示命令,包括目录更改,包括目录更改?
    如何在Java中执行命令提示命令,包括目录更改,包括目录更改?
    在java 通过Java通过Java运行命令命令可能很具有挑战性。尽管您可能会找到打开命令提示符的代码段,但他们通常缺乏更改目录并执行其他命令的能力。 solution:使用Java使用Java,使用processBuilder。这种方法允许您:启动一个过程,然后将其标准错误重定向到其标准输出。...
    编程 发布于2025-03-28
  • 为什么尽管有效代码,为什么在PHP中捕获输入?
    为什么尽管有效代码,为什么在PHP中捕获输入?
    在php ;?>" method="post">The intention is to capture the input from the text box and display it when the submit button is clicked.但是,输出...
    编程 发布于2025-03-28
  • 如何在Java的全屏独家模式下处理用户输入?
    如何在Java的全屏独家模式下处理用户输入?
    Handling User Input in Full Screen Exclusive Mode in JavaIntroductionWhen running a Java application in full screen exclusive mode, the usual event ha...
    编程 发布于2025-03-28
  • Python读取CSV文件UnicodeDecodeError终极解决方法
    Python读取CSV文件UnicodeDecodeError终极解决方法
    在试图使用已内置的CSV模块读取Python中时,CSV文件中的Unicode Decode Decode Decode Decode decode Error读取,您可能会遇到错误的错误:无法解码字节 在位置2-3中:截断\ uxxxxxxxx逃脱当CSV文件包含特殊字符或Unicode的路径逃...
    编程 发布于2025-03-28
  • 找到最大计数时,如何解决mySQL中的“组函数\”错误的“无效使用”?
    找到最大计数时,如何解决mySQL中的“组函数\”错误的“无效使用”?
    如何在mySQL中使用mySql 检索最大计数,您可能会遇到一个问题,您可能会在尝试使用以下命令:理解错误正确找到由名称列分组的值的最大计数,请使用以下修改后的查询: 计数(*)为c 来自EMP1 按名称组 c desc订购 限制1 查询说明 select语句提取名称列和每个名称...
    编程 发布于2025-03-28
  • 为什么使用固定定位时,为什么具有100%网格板柱的网格超越身体?
    为什么使用固定定位时,为什么具有100%网格板柱的网格超越身体?
    网格超过身体,用100%grid-template-columns 为什么在grid-template-colms中具有100%的显示器,当位置设置为设置的位置时,grid-template-colly修复了?问题: 考虑以下CSS和html: class =“ snippet-code”> g...
    编程 发布于2025-03-28
  • 如何使用Java.net.urlConnection和Multipart/form-data编码使用其他参数上传文件?
    如何使用Java.net.urlConnection和Multipart/form-data编码使用其他参数上传文件?
    使用http request 上传文件上传到http server,同时也提交其他参数,java.net.net.urlconnection and Multipart/form-data Encoding是普遍的。 Here's a breakdown of the process:Mu...
    编程 发布于2025-03-28

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3