青训营X豆包MarsCode 技术训练营第一课 ｜ 豆包MarsCode AI 刷题

菜畦188
80 阅读2分钟

前端语言串讲

一、前端语言的基本能力

  • 前端三剑客

  • 前端三剑客指的是HTML、CSS、JavaScript，这三门语言。目前大多数网站的前端都是由这三门语法写的，他们之前相互搭配进行使用，就能够显示出很多丰富的效果。而他们三者的作用就像是这样的：
  1. HTML超文本标记语言 像骨头一样，撑起了整个页面的大致框架。构建框架结构，包含控制内容布局，提供层次结构，任何网页的基本构建块
  2. CSS层叠样式表 而HTML实现出来的样式比较单调，CSS就是为它进行“化妆”的。添加样式，响应不同尺寸屏幕，处理网页外观
  3. Javascript添加交互功能，将用户的行为提交到后台服务器，处理复杂的功能和特性，增强功能的编程代码

image.png

image.png

  • JavaScript（Brendan Eich创造）

  1. 借鉴c语言基本语法
  2. 借鉴java语言的数据类型和内存管理
  3. 借鉴scheme语言，将函数提升到“第一等公民”的地位
  4. 借鉴self语言，使用基于原型的继承机制

  • 如何在浏览器中运作

image.png 源代码-->解释器-->AST树-->ignition-->字节码-->Turbofun-->机器代码

二、语言相互协作

  • CSS in HTML

  1. 行内
  2. 内部
  3. 外部

  • js in HTML

image.png

image.png

  • HTML in js

image.png

  • css in js

image.png

三、你不知道的HTML

它只是标记语言

  • 基本语法
  1. 标签（元素）Element：<>
  • 标签名放在<>中，如上，p就称为段落标签
  • 大部分的标签都是成对出现的，如<p>称为开始标签，</p>称为结束标签。
  • 极少数标签只有开始标签，称为单标签
  • 开始标签和结束标签之间的数据，称为内容。例如上诉的代码会显示“这是一个段落标签”，这句话。
  • 开始标签中，可以设置一些属性，比如id、name等
<p id="p1">这是一个段落</p>
  1. 文本Test
  2. 注释Comment：
  •   <!--这是一个注释标签 -->
  1. DTD
  • DTD-Document Type Definition,中文翻译即文档类型定义，可定义合法的[XML]文档构建模块。它使用一系列合法的元素来定义文档的结构。
<!DOCTYPE note [
  <!ELEMENT note (to,from,heading,body)>
  <!ELEMENT to      (#PCDATA)>
  <!ELEMENT from    (#PCDATA)>
  <!ELEMENT heading (#PCDATA)>
  <!ELEMENT body    (#PCDATA)>
]>
<note>
  <to>George</to>
  <from>John</from>
  <heading>Reminder</heading>
  <body>Don't forget the meeting!</body>
</note>
  1. 处理信息
  • 标签分类

image.png

image.png

  • PWA & AMP

image.png

  • Audio

image.png

  • Video

image.png

  • 常用API
  1. 获取用户位置

image.png 2.拖拽

image.png

  • WebGL & WebGPU

着色器语言

  • webGL：GLSL
  • WebGPU：WGSL

四、总结

1.前端基础

  • HTML
  • css
  • JS
  • 浏览器引擎

2.协作

  • CSS、JS in HTML
  • HTML、CSS in JS

3.HTML

  • 标签
    • head
    • body
  • HTML5
    • 语义化
    • 存储、音视频
    • 浏览器API
    • 可视化相关

4.扩展交流

  • 回顾分析
  • UI<->Data
avatar
文章
阅读
粉丝