前端语言 ｜ 青训营笔记

凤2018
49 阅读3分钟

前言

随着前端的不断探索和进化，传统的前端“三剑客”技术也是日新月异，而且彼此之间联系越来越紧密。本次课程会帮你复习一下前端的基本知识，“温故而知新”，同时也扩展交流一下周边有趣的小知识。本次课的主要内容包括：前端语言的基本能力、前端语言的协作配合、你不知道的HTML、拓展分享等。

前端语言的基本能力

区别

  1. HTML
  • 创建结构
  • 控制内容的布局
  • 为网页设计提供结构
  • 任何网页的基本构建块
  1. CSS
  • 使网站风格化
  • 将样式应用于网页元素
  • 针对不同的屏幕大小，使网页具有响应能力
  • 主要处理网页的“外观和感觉”
  1. JavaScript
  • 增加互动性
  • 向网页添加交互性
  • 处理复杂的功能和特性
  • 增强功能的程序代码

JavaScript

  • 发展历程

image.png

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

比较

  • 通用JavaScript功能

    1. 验证用户输入
    2. 简单的客户端计算
    3. 加强控制
    4. 独立于平台
    5. 处理数据和时间
    6. 生成HTML内容
    7. 检测用户的浏览器和操作系统

  • 现代JavaScript功能

    1. Let/Const（让/施工）
    2. 箭头功能
    3. Litral模板
    4. 新的数组函数
    5. 默认参数
    6. 财产短缺

你不知道的HTML

HTML并非图灵完备，它只是一门标记语言。其基本语法主要包括标签、文本、注释、DTD以及处理信息。

标签分类

  • 文档型：<!DOCTYPE>、<head>、<body>
  • 闭合型：闭合标签（<p></p>）、空标签（<br>、<img>、<input>）
  • 换行型：块级标签（<div>、<h1>,<h2>...<h6>）；行内标签（<span>、<a>）
  • H5新元素：语义化标签、媒体标签、表单标签、功能标签等

head标签

  • title：标题，全局唯一

  • base：向页面所有相对URL提供前缀；全局唯一，不建议使用

  • meta：通常是约定好的键值对；例外: charset、http-equiv

  • link：rel决定类型，href决定引入地址

  • script：type指定MIME类型；可内嵌代码，可外链文件

ARIA

了解ARIA并非只是为了供盲人阅读，它可以为我们设计UI系统提供指导意义。

image.png

Web的风靡

  1. 对用户友好
  • 无需安装
  • 无需强大硬件
  • 升级非常方便
  • 容错率强
  • 传播方便
  1. 对开发者友好
  • 心智模型成熟
  • 丰富的API能力
  • 框架、工具标准化
  • 开发、调试简单
  • 具备跨平台能力
  1. 领域成熟度
  • whatwg/w3c/ecma
  • 浏览器厂商整合
  • 各类Web应用风靡
  • 商用平面设计标准化
  • 全面组件化
  1. 未来的方向
  • 效率工具(Rust)
  • JS 2 Anything
  • 服务端容器化
  • 低(无)代码站点
  • 大前端的统一
  • 三维可视化
avatar
文章
阅读
粉丝