前端语言串讲

基础

JavaScript

(1）借鉴C语言的基本语法; (2）借鉴Java语言的数据类型和内存管理; (3）借鉴Scheme语言，将函数提升到"第一等公民"(first class)的地位;

(4）借鉴Self语言，使用基于原型(prototype)的继承机制。

七种基本类型

String "Any text"
Number 123
Boolean true or false
Null null
Undefined undefined
Symbol Symbol('something')
Object {key:'value'};[1,"text",false];function name(){}

浏览器

浏览器进行dom树的渲染

协作

CSS

css引入方式有内联样式、内部引入和链接扩展引入方式

Inline CSS

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

Internal CSS

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

External CSS

<head>
<link rel="stylesheet”type="text/css"href="style.css">
</ head>

HTML

html是一门标记语言，基本语法有

标签（元素）Element
文本text
注释 Comment
DTD Document Type Defination
处理信息 ProcessingInstruction

HTML标签分类

文档型

<!DOCTYPE><head><body>
闭合性
- 闭合标签
  
  <p></p>
- 空标签
  
  <br><img><input>
换行型
- 块级标签
  
  <div><h1>
- 行内标签
  
  <span><a>
H5新元素
- 语义化标签
- 媒体标签
  
  <video><audio><embed>
- 表单标签
  
  <input type="data">
- 功能标签
  
  <canvas><progress>

HTML head标签

title 标签，全局统一
base 向页面所有相对URL提供前缀。全局唯一，不建议使用
meta 通常是约定好的键值对。例外Lcharset、http-quiv
link rel 决定类型，href决定引入地址
script type指定MIME类型。可内嵌代码，可外链文件

HTML body功能性标签

HTML_ARIA

html5 video

autoplay:是否自动播放，不会停住等待数据全部加载完成。布尔属性
controls:控制面板；内容有音量、跨帧、暂停/恢复播放
crossorigin：是否使用跨域资源共享来获取相关视频
anonymous：在发送跨域请求时不携带凭证信息
use-credentials：跨域时携带凭证信息
disablepictureinpicture：禁用video元素的画中画特性
disableRemotePlayback：禁用远程播放功能

HTML5 Audio

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

媒体源扩展API的规范允许JavaScript动态构造和的媒体流。它定义了一个MediaSource对象的URL，该对象可以用作HTMLMediaElement的媒体数据源，MediaSource对象具有一个或多个SourceBuffer对象。应用程序将数据段追加到SourceBuffer对象，并根据系统性能和其他因素调整追加数据的质量。来自SourceBuffer对象的数据作为解码和播放的音频、视频和文本数据的轨道缓冲区进行管理。

const  mediaSource = new MediaSource();
const video = document.createElement('video');
video.src = mediaSource;
mediaSource.addSourceBuffer(...);
video.play();

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

前端语言串讲

基础

JavaScript

浏览器

协作

CSS

HTML