前端语言串讲 | 青训营笔记

127 阅读1分钟

88584248441493030.jpg

课程内容:

1. 前端语言的基本能力

2. 前端语言的协作配合

3. 你不知道的HTML(5)

4. 拓展分享

一、前端语言的基本能力

① 图注:

697475263392125199.jpg

② HTML

516211455891951913.jpg

③ CSS

125518762905651369.jpg

531466078003434651.jpg

④ JavaScript

675334699914755771.jpg

903773984250206642.jpg

16451960828299712.jpg

848230240837154596.jpg

⑤ Browser

64401828278090297.jpg

359737140906374871.jpg

前端语言的协作语言

① Trending

782165036407283235.jpg

② CSS in HTML

251482411046614850.jpg

③ JavaScript in html

781741432689296387.jpg

883584353314514293.jpg

④ HTML in JavaScript

function renderHello(){
var template = document.getElementById('template').innerHTML;
var rendered = Mustache.render(template,{name:'Luke'});
document.getElementById('target').innerHTML = rendered;
}

555407623767694966.jpg

⑤ CSS in JavaScript

499013656238571142.jpg

518230285130868918.jpg

三、你不知道的HTML(5)

① HTML DTD

  • HTML并非图灵完备,它只是一门标记语言。
  • 基本语法如下:

221167931642017104.jpg

② HTML 全部标签分类

313914319443805123.jpg

③ HTML head标签

head:

  1. title:标题,全局统一

2.base:

  • 向页面所有相对URL提供前缀
  • 全局唯一,不建议使用

3.meta:

  • 通常是约定好的键值对
  • 例如:charset,http-equiv

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

5.script:type指定MIME类型,可内嵌代码,可外链文件

④ HTML body功能性标签

146022275515295471.jpg

⑤ HTML ARIA

  • 了解ARIA并非只是为了供盲人阅读,它可以为我们设计UI系统提供指导意义

626366635016668540.jpg

235216726163611537.jpg

⑥ HTML5语义化标签

  • 建议:用对比不用好,不用比用错好。

861886975455820693.jpg

694735241602496316.jpg

⑦ HTML5存储

562794894310527542.jpg

⑧ HTML5 indexedDB

154559960302944902.jpg

⑨ HTML5 PWA & AMP

96318473171669917.jpg

⑩ HTML5 Audio

639050830981825493.jpg

11.HTML5 video

170876387821238278.jpg

12.HTML5 二进制

738252116951365664.jpg

13.HTML5 API

62903312122831111.jpg

14.HTML5 Web Worker

856719541522413316.jpg

15.HTML5 Web Socket

460646406585132293.jpg

16.HTML5 Shadow DOM

549588771700638984.jpg

17.HTML5 Web Component

85585598183879541.jpg

18.HTML5 SVG & Canvas

531260216203343641.jpg

19.webGL & WebGPU

118664955696407519.jpg

20.webGL & WebGPU

640304800980336532.jpg

21.HTML5 WebAssembly

620484668760744511.jpg

拓展交流

1. web 的风靡

203958584042882495.jpg

2.大前端

267709771167154266.jpg

**3.MVC & MVVM & MVP

779716955677480451.jpg

4.总结

445626998770686892.jpg

  • 以上便是前端语言串讲笔记的全部内容了,感谢您的阅读,我会继续努力的!