1、前端语言的基本能力

HTML

含义：

全称（Hypertext Markup Language），用于构建整体框架。控制内容的布局，提供网页设计的结构，是任何网页的基本模块。

一般框架：

<html>
    <head>
        <title>XXX</title>
    </head>
    <body> 一般body放各种标签，列几个标签：
        <h1>有h1~h6六种标题标签</h1>
        <p>段落标签</p>
        <em>强调（语义）标签（斜体）</em><strong>强调（内容）标签（加粗）</strong>
        <br>换行标签</br>
        <div>div标签，没有语义，是一个区块，一般用于页面的布局</div>
        <img>图片标签</img>
        <a>a标签，用于超链接</a>
    </body>
</html>

CSS

含义：

全称（Cascading Style Sheet），为网站提供样式。对网页的各个元素设置样式，使网页可以适应各种不同大小的屏幕尺寸，主要处理网页的外观和感觉。

语法：

由选择器、属性和值三部分构成。 Selector Declaration{Property: Value; Property: Value;}

Javascript

含义：

用于提升网页的互动性。可以处理复杂的函数和功能，可以增强功能性。

特点：

借鉴C语言的基本语法；
借鉴Java语言的数据类型和内存管理；
借鉴Scheme语言，将函数提升到"第一等公民”(first class)的地位；
借鉴Self语言，使用基于原型 (prototype) 的继承机制。

数据类型

基本类型（值类型）：

String: "XXX"
Number: 111
Boolean: true/false
Null: null
Undefined: undefined
Symbol: Symbol('xxx') Symbol()函数会返回symbol类型的值，每个从Symbol()返回的symbol值都是唯一的。
BigInt: 1n 需添加后缀n，只用来表示整数，没有位数的限制，任何位数的整数都可以精确表示。

复杂类型（引用类型）：

Object:

var a = {
    name: "aaa",
    calc: function() {
        console.log(aaa);
    }
}

Array

var arr = [1, 2, "abc", true]

Function

function funcName(param1, param2) {
    var a = param1 + param2;
    return a;
}

三件套综述

用“人”的肉体结构来看，HTML相当于“人”的“骨架”，CSS相当于“人”的“皮肤”，JavaScript相当于“人”的“大脑系统”。

2、前端语言的协作配合

CSS在网页中有三种写法，内联引入（Inline CSS）、嵌入式（Internal CSS）、外部引入（External CSS）。JavaScript在网页中位于script标签中，JavaScript也可以表示HTML和CSS。

<p style="color: blue;"></p>
<head>
    <style type = text/css>
        body {background-color: blue;}
    </style>
</head>
<head>
    <link rel="stylesheet” type="text/css” href="style.css">
</head>
<script>
    var a = 1;
</script>

3、你不知道的HTML(5)

HTML标签分类：

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

HTML ARIA

在一些属性增加了aria，方便了残疾人士对网页的浏览。也有利于开发者设计UI系统。

语义化标签

如< aside> < header>等标签，方便开发者进行开发和维护。

表单增强

新增< input>标签，可以设置提示信息、表单校验、日期等选择控件、进度条等属性。

IndexedDB

JavaScript的内置数据库，提供了类似数据库风格的数据存储和使用方式。存储的数据是永久保存的，且以对象的形式存储，每个对象有一个key值作为索引。

AMP 和 PWA

加速移动页面AMP：是一个开源项目，目的是使移动页面加载和优化更快。好处有：网络加载时间加快、跳出率低等。
渐进式网站应用程序PWA：是一种网站应用程序，使用网站的现代功能概念，以便像其他应用程序一样向用户提供体验。好处有：数据用的少、不需要频繁更新且更新也很快、成本低等。

Video和Audio

HTML5提供了video和audio标签，用于播放视频和音频。

Web Socket

4种状态：

连接中状态connectting state：oppening handshake进行握手
连通状态open state：data transfer，client和server之间可以传输数据
关闭中状态closing state：closing handshake关闭握手
关闭状态closed state：TCP connection terminated连接已断开

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');
// Connection openedsocket.addEventListener('open', (event)=>{
    socket.send('Hello Server!');
});
// Listen for messages
socket.addEventListener('message', (event)=>{
    console.log('Message from serverevent.data);
});

Web Component

可以用JavaScript封装一个标签，用于html中。

前端语言串讲 ｜ 青训营