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

一.HTML

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

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

 和 

,其中 

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

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

HTML 文档的基本结构包括以下几个部分:

  1. :声明文档类型和HTML版本,例如  表明这是一个HTML5文档。

  2. :这个标签包裹了整个HTML文档的内容。

  3. :包含了文档的元数据(metadata),如文档的标题(</code>)、字符集定义(<code><meta charset="utf-8"></code>)、链接到样式表(<code><link rel="stylesheet" href="styles.css"></code>)和脚本文件(<code><script src="script.js"></script></code>)等。</p> </li> <li> <p id=""><strong><code><body></code></strong>:包含了可见的页面内容,如文本、图片、视频、游戏、可交互的表单等。</p> </li> </ol> <p id="">下面是一个简单的HTML示例,展示了这些基本结构:</p> <pre><code class="language-python"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的第一个网页

    欢迎来到我的网页

    这是一个段落。

    二.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文档的部分中的

      这是一个标题

      这是一个段落。

      在这个示例中,我们使用了内部样式表来定义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)