一.前端语言的基本能力

HTML（超文本标记语言）:创建网页结构，控制内容的布局，为网页设计提供结构，是任何网页的基本构建块

CSS（级联样式表）：使网页风格化,将样式应用于网页元素，确定各种屏幕尺寸使网页适应，主要处理网页的外观

Javascript:增加网页的人机交互性，首先向网页添加交互性，同时处理复杂的功能和特性，增加功能的编程代码

二.前端语言的协作配合

1.CSS in HTML

内联样式表（inline in CSS）：直接在html标签中通过style或者class来添加样式

<p style ="color:blue;">这句话是蓝色的</p>

内部样式表（Internal CSS）:在html头部通过style标签定义CSS样式

<head>
 <style type = text/css>
   body {background-color: blue;}
   p {color: yellow;}
  </sytle>
 </head>

引入外部样式表（External CSS）：使用较多，在html头部通过link标签引入

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
 </head>

2.Javascirpt in HTML

script标签既可以引入外部超链接文件，也可以在内部编写条文。默认script都是定义在全局。

Javascript本身也包含一些事件机制，包括Eevent Loop机制，Microtask Queue微任务队列，Macrotask Queue宏任务队列。事件循环的时候先完成一个宏任务，再从microtask完成所有的微任务，依次执行。执行完毕以后再完成宏任务队列里的任务。

1）什么是微任务？

比较常见的有promise callback，process.nextTick()，async function，qucueMicrotask

2）什么是宏任务？

浏览器默认的情况下执行的代码都是宏任务，setTimeout()，setInterval()，setImmediate()

3.HTML in javascript

动态渲染html的内容

//file;render.js

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

<html>
  <body onload="renderHello()">
    <div id="target">Loading...</div>
    <script id="template" type="x-tmpl-mustache">
      Hello {{ name }}!
    </script>
    
    <script src="https://unpkg.com/mustache@latest"></script>
    <script src="render.js"></script>
  </body>
 </html>

4.CSS in JavaScript

通过JavaScript动态操作CSS方法：修改dom元素sttyle对象下某一个属性的值；如果是批量操作直接给csstext赋值；如果修改dom的class属性，通过cssAtribute class为一个特定的name来实现

CSS Module/JSS

CSS Module和JSS都是现在用的比较普遍的技术，他们本身都是为了解决CSS全区类名容易冲突的问题。

三.你不知道的HTML

1.HTML DTD

HTML并非图灵完备，他只是一门标记语言

html是前端开发中最基本也是最简单的一门语言，并不能完成一些控制和计算相关的数据操作，并不是图灵完备的，

基本语法包括：标签（元素）Element：<tagname>...</tagname> 文本Text:text; <![CDATA[text]]> 注释Comment： DTD Document Type Defination:<!Doctype html> 处理信息ProcessingInstruction：<?a1?>

2.HTML head标签

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

3.HTML body功能性标签

根元素，元数据和脚本，文本语义，嵌入内容，分组内容，表单元素，文档模块，表格元素，交互元素

4.HTML ARIA

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

5.HTML 5

1）HTML5语义化标签

header用于放置网页头部，nav来做导航条，aside做侧边栏，level来做菜单，网页的主体部分可以用section来做分割，这其中又会用到details等语义化内容的标签，最后底部使用footer他可以像tail，address等联系方式的一个标签。

使用语义化标签可以帮助开发者更好的维护网站结构，也便于使用su对网站进行整理。

2）html5表单增强

包含颜色选择器和时间选择器等等

3）html5存储

Cookies，Local Storage， Session Storage

Local Storage和Session Storage只为前端服务

4)html5 IndexedDB

IndexedDB使用了objectstore，也就是一个对象存储空间，可以存储任何类型的数据；而webstory只能存储字符串，一个对象必须转换成json字符串才可以。

indexedDB访问打开都是通过if的方式来获取的

前端语言串讲 | 青训营