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

和歌忘忧
77 阅读5分钟

6 前端语言串讲

如果说后端的第一个 Hello World language 是 C, 那么前端的第一个Hello World 就是前端三件套啦。今天我们来学习下关于前端语言的三剑客（HTML CSS JS）。

1 前端语言的基本能力

  • HTML： Create the structure

  • CSS: Stylize the website

  • JavaScript: Increase interactivity

frontEnd-lang-basic.png

HTML是骨骼，CSS是皮囊，JavaScript是肌肉，控制行动和能力。

### HTML

搭建标签构建

CSS

CSS-basic.png

JavaScript：

JavaScript-basic.png

Browser：

Browser-content.png

Browser-V8.png

02 前端语言的协作配合

CSS in HTML

  • Inline CSS

  • Internal CSS

  • External CSS

JavaScript in HTML：

js-in-html.png

3. 你不知道的HTML

HTML DTD

HTML 并非图灵完备，它只是一门标记语言。

html-dtd.png

HTML 全部标签分类

HTML-tags-category.png

HTML head 标签

html-head-tag.png

HTML Aria

HTML5 语义化标签

<body>
    <header>
        <nav>
            ......
        </nav>
    </header>
    <aside>
        <nav>
            ......
        </nav>
    </aside>
    <section>.....</section>
    <section>.....</section>
    <section>.....</section>
    <footer>
        <address>.....</address>
    </footer>
</body>

主题用 section 进行分割

使用语义化标签可以更好的维护网站结构，便于使用 su SEO 对网站 进行整理。

建议：任何时候，用对比不用好，不用比用错好

HTML5 表单增强

扩展了表单能力，新增内置表单，支持 fieldset field control 作为表单基础渲染。也支持特殊类型，submit、radio、checkbox、下拉框、下拉框分组，包含颜色选择器和时间选择器。

HTML5 存储

HTML5-storage.png

HTML提供的存储能力：Cookie、Local Storage、Session Storage

Cookie 和 Local Storage 储存后可以通过同一个 Windows 对象访问，而 Session 只能在同个 Tab。

Cookie 的过期时间需要手动设置，Local Storage 不存在过期时间，而 Session 是即关即清。

Cookie 可以存储在 Server 端，Local Storage 和 Session Storage 只存储在浏览器端。

Cookie 是在请求的时候被发送的，如果用 Cookie 存储数据，请求的体积会很大，所以 Cookie 一般只存储一些请求发送头。Local 和 Session 只为前端服务。

HTML5 IndexedDB

HTML5-indexedDB.png

适用于复杂场景。IDB 使用了 objectStore，可以存储任何类型的数据，容量是 50MB upwards，也支持索引。而Web Storage 只能存储字符串，任何东西都得转换成 JSON。

要注意 indexedDB 的(API Call Type) 数据访问、打开、读取是异步的(Asynchronous)。另外 IndexedDB 支持事务型。学习曲线偏高

HTML5 PWA&AMP

HTML5-PWA-AMP.png

基于存储的应用 一般有 PWA 和 AMP。

PWA：基于serviceWorker，先判断是否有激活的SW，如果有，会拦截请求，并通过 sw 处理的方式来返回对应的缓存数据。

如果没有激活的sw，会进行判断，sw是否存在更新，如果有，走完 sw的完整的生命工作流程。sw 就是通过不同的生命流程（特别是激活）。激活时，激活态进行拦截请求，把本地缓存数据直接返回，是提高页面消息访问的很明显的方式。

AMP：主要对于搜索引擎使用，开发者提供URL，搜索引擎进行爬虫抓取，判断是否是是 AMP 格式的网站(AMP网站会使用 Google 定义的一些标签来声明关键性内容)。如果是，会启动 AMP Server 把页面上关于的内容进行缓存。如果不是，会进行常规收录。 AMP 可以提高网站关键内容的曝光和访问速度。

HTML5 Audio

HTML5-audio.png

// 创建一个音频上下文
const audioCtx = new (windows.AudioContext || window.webkitAudioContext);
// 创建一个正弦震荡器
const osci=audioCtx.createOscillator();
// 创建一个音量增幅器 
const gain = audioCtx.createGain();
// 正弦震荡器管理音量增幅器
osci.connect(gain);
// 音量增幅器关联音频上下文的音频输出器
gain.conect(audioCtx.destination);
// 开始正弦波动
osci.start();

声音是由于震动产生的。

振幅 决定声音的音量、频率 决定声音的音高、波形决定声音的音色。

auidoCtx 创建上下文， osci 创建振荡器决定音色，基于 audioCtx 创建音量增幅器，震荡器关联音量，音量关联音频输出，最后开始震动波幅。

本质上来说像一个拓补图，是一个声音输入，从不同的音频来源，输入到GainNode,最终再输入到 Master Gain，最后输出。

HTML5-Video

HTML5-Video.png

const mediaSource=new MediaSource();

const video=document.createElement('Video');

video.src=mediaSource;

mediaSource.addSourceBuffer(...);


video.play();

HTML5 二进制

html5-binary.png

function loadAsTest(file){
    const reader = new FileReader();
    
    reader.onload= function(loadedEvent){
    // result contains loaded file.
    console.log(loadedEvent.target.result);
}
// 输出文本字符串格式
reader.readAsText(file);
// 输出二进制数组格式
reader.readAsArrayBuffer(file);
// 输出DataURL格式字符串
reader.readAsDataURL(file);
}

HTML5 API

HTML5-API.png

GeoLocation API：当前用户所在位置

Drag & Drop API：分别处理拖拽，Drag 给 dataTransfer 配置下正在拖拽的id

Drop 时，拿到拖拽的数据，然后把拖拽的元素添加进来。

就是简单的字形实现拖拽的方式。例如把 image 拖到 div 里面。

HTML5 Web Worker

HTML5-Web-Worker.png

一种多线程方式，生成也非常简单。在主线程创建完后，New 一个 Worker 线程。 WThread 可以 Post Message 给主线程，主线程也可以 Post 给 WThread。主线程tons拥有销毁 WThread 的能力。

另一种方法，Page 存在 Web Worker 和 Service Worker，SW 拦截请求，通过自己的 Cache 来返回一些已经缓存好的文件。

HTML5 Web Socket

HTML5-WebSocket.png

Web Socket 可以看做是一种支持全双工通信的 HTTP 方式，刚开始的时候，首先会通过 HTTP 连接来发送一个 upgrade 的请求，后端处理后，同意握手，会返回一个 101。

然后我们切换到协议，把 HTTP切换到 WS，或者把 HTTPS 升级到 WSS。

当 ws 处于 open时， client 可以发送 Data Frame(数据帧)，Server 也可以响应 Data Frame。这时具备双向通信的能力。通过 addEventListener message 可以拿到服务端发来的信息，也可以通过socket.send 发送信息。

处于 Closing 时，主动向服务端发起握手信息，服务端响应完 议程后，我们确认完后。再进行一个Close状态。（其实是简单模拟一个 TCP的访问方式）。看起来是HTTP，本质上是一个TCP的请求。

// Create WebSocket connection.
const socket \new WebSocket('ws://localhost:8080')

// Connection opened
socket.addEventListener('open',(event)=>{
    socket.send('Hello Server!');
});


// Listen for messages
socket.addEventListener('message',(event)=>{
    console.log('Message from server ',event.data);
});

Shadow DOM

HTML5-shadow-DOM.png

Web Component

HTML5-web-Component.png

可以自定义标签，还可以记载父元素上自定义字符的长度。

SVG & Canvas

HTML5-SVG&Canvas.png

SVG会变化，Canvas 不行。Canvas是点阵。

WebGL& WebGPU

webgl&webgpu.png

WebAssembly

html5-wasm.png

要用 ImportObj 和 ExportObj 进行实例化

avatar
文章
阅读
粉丝