0


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

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

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

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

还没有评论