前端三大件

oneday6oneday
183 阅读5分钟

概述

前端开发主要涉及到 HTML、CSS 和 JavaScript 三种语言。

  1. HTML (Hypertext Markup Language) HTML 是网页内容的基础语言，它用于描述和定义网页上各种元素的结构和内容，如标题、段落、图片、链接等。它以标签（tag）为基本单位，通过标签和属性来实现对网页内容的格式化和布局。
  2. CSS (Cascading Style Sheets) CSS 用于控制网页元素的样式、布局和效果，使得网页具有更好的可读性和视觉效果。CSS 样式表中包含了各种选择器和属性，能够实现调整字体大小、颜色、背景、定位等功能，并且可以实现响应式设计，根据不同设备分辨率进行样式适配。
  3. JavaScript JavaScript 是一门动态脚本语言，能够在网页中添加交互性和动态性。JavaScript 能够处理用户输入、响应事件、改变网页内容和样式等操作，还能够与后端服务器进行数据交互，实现动态载入页面内容和信息验证等功能，同时也支持面向对象编程和异步编程模型。

HTML（超文本标记语言）

<html>
    <head>
    </head>
    <body>  
    </body>
</html>

在一个文件中写入这样一段简单的代码并把文件后缀名改为（html）便可以在浏览器中运行，虽然这段代码不能在浏览器中显示什么。这是一个最简单的页面文件，不需要像其他语言一样配置开发环境，满足了我们的所写即所得。

CSS（层叠样式表）

能够控制和调整网页中各元素的布局、颜色、字体、大小、动画效果等外观特征

CSS在使用的时候通过三种方式引入：

  1. 外部样式表，外部样式表是指以 .css 文件形式存在的 CSS 文件。在 HTML 中使用 <link> 元素将外部样式表与 HTML 关联起来，例如：
<head>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>
  1. 内部样式表，内部样式表是指以 <style> 元素内嵌的 CSS 代码块，该方式通常适用于单个 HTML 页面中规模较小的 CSS 风格。例如：
<head>
  <style>
    body {
      background-color: #f1f1f1;
    }
    h1 {
      color: blue;
    }
  </style>
</head>
  1. 内联样式，内联样式是指直接将 CSS 属性写在 HTML 标签的 style 属性中，优先级比其他两种方式高。这种方式适用于个别元素的样式设置，如下例所示：
<h1 style="color:blue;">This is a heading</h1>

使用外部样式表能够避免 HTML 内容和 CSS 样式混在一起而造成的可维护性和复杂度问题，同时也能提高样式库共享的效率，不过具体使用哪种方式需要根据实际应用场景进行选择。一般企业的大型项目开发使用的是外部样式表。

CSS的常见特性

  1. 选择器 CSS 样式表中提供了多种选择器来匹配 HTML 元素，例如元素选择器、类选择器、ID 选择器、伪类和伪元素等，能够以不同的方式选择网页中需要样式化的元素。
  2. 盒子模型 CSS 中的盒子模型指网页中每个元素被看作一个矩形盒子，由内容区、填充区、边框和外边距组成。盒子模型中的属性有 width, height, padding, border 和 margin 等，可以实现对元素进行规范的定位和布局。
  3. 布局 CSS 提供了多种布局方式，在不依赖表格或框架的前提下，能够实现自适应布局、栅格布局、弹性布局、网格布局等。布局方式的选择能够根据需求调整页面结构和样式，从而达到更好的用户体验和响应式设计。
  4. 响应式设计 CSS 能够根据不同设备的分辨率和屏幕宽度进行自适应调整，使得网页在不同尺寸的屏幕上都能够呈现出最好的效果。通过设置媒体查询等方式，能够实现针对不同设备和屏幕的CSS样式适配。
  5. 动画效果 CSS 提供了多种动画方式，如过渡、变换和关键帧动画等，能够实现各种精美的动态效果，增强网页用户体验和视觉效果。

JavaScript

  1. 动态性 JavaScript 是一门解释型语言，支持运行时动态修改变量、数据类型及函数等，具有灵活性和可扩展性。
  2. 弱类型语言 JavaScript 不需要明确声明变量的类型，在执行过程中自动进行类型转换，可以带来更高效的开发体验，但也可能导致意外的类型错误。
  3. 面向对象编程 JavaScript 具备面向对象编程的能力，能够创建类、对象，并通过继承、封装、多态等方式完成代码复用和程序设计。
  4. 事件驱动 JavaScript 能够实现对浏览器的用户行为进行感知，如鼠标点击或页面滚动等事件，从而进行响应，并实现动态 UI 或网页内容的交互效果。
  5. DOM 和 BOM 操作 JavaScript 可以直接操作浏览器的文档对象模型（DOM）和浏览器对象模型（BOM）,并且与 HTML 和 CSS 紧密结合，实现页面的动态加载、交互性和可视化。

JavaScript相关的框架

  1. React,React是一个由 Facebook 开发并开源的 JavaScript 框架，它提供了一种声明式编程模型，可用于构建复杂 UI 界面，同时还能与其他库或框架（如 Redux）搭配使用。
  2. Angular,Angular 是一个由 Google 开发并开源的结构化 JavaScript 框架，它采用 TypeScript 作为主要语言，提供了一个全套的工具包，使得开发人员可以轻松地构建功能强大的 Web 应用程序。
  3. Vue.js,Vue.js 是一种渐进式 JavaScript 框架，易于上手，可以撰写简洁的模板，并在组件生命周期中处理数据及其交互。它也支持直接引入到 HTML 页面相应的 script 标签中使用。
  4. jQuery,jQuery 是基于 JavaScript 编写的开源框架，为 Web 开发人员提供了广泛的插件库和工具。它已成为使用最广泛的 JavaScript 库之一，常用于 HTML 文本操作、事件处理和动画效果等方面。

结论

HTML像是骨骼结构，构建一个页面的基本框架。CSS像是衣服，给我们前面的HTML即骨骼结构穿上衣服，装饰的功能。JavaScript像是工具，使用它可以进行很多其他的操作。（纯个人观点）

avatar
文章
阅读
粉丝