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

前端语言基本能力

HTML+CSS+JavaScript

HTML:代码到网页

CSS:页面呈现

JavaScript:函数，参数变量

JavaScript语法：

类型

1.String

2.Number

3.Boolean

4.Null

5.Undefined

6.Symbol

基本语法 var a=7+"2";

对象：定义自变量的方式定义对象

函数

浏览器

工作流程 HTTP→构建DOM树→计算CSS树→排版→渲染合成→绘制

CSS in HTML

行内样式

This is a paragraph.

内部样式

body (background-color: blue;}p ( color: yellow;}

引入外部样式

CSS in Javascript

HTML DTD

HTML是一门标记语言

head标签

ARIA（新的HTML5标准中增加 aria-* 的标签属性，全称Accessible Rich Internet Application。与role标签属性配合使用。）：给标签添加额外的元素，增加页面结构可读性。

HTML5 Audio

//创建一个音频上下文

const audioCtx = new (window.AudioContext window.webkitAudioContext);// 创建一个正弦振荡器,决定声音的音色

const osci = audioCtx.createOscillator();// 创建一个音量增幅器

const gain = audioCtx.createGain();// 正弦振荡器关联音量增幅器

osci.connect(gain);

// 音量增幅器关联音频上下文的音频输出器

gain.connect(audioCtx.destination);// 开始正弦波动

osci.start();

支持不同的声音来源

HTML5 video `const mediaSource = new MediaSource();

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

video.src = mediaSource;

mediaSource.addSourceBuffer(...);

video.play();`

可以输出到指定的video上 HTML5 二进制 HTML5 API

HTML5 Web Worker

创建一个Worker,Worker向主线程post message，主线程也可以post message给Worker进程，主线程也可以关闭worker线程

HTML5 web Socket 全双工的模式

HTML5 Shadow DOM

HTML5 Wen Compont

有自定义标签的能力

HTML5 svg&Canvas

SVG：随着屏幕的尺寸变化可扩展，不会失真。对事件处理更好

Canvas：随着屏幕的尺寸变化会失真。没有提供事件的特殊处理，不能绘制复杂的图形。