前端语言串讲 | 青训营

117 阅读3分钟

前端语言的基本能力

三剑客:

前端开发的三大基本语言是HTML、CSS和JavaScript,通常被称为"三剑客"。每个语言都有不同的职责和用途。

  • HTML (HyperText Markup Language):HTML 是一种用于构建网页框架结构的标记语言。它由各种标签组成,每个标签描述了不同的内容或功能,如段落、标题、图像等。
  • CSS (Cascading Style Sheets):CSS 是用于为网页添加样式和布局的样式表语言。它使用选择器和键值对来控制HTML元素的外观,包括颜色、字体、间距和布局等。
  • JavaScript:JavaScript 是一种用于提高网页交互体验的脚本语言。它可以操作网页中的元素、处理数据、响应用户操作等。JavaScript 是前端开发的精髓,是实现动态和交互性的关键。

文档查看:

  • MDN (Mozilla Developer Network):MDN 是一个权威的Web技术文档资源,提供对HTML、CSS、JavaScript等前端技术的详细说明和示例。

浏览器:

浏览器是用户访问网页的客户端,它负责加载和渲染网页内容。在浏览器中,主要有两个引擎:

浏览器引擎:
  • 渲染引擎:负责加载页面并处理HTML和CSS部分,将网页内容渲染成用户可见的界面。
  • JavaScript引擎:处理网页中的JavaScript代码,执行动态操作和逻辑。

前端语言的协作配合

前端语言通常会相互协作,实现一个完整的前端功能。

  • CSS in HTML:CSS代码可以直接嵌入到HTML文件中,通过样式标签或行内样式来为网页添加样式。
  • JS in HTML:JavaScript代码可以直接嵌入到HTML文件中,通过脚本标签或事件绑定来实现交互功能。
  • HTML in JS:JavaScript代码中可以动态生成HTML内容,并将其插入到网页中,实现动态页面。
  • CSS in JS:JavaScript代码中也可以用于动态生成CSS样式,实现动态样式的变化。

这些语言的交融共同协同工作,使得前端能够实现丰富多样的功能和交互体验。

HTML(5)

HTML(HyperText Markup Language)是用于构建网页结构的标记语言。它由各种标签组成,每个标签有不同的含义和功能,用于描述页面中的各个部分。

基本语法:

  • 标签:HTML使用尖括号表示标签,例如<tagname></tagname>
  • 文本:在标签之间可以添加文本内容,表示页面显示的文本。
  • 注释:使用<!--comments-->来添加注释,注释内容不会在页面中显示,用于对代码进行注解。
  • DTD:使用<!Doctype html>来指定HTML文档类型。
  • 处理信息:使用<?a 1?>来添加处理信息,用于一些特殊用途。

HTML是前端开发的基础,通过合理使用HTML标签可以构建出清晰结构的网页,并为CSS和JavaScript提供良好的基础。

拓展

了解、知道一些东西(特性,特点,功能):(后期详细了解)

HTML ARIA

HTML5 语义化标签

HTML5表单增强

HTML5 存储

HTML IndexDB

HTML5 PWA & AMP

HTML5 Audio

HTML5 Video

HTML5 二进制

HTML5 API

HTML5 Web Worker

HTML5 Web Socket

HTML5 Shadow DOM

HTML5 SVG & Canvas

WebGL & WebGPU

HTML5 WebAssembly