一、前端语言的基本能力

HTML（超文本标记语言）：构建了实体、框架，是一种标记语言，包含许多标签
CSS（层叠样式表）：能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力
Javascript：是一种具有函数优先的轻量级，解释型或即时编译型的编程语言

1.1 HTML

最小单位是用<>包裹起来的一串字符，标签构成的文本文件

(省略了尖括号）

!DOCTYPE html 声明为 HTML5 文档
html 元素是 HTML 页面的根元素
head 元素包含了文档的元（meta）数据，如 meta charset="utf-8" 定义网页编码格式为 utf-8。
title 元素描述了文档的标题
body 元素包含了可见的页面内容
h1 元素定义一个大标题
p 元素定义一个段落

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签(markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

1.2 CSS

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

h1 {color:blue;font-size:12px;}

1.3 JS

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。

seven types七种类型
basic vocabulary 基本语法
object
function

二、前端语言的协作配合

2.1 CSS in HTML

lnline css:在html下的标签中通过style 或class来添加样式

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

lnternal css：在html头部通过style标签定义一些类的样式

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

external css:在html头部引用link标签

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

2.2 Javascript in HTML

通过script标签引用，需要注意的是：这里定义的都是全局函数，在整个浏览器都可访问到。

2.3 HTML in JavaScript

通过传统的DOM API
通过JSX

2.4 css in Javascript

通过DOM API
通过jsx
通过jss

三、HTML(5)

3.1 HTML DTD

3.1.1 基本语法

标签（元素）

<tagname>...</tagname>

文本 text 不能带尖括号如果有尖括号应进行转义

例：<![CDATA[text]]>

注释

<!--comments-->

DTD Document Type Defination 语法定义文档
处理信息给浏览器看的特殊标记目前没什么用 <?a 1?>

3.1.2 HTML标签分类

文档型 HTML必须具备的标签闭合型换行型 H5新元素

3.1.3 HTML head标签

一般为功能性的用户无法看到

title 标题，全局统一
base 向页面所有相对URL提供前缀全局统一，不建议使用
meta 通常为约定好的键值对
link rel决定类型，href决定引入地址，一般用于引入css等资源
script type指定MIME类型可内嵌代码，可外链文件

3.1.4 HTML body功能性标签

大致分为：根元素，文本语义，表单元素，表格元素，嵌入元素等

3.1.5 HTML ARIA

为无障碍设计的属性

3.1.6 HTML5

不再是单纯地纯文本标记语言 Canvas 音视频拖拽 Worker svg 位置信息等加入了许多的语义化标签，使得网页层次更加清晰扩展了表单组件，支持radio 下拉框颜色时间选择器等等加入了localStorage sessionStorage存储机制

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

HTML5 应用

使用 HTML5 你可以简单地开发应用

本地数据存储
访问本地文件
本地 SQL 数据
缓存引用
Javascript 工作者
XHTMLHttpRequest 2

3.1.7 HTML5 IndexedDB

IndexedDB(50Mb之间) 使用对象存储空间可以存储任何类型的数据 ps：web storage(5-25MB) 只能存储字符串 cookie(4kb)

3.1.8 HTML5 PWA & AMP

PWA基于Service Worker AMP便于搜索引擎爬取

3.1.9 HTML5 Audio Video

定制化Media能力

3.1.10 HTML5 二进制

Blob,ArrayBuffer等

3.1.11 HTML5 web worker

在主线程中newWorker
在主线程中定义监听器
使用postMessage互传数据
使用terminate销毁线程

3.1.12 HTML5 web socket

一种全双工通信方式

3.1.13 HTML5 shadow DOM

一个相对隔离的小环境，可以避免内部的元素被外部元素访问到典型的例子是video标签

3.1.14 HTML5 web component

自定义html标签

前端语言串讲 | 青训营