HTML

• p：是段落标签，可自动换行!!
• pre：是预格式标签，可展示标签内文字原本的格式(方便代码展示)
• div：通常结合css用于布局，没有任何显示效果，div是块元素，会自动换行
• span：与div用法相似，但是span是内联元素，即不会换行

CSS

基础

• css语法
  selector {property: value} => 即 选择器{属性:值}
• css选择器
  1.元素选择器 => 直接使用元素类型，如p
  2.id选择器 => #
  3.类选择器 => .
• css文本
  1.color
  2.text-align:对齐=>div是块级元素，其默认宽度是100%，所以文本有对齐的空间前提; span是内联元素其默认宽度就是其文本内容的宽度简单说就是文本已经粑在其边框上了，对齐是看不出效果来的
  …参考：https://how2j.cn/k/css2/css2-text/241.html#nowhere
• cusor：鼠标样式
• css表格
  1.表格布局=>table-layout:automatic|fixed，前者由内容决定，后者是固定值
  2.表格边框=>border-collapse:separate|collapse，前者是分开的双层边框，后者是单层边框
• css边框
  参考：https://how2j.cn/k/css2/css2-border/246.html#nowhere
• css内边距
  指的是元素里的内容与边框之间的距离
  属性：
      padding-left: 左内边距
      padding-right: 右内边距
      padding-top: 上内边距
      padding-bottom: 下内边距
      padding: 上 右 下 左
• css外边距
  指的是元素边框和元素边框之间的距离
  属性：
      margin-left: 左外边距
      margin-right: 右外边距
      margin-top: 上外边距
      margin-bottom: 下外边距
• css盒模型
  
  蓝色部分是内容； 红色虚线是边框；
  通常还有一个border属性，可以理解为边框的宽度(显示的时候夹在padding和margin之间)
• css超链状态
  link - 初始状态，从未被访问过
  visited - 已访问过
  hover - 鼠标悬停于超链的上方
  active - 鼠标左键点击下去，但是尚未弹起的时候
• css隐藏
  display:none=> 隐藏一个元素，这个元素将不再占有原空间， “坑” 让出来了
  visibility:hidden=> 隐藏一个元素，这个元素继续占有原空间，只是“看不见”
• css优先级
  1.style标签与外部文件style.css样式重复 => 优先使用最后出现的一个
  2.tyle标签上的与style属性冲突 => 优先使用style属性
  3.如果样式上增加了!important，则优先级最高，甚至高于style属性

css布局

• css盒模型
  见css基础部分
• 绝对定位
  position:absolute(相对于其他元素移动)
  参考：https://how2j.cn/k/css2/css2-absolute/250.html
  设置了绝对定位的元素，相当于该元素被从原文档中"删除了"
  绝对定位是基于最近的一个定位了的父容器
  如果没有定位了的父容器，则是相对于body进行定位
  z-index:通过绝对定位可以把一个元素放在另一个元素上，这样位置就重复了。重复了，就存在一个谁掩盖谁的问题。 这个时候就可以使用z-index属性， 当z-index的值越大，就表示放上面，z-index:越小就表示放下面。
• 相对定位
  position:relative(相对于自己正常的位置移动)
  与绝对定位不同的是，相对定位不会把该元素从原文档"删除"掉，而是在原文档的位置的基础上，移动一定的距离(原位置处保持空白，不会被删除)
  参考：https://how2j.cn/k/css2/css2-relative/251.html
• css浮动
  float:left|right
  浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。原来的“坑”就让出来了，剩余元素会去占用这个“坑”，如果原来的元素属性是浮动，但是并没有离开该坑，剩余元素就会围绕在原来元素的旁边
  1.右：并且是在原来的高度的基础上，向右浮动
  2.左：…
  3.如果剩余元素不想围绕在浮动元素的旁边 => 设置属性clear，如clear:left 即达到不允许浮动元素出现在左边的效果
  4.水平排列div：默认的div排列是会换行的=>如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方；如果超出了父容器，还会有自动换行的效果
• css显示方式
  元素的display显示方式有多种 => 隐藏(none)、块级(block)、内联(inline)、内联-块级(inline-block)
  1.display:none：使得被选择的元素隐藏，并且不占用原来的位置
  2.display:block;：表示块级元素。块级元素会自动在前面和后面加上换行，并且在其上的width和height也能够生效。 div默认是块级元素；span默认是内联元素(不会有换行,width和height也不会生效)
  3.display:inline： 表示内联元素。内联元素前后没有换行，并且在其上的width和height也无效。 其大小由其中的内容决定
  4.dliplay:inline-block：内联是不换行，但是不能指定大小；块级是能指定大小，但是会换行=>inline-block既能指定大小，还不会换行
• css水平居中
  1.内容居中 => div设置属性 align=“center” 或者 style=“text-align:center”，使其中的内容居中
  2.元素居中：
    a.默认情况下div会占用100%的宽度,所以无法观察元素是否居中
    b.通过设置div的宽度，再使用样式 margin: 0 auto来使得div元素居中
    c.span 是内联元素，无法设置宽度，所以不能通过margin:0 auto居中
    d.span的居中可以通过放置在div中，然后让div text-align实现居中
• css垂直居中
  1.line-height：适合单独一行垂直居中
  2.padding：借助设置相同的上下内边距，实现垂直居中效果，可以用在多行文本上
  3.table方式：首先通过display: table-cell把div用单元格的形式显示，然后借用单元格的垂直居中vertical-align: middle; 来达到效果。这样对图片也可以居中，上一步 line-height就不能对图片居中。

JavaScript

js 语言

• 语言基础
  完整的javascript由语言基础，BOM和DOM三部分组成。只有通过javascript操作DOM对象的时候，才会带来很好的实用效果
• js计时器
  1.setTimeout(functionname, 距离开始时间毫秒数 ) => 只显示一次
  2.setInterval(函数名, 重复执行的时间间隔毫秒数 ) =>不停地重复执行

BOM

• 概述
  BOM即 浏览器对象模型(Browser Object Model)
  包括：
      Window(窗口)
      Navigator(浏览器)
      Screen (客户端屏幕)
      History(访问历史)
      Location(浏览器地址)
• …