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

甘古
45 阅读2分钟

一.HTML(5)概述

1.基本语法

  • HTML并非图灵完备,它只是一门标记语言
  • 标签(元素) Element
  • 文本 Text
  • 注释 Comment
  • DTD (Document Type Defination)
  • 处理信息 ProcessingInstruction

2.标签分类

  • 文档型(必须具备的标签)
    • <!DOCTYPE>
    • <head>
    • <body>
  • 闭合型
    • 闭合标签
      • <p></P>
    • 空标签
      • <br>
      • <img>
      • <input>
  • 换行型
    • 块级标签
      • <div>
      • <h1>,<h2>...<h6>
    • 行内标签
      • <span>
      • <a>
  • H5新元素
    • 语义化标签
    • 媒体标签
      • <video>
      • <audio>
      • <embed>
    • 表单标签
      • <input type="date">
      • <input type="color">
    • 功能标签
      • <canvas>
      • <progress>

3.head标签

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

4.body标签

image.png

5.ARIA

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

image.png

6.HTML5存储

image.png

7.IndexedDB

  • 更适用于复杂场景(异步方式获取)

image.png

8.API

  • GeoLocation API:获取当前用户所在地址
  • Drag & Drop API:实现拖拽

9.SVG & Canvas

  • SVG:基于XML的向量化的图片,可以用来交互
    • 使用矢量绘制
    • 可扩展
    • draw
  • Canvas:HTML元素,可以画各种图形
    • 使用点阵绘制
    • 不可扩展
    • paint

二.Web的优势

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

三.总结

本节课大致了解了前端基础(HTML\CSS\JS\浏览器引擎),前端各语言协作,HTML标签以及前端的优势和发展前景等.随着前端的不断探索和进化,传统的前端“三剑客”技术也是日新月异,而且彼此之间联系越来越紧密,知识需要结合起来学习

avatar
文章
阅读
粉丝