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

前端语言的基本能力
前端语言的协作配合
你不知道的HTML
拓展分享

前端语言的基本能力

HTML（骨骼）

Hypertext Markup Language Web页面的起始

CSS（皮囊）

Cascading Style Sheet 层叠样式表，给网站添加样式，网站的外表

JS（肌肉）

JavaScript 增加交互体验，处理复杂的函数

前端语言的协作配合

在html中通过标签引入对应的css文件，例如

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Log in</title>
<link rel="stylesheet" type="text/css" href="login.css"/>

link标签写在head标签层，这样就将css样式文件链接了过来。

在html中通过标签引入js文件，例如

<script type="text/javascript" src="login.js"></script>

script写在body层，相当于将对应的目标文件加载到了这里。 html有了css样式文件，就增加了灵魂，就知道如何取渲染UI样式。js文件中写一些逻辑处理，例如点击事件的处理等，除此外，js中也可以加html。

你不知道的HTML

HTML的基本语法

标签（元素）Element
文本Text
注释Comment
DTD Document Type Defination
处理信息ProcessingInstruction

HTML的标签分类

mindmap
      标签分类
          文档型
            <!DOCTUPE>
            <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>

HTML head标签

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

HTML5

语义化、存储/音视频、浏览器API、可视化相关

扩展分享

Web的风靡

对用户友好

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

对开发者友好

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

领域成熟度

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

未来的方向

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

前端语言串讲|青训营