[第6课-前端语言串讲|青训营笔记]

用户372497550747
56 阅读2分钟

6-前端语言串讲

讲师：高臻熙

一、前端语言的基本能力

  1. 三剑客

    1. HTML：框架结构
    2. CSS：添加样式
    3. Javascript：交互体验（网页交互才是web精髓），处理复杂函数

    image-20230422155117866

（一）HTML

（二）CSS

（三）JavaScript

（1）借鉴C语言的基本语法; （2）借鉴Java语言的数据类型和内存管理; （3）借鉴Scheme语言，将函数提升到"第一等公民”(first class)的地位;（4）借鉴Self语言，使用基于原型〈prototype)的继承机制。

  1. 类型

    1. string

    2. Number

    3. Boolean

    4. Null

    5. Undefined

    6. Symbol

    7. Object

      1. Array
      2. Function

  2. var：定义变量、对象

    1. var a=7+"2"结果为"72"

  3. function+name(param1,param2){}

二、前端语言的协作配合

  1. css in HTML

    1. inline

      <p style = "color:blue;">This is a paragraph.</p>

    2. internal

      <head>
    <style type = text/css>
        body {background-color:blue;}
        p {color : yellow}
    </style>
</head>

    3. external

      <head>
    <style type = text/css>
        body {background-color:blue;}
        p { color : yellow }
    </style>
</head>

  2. Javascript in html（单线程）

    image-20230422160519914

三、大家熟知的HTML

基本语法

  1. 标签（元素）Element

    1. <tagname>...</tagname>

  2. 文本Text

    1. text

  3. 注释Comment

  4. DTD (Document Type Defination)

    1. ​​

  5. 处理信息ProcessingInstruction

head

  1. title 标题，全局唯一

  2. base

    1. 向页面所有相对URL提供前
    2. 全局唯一，不建议使用

  3. meta

    1. 通常是约定好的键值对
    2. 例外：charset、http-equiv

  4. link:rel决定类型，href决定引入地址

  5. script

    1. type制定MIME类型
    2. 可内嵌代码，可外链文件

其他

  1. HTML5表单增强

  2. HTML5存储

  3. HTML5 IndexedDB

  4. HTML5 Shadow DOm：避免内部元素被外部元素访问

  5. HTML5 Web Component

  6. HTML5 SVG（矢量：可扩展，本身是DOM元素） & Canvas(点阵)

    1. SVG——Draw；SVG——paint

  7. WebGL（GLSL） & WebGPU（WGSL）

  8. HTML5 WebAssembly（新的编码方式）

注意：

  1. base：过度耦合，现在不常用了

四、拓展交流

  1. Web的风靡的原因

    1. 对用户友好
    2. 对开发者友好
    3. 领域成熟
    4. 未来的方向

  2. 大前端

  3. MVC & MVVM & MVP

五、其他

用对比不用好，不用比用错好

avatar
文章
阅读
粉丝