前端语言的基本能力
前端三剑客：
HTML、CSS、Javascript
· HTML：构建框架结构，web页面的起始
· CSS：给网站添加样式，
· Javascript：交互体验、还可以处理复杂的函数
形象表示：
HTML
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
使用HTML，将所需要表达的信息按某种规则写成html文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即我们所见到的网页。
CSS
层叠样式表(Cascading Style Sheets)，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
JavaScript
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
Javascript是单线程的
其基本类型包括：
1.String
2.Number
3.Boolean
4.Null
5.Undefined
6.Symbol
7.Object -Array
-Function
var:关键字； a：变量名； 7+"2"：表达式（做计算时会统一类型）
浏览器包括渲染引擎和Javascript引擎
渲染引擎主要负责加载页面
前端语言的协作配合
CSS/JavaScript in HTML
1)CSS in HTML
lnline CSS
<P style="color:blue;">This is a paragraph.</p>
internal CSS
<head>
<style type=text/css>
body {background-color:blue;}
p {color:yellow;}
</style>
</head>
External CSS
<head>
<link rel="stylesheet"type="text/css" href="style.css">
</head>
2)Javascript in HTML
<button onclick="showContent()">Show hidden content</button>
<template>
<h2>Flower</h2>
<img src="img_white_flower.jpg" width="214" height="204">
</template>
<script>
function showContent(){
var temp=document.getElementsByTagName("template")[0];
var clon=temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>
HTML/CSS in Javascript
1)HTML in Javascript
<html>
<body onload="renderHello()">
<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
Hello{{name}}!
</script>
<script src="https://unpkg.com/mustache@latest"></script>
<script src="render.js"></script>
</body>
</html>
2)CSS in Javascript
HTML
HTML并非图灵完备，只是一门标记语言
HTML不是一种编程语言，而是一种标记语言，标记语言是一套标记标签，HTML文档也叫做web页面
~HTML 元素以开始标签起始
~HTML 元素以结束标签终止
~元素的内容是开始标签与结束标签之间的内容
~某些 HTML 元素具有空内容（empty content）
~空元素在开始标签中进行关闭（以开始标签的结束而结束）
~大多数 HTML 元素可拥有属性
标签分类
head标签
功能标签
HTML ARIA
ARIA并非只是为了供盲人阅读，它可以为我们设计UI系统提供指导意义
HTML5
定义了一些规范和特性
HTML5储存
AMP主要对搜索引擎来用
音频
//创建了一个音频上下文
const audioCtx = new (window.AusioContext||window.webkitAudioContext);
//创建了一个正弦振荡器
const osci = audioCtx.createOscillator();
//创建一个音量增幅器
const gain = audioCtx.createGain();
//正弦振荡器关联音量增幅器
osci.connect(gain);
//音量增幅器关联音频上下文的音频输出器
gain.connect(audioCtx.destination);
//开始正弦波动
osci.star();
HTML5 web worker
Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，它们可以使用 XMLHttpRequest（尽管 responseXML 和 channel 属性总是为空）或 fetch（没有这些限制）执行 I/O。一旦创建，一个 worker 可以将消息发送到创建它的 JavaScript 代码，通过将消息发布到该代码指定的事件处理器（反之亦然）。
HTML5 SVG & Canvas
Canvas
· 通过 js 来绘制 2D图形。 · canvas 图像单位是像素。 · canvas 图像绘制完毕之后，浏览器将不再关注它，如果位置发生变换，就需要重新绘制
SVG
· SVG使用 XML 描述的2D图像。 · SVG是基于 xml 的，所以 svg 中绘制图形还是使用的元素，js 给元素任意添加事件。 · SVG绘制的图像是一个对象，如果对象的属性发生改变，浏览器将重新绘制图形。
区别
1、svg 是一种矢量图，而 canvas 依赖于分辨率。所以 svg 放大不会失真，而 canvas 绘制的图形会失真。 2、svg 支持事件处理器； canvas 不支持事件处理器。 3、svg 中的文字独立于图像，文字可保留，可编辑和可搜索；canvas 的文本渲染能力弱。 4、canvas 适合图像密集型的游戏，频繁地重绘图像；svg 绘制的复杂度高时减慢渲染的速度。 5、canvas 绘制的图形可以多种格式 (jpg、png) 保存图片；svg 绘制的只能以 .svg 格式保存，使用时可以引入 html 文件。 6、canvas 适合开发游戏；svg 不适合游戏应用。
webGL & webGPU
HTML5 webassembly
webassembly（WASM）是一种新的编码方式，可以直接在浏览器中运行
拓展分享
MVC & MVVM & MVP
MVC，MVP和MVVM都是常见的软件架构设计模式（Architectural Pattern），它通过分离关注点来改进代码的组织方式。不同于设计模式（Design Pattern），只是为了解决一类问题而总结出的抽象方法，一种架构模式往往使用了多种设计模式。
MVC :将应用抽象为数据层（Model）、视图（View）、逻辑（Controller），这样数据、视图、逻辑的代码各自汇聚。
MVVM：MVVM设计了VM层，即ViewModel层，ViewModel自动同步数据到视图，用VM代替P之后，MVVM自动从Model映射到View（实现方式是模板渲染），不需要用户手动操作视图，这样代码更简单不易出错，代码更好阅读和维护。
MVP：则在MVC基础上，限定了通信方式，即Model和View之间不直接通信，都通过Presenter通信，这个Presenter和MVC中的Controller一脉相承，代表应用中的逻辑层。
课堂总结
经过今天的学习，对前端三件套基本有所了解，也知道了它们之间的一些关联，但是有很多地方还是不懂得，还需要继续努力学习
