0


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

一.HTML

HTML(HyperText Markup Language)即超文本标记语言,是用于创建网页和网页应用程序的标准标记语言。它不是一种编程语言,而是一种标记语言,通过一系列的元素(elements)来告诉浏览器如何显示网页上的内容,如文本、图片、链接、表格、列表等。

HTML 文档由一系列的标签(tags)组成,这些标签告诉浏览器如何显示内容。标签通常成对出现,例如

  1. <p>

  1. </p>

,其中

  1. <p>

是开始标签,表示一个段落的开始,而

  1. </p>

是结束标签,表示该段落的结束。不过,也有一些标签是自闭和的,比如

  1. <img />

  1. <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示例,展示了这些基本结构:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>我的第一个网页</title>
  6. </head>
  7. <body>
  8. <h1>欢迎来到我的网页</h1>
  9. <p>这是一个段落。</p>
  10. </body>
  11. </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元素的样式:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>CSS 示例</title>
  6. <style>
  7. /* 这是一个内部样式表 */
  8. body {
  9. background-color: lightblue;
  10. }
  11. h1 {
  12. color: navy;
  13. margin-left: 20px;
  14. }
  15. p {
  16. color: gray;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <h1>这是一个标题</h1>
  22. <p>这是一个段落。</p>
  23. </body>
  24. </html>

在这个示例中,我们使用了内部样式表来定义HTML文档的样式。我们为

  1. body

元素设置了背景颜色,为

  1. h1

元素设置了文本颜色和左边距,为

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

本文转载自: https://blog.csdn.net/m0_59247951/article/details/142098425
版权归原作者 俊昭喜喜里 所有, 如有侵权,请联系我们删除。

“前端HTML+CSS+JS的入门学习”的评论:

还没有评论