360前端星计划（第一天）——HTML&&CSS&&JS

前端是什么

• web标准技术
  HTML、CSS、JavaScript、SVG、HTTP
• 运行环境
• 界面与交互

考虑什么？

• 功能
• 美观
• 无障碍
• 安全：保护用户数据
• 性能：流畅
• 兼容性

前端的边界
nodeJS、ELECTRON、React Native、Web RTC、Web GL、WEBASSEMBLE、autoCAD

HTML

1. 的作用
2. 语义化：提升可读性、搜索引擎优化、提升无障碍（盲人-图片）
3. html的扩展性：meta、data-、link、JSON-LD
   meta：
   渲染器：renderder标签，内核的问题，css和js渲染与交互的方式、双核？不支持则直接忽略掉
   指定ie的渲染模式：ie=edge
   data-
   data-id=“1”//自定义属性
   dataset API：获取属性
   link -
   css、浏览器预加载、favicon、rss
   JSON-LD：描述格式化的数据，使搜索引擎以更高效的方式来进行信息提取。如果是动态的呢？？？？？？？
4. web无障碍：可访问性（Accessibility/ALLY）；任何人都可；排除生理、心理障碍。
   我们应该看的东西：ACAG、ARIA
   为img提供alter属性
   noscript//不支持js的时候显示的内容
   input和label对应//一：label包input；二：label for+input_id
   图形验证码和语音验证码
   文字和背景有足够对比度
   键盘可操作
   工具：W3C validator、emment、markdown
   CSS
   作用：布局和涂鸦
   盒模型、文档流
   文本
   文本模式：writing-mode
   文本方向：最好直接使用html中的dir属性——可以自动识别是什么语言
   float布局——主要用于图片式的
   shape-outsize
   https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside
   清除浮动：1、zoom；2、clear标签
   position布局
   absolute（完全脱离）与float（半脱离)
   sticky!//看得见的时候是relative，看不见是fixed
   body的默认高度是0，所有使用%对子元素进行布局的时候，要设置为100%
   section启用如rotate的新属性的时候，有独立的上下文。
   格式上下文
   BFC、IFC：垂直高度不生效
   行内标签的高度由kine-geight决定
   table：tale-layout和cologroup的属性实现边加载边渲染
   Flex布局：瓜分父容器的宽度
   grid布局:内部平台
   怎么看分层：先打开控制台，然后ctrl+shift+p打开工具搜索栏，搜索show layer~
   讲闭包要从作用域开始讲。
   JavaScript
   JS不只是工具？注重可读性。
   不要用js来实现css的功能。注重代码的可读性。
   少写js，用css来代替js有优势也有劣势
   封装不一定是class，封装到一个function里面也是可以的。
   console.log(“a”);
   console.log(“b”);
   console.log(“c”);

抽象包括数据抽象和过程抽象。
函数返回函数-》高阶函数
await?
过度设计？维护起来很麻烦。少点嵌套，不要把状态和数据暴露在外面，封装性和可扩展性，使得第三方使用api更方便，需要对程度进行把控。