前端

菜鸟教程

W3School

页面逻辑：从左往右，从上到下，从外到内。

HTML

元素

属性

标签

CSS

margin-top不生效加padding-top和box-sizing:border-box;

导入方式

内联样式 head标签内 <style>

内部样式 <h2 style="color:rgb(90, 108, 108);">二级标题</h2>

外部样式 <link>

选择器

用于针对特定元素或一组元素定义样式

元素选择器

类选择器 .类名 <h3 class="类">...</h3>

ID选择器 #ID <h3 id="ID">...</h3>

通用选择器 *

子元素选择器 .father > .son

<dir class = "father">
    <p class = "son">子元素</p>
</dir>

后代选择器

兄弟选择器

伪类选择器

常用属性

JavaScript

输入

document.getElementById("demo")

逻辑

变量 let

常量 const 硬编码大写形式

数据类型 Number,String(反引号可用${}),Boolean,Null(值未知),Undefined(未赋值),Object

运算符 typeof in

函数 表示一个“行为”的值

箭头函数 let func = (arg1, arg2, ..., argN) => expression; 左侧获取参数,右侧表达式

传递函数本身，不用箭头函数则会立即执行并传递函数结果

function ask(question, yes, no) {
  if (confirm(question)) yes();
  else no();
}

ask(
  "Do you agree?",
  () => alert("You agreed."),
  () => alert("You canceled the execution.")
);

代码风格

注释风格 JSDoc：用法、参数和返回值

/**
 * 返回 x 的 n 次幂的值。
 *
 * @param {number} x 要改变的值。
 * @param {number} n 幂数，必须是一个自然数。
 * @return {number} x 的 n 次幂的值。
 */
function pow(x, n) {
  ...
}

代码测试BDD 测试、文档、示例

对象 属性 键值对 方括号 属性名字符串 点符号 ＋ 属性名

计算属性

简写

所以，大部分时间里，当属性名是已知且简单的时候，就使用点符号。如果我们需要一些更复杂的内容，那么就用方括号。

遍历一个对象的所有键 "for..in" 循环

输出

document.write()

innerHTML

console.log()

alert()

prompt()

confirm()