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

75 阅读2分钟

前言

基础

HTML:超文本标记语言( Hyper Text Markup Language ),是一种标记语言。它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的 Internet 资源连接为一个逻辑整体。HTML 文本是由HTML命令组成的描述性文本,HTML 命令可以说明文字,图形、动画、声音、表格、链接等。

 <html>
     <head>
         <meta charset="utf-8">
         <title>标题</title>
     </head>
     <body>
         <h1>我的第一个标题</h1>
         <p>我的第一个段落。</p>
     </body>
 </html>

CSS:层叠样式表(Cascading Style Sheets)是一种用来表现 HTML(标准通用标记语言的一个应用)或 XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

 body {
     background-color:#d0e4fe;
 }
 h1 {
     color:orange;
     text-align:center;
 }
 p {
     font-family:"Times New Roman";
     font-size:20px;
 }

JavaScript:JavaScript(简称 JS)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发 Web 页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。

  1. 借鉴 C 语言的基本语法
  2. 借鉴 Java 语言的数据类型和内存管理
  3. 借鉴 Scheme 语言,将函数提升到“第一等公民”(first class)的地位
  4. 借鉴 Self 语言,使用基于原型(prototype)的继承机制
 <html>
     <body>
         <h2>Body 中的 JavaScript</h2>
         <p id="demo">一个段落。</p>
         <button type="button" onclick="myFunction()">试一试</button>
         
         <script>
             function myFunction() {
                 document.getElementById("demo").innerHTML = "段落已被更改。";
             }
         </script>
     </body>
 </html>

浏览器引擎

image.png

V8 工作流程

image.png

V8 是 Google 开源的 JavaScript 和 WebAssembly 引擎,用 C++ 编写。它用于 Chrome 和 Node.js 等。 V8 实现了 ECMAScript 和 WebAssembly,并在 Windows7 或更高版本、macOS 10.12+ 以及使用 x64、IA-32 或 ARM 处理器的 Linux 系统上运行。其他系统(IBM i、AIX)和处理器(MIPS、ppcle64、s390x)由外部维护。V8 可以独立运行,也可以嵌入到任何 C++ 应用程序中。

前端语言之间的协作

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>

JavaScript in HTML

HTML in JavaScript

CSS in JavaScript

HTML

标签

head

body

HTML5

语义化

存储/音视频

浏览器API

可视化相关

拓展

回顾分析

UI<->Data