前端语言串讲｜青训营笔记前端三剑客 HTML(Hypertext Markup Language) CSS(Casc

前端三剑客

HTML(Hypertext Markup Language)
CSS(Cascading Style Sheet)
JavaScript

浏览器渲染

HTTP -> 构建DOM树 -> 计算CSS树 -> 排版 -> 渲染合成 -> 绘制

CSS in HTML

inline 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>

事件捕获和事件冒泡

首先进行事件捕获

graph TD
Document --> HTML
HTML --> body
body --> div
div --> button

捕获到之后进行事件冒泡

graph TD
button --> div
div --> body
body --> HTML
HTML --> Document

HTML in JavaScript

function renderHello() {
    var template = document.getElementById('template').innerHTML;
    var rendered = Mustache.render(template, {name: 'Luke'});
    document.getElementById('target').innerHTML = rendered;
}

JSX（一种JavaScript语法扩展，最先应用在React框架中）

class HelloMessage extends React.Component {
    render() {
        return {
            <div>
                Hello {this.props.name}
            </div>
        }
    }
}

ReactDOM.render(
    <HelloMessage name="Taylor" />,
    mountNode
)

HTML_DTD

基本语法

标签（元素）Element<tagname></tagname>
文本Text
注释Comment
DTD Document Type Defination<!Doctype html>
处理信息ProcessingInstruction<?a 1?>

HTML_head标签

head: title, base, meta, link, script

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

HTML5_语义化标签

header, nav, main, article, section, footer

HTML5_存储

HTML5_indexDB

HTML5_API

Drag and Drop 拖拽释放
Geolocation 获取地理位置

Drag 和 Drop在一次面试中被问过，而我只是听说过这个概念，完全没用过，所以就尬住了。于是对方又提问了不适用API的实现方式，但也答得一知半解，这要就是没怎么接触过这类情况

HTML_Web Worker

一个多线程方式

HTML_Shadow DOM

保证黑箱，对外不可见也不可更改，是Web component必要的一个环节

HTML_WebGPU

着色器语言

Web的风靡

对用户友好

无需安装
无需强大硬件
升级非常方便
容错率强
传播方便

对开发者友好

心智模型成熟
丰富的API能力
框架、工具标准化
开发、调试简单
具备跨平台能力

领域成熟度

whatwg/w3c/ecma
浏览器厂商整合
各类Web应用风靡
商用平面设计标准化
全面组件化

未来的方向

效率工具(Rust)
Js 2 Anything
服务端容器化
低（无）代码站点
大前端的统一
三维可视化

总结

本节课程串讲了前端三剑客的基本使用和语法，着重讲解了HTML和HTML5新特性，可以看出前端语言从离散的模式渐渐向着统一融合，未来的趋势也一定是统一整合。

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