编程技术

Document

WEB前端HTML

HTML (超文本标记语言)

常见的网页格式

  • .html
  • .htm
  • .shtml (严格模式下的html)

常见的标签

  • html : 根标签、一个网页有且只有一个根标签。

  • head : 定义网页的头部信息、是一个不可见标签，主要可以用来设置网页编码、网页标题、缓存等信息

  • body : 表示网页的正文、网页中呈现的内容会定义在body 标签中

  • div : 是一个块元素、通常用来进行网页布局

  • p : 段落标签， 不能嵌套大部分块级元素, p标签可以嵌套行内元素

  • h1 ~ h6 : 标题标签

  • ul li : 无序列表

  • ol li : 有序列表

  • table

    • thead
    • tbody
    • tfoot
    • tr / td / th

  • img : 图片标签

  • form : 块元素

    • label : 标记文本

    • input :

      • text : 单行文本输入框

      • password : 密码框

      • radio : 单选框

      • checkbox : 复选框

      • button : 普通按钮

      • submit : 提交按钮

      • reset : 重置按钮

      • file : 文件上传框

      • date : 日期框

      • number : 数字框

      • range : 范围框

    • textarea : 多行文本框

    • select : 下拉列表

  • span : 行内元素

  • a : 超链接

  • b : 加粗

  • em : 加粗斜体

  • hr : 分隔符

  • br : 换行符

CSS (样式层叠表)

字体相关的样式

  • font-family : 设置字体
  • font-size : 设置 字体大小，默认 16px
  • font-weight : 设置字体粗细
  • font-style : 设置字符风格
  • line-height : 行高

边框相关样式

  • border ：设置边框宽度、样式、颜色
  • border-radius : 设置边框圆角

文本相关样式

  • text-align : 对齐方式
  • text-decarator : 文本装饰
  • text-indent : 文本首行缩进
  • text-overflow : 文本溢出处理
  • word-space : 单词间距
  • color : 字体颜色

外边距

  • margin

内边距

  • padding

背景 相关样式

  • background

定位相关的样式

  • position

    • top
    • right
    • bottom
    • left

  • float

    • clear

其它样式

  • overflow : 溢出处理

JavaScript (浏览器脚本语言)

是一门弱类型语言、是面向对象的。

变量的声明

  • var :
  • let :
  • const :

var 声明的变量会默认作为 window的属性成为 全局变量 ， let 声明的变量是一个局部变量。
var 可以多次声明一个变量， let 在 相同作用范围 不能多次声明
var 存在 变量提升的问题， let 不存在变量提升的问题
let 存在暂时性死区问题

JS 中原始数据类型

  • String
  • Number
  • Boolean
  • Symbol

获取一个变量对应的数据类型使用 typeof 函数

运算符

  • 算术运算符 + - * / %

  • 关系运算符 > >= < <= == === != !==

  • 逻辑运算符 && || !

  • 一元运算符 ++ –

  • 二元运算符 x??y : 当 x 为 null 或者 undefined的时候，取 y的值作为表达式的值，否则取 x的值作为表达式的值

  • 三元运算符 x?y:z

  • 位移运算符 << >> >>>

  • 位运算符 & | ~ ^

== 只比较值是否相等，例如 3 == “3” 是相等的， 1 == true 是相等的
=== 是比较类型和值是否相等，但只能适用于原始数据类型

流程控制 if , switch , for , do… while , while

window 对象

  • btoa(str) : 将一个字符串 进行 Base64 编码

  • atob(str) : 将一个 Base64编码后的字符串 进行解码

  • setTimeout(fn, millseconds) : 将 fn 函数延迟 millseconds 毫秒后 执行

  • setInterval(fn, millseconds) : 每间隔 millseconds 毫秒 执行一次 fn 函数

document 对象

选择器

  • document.getElementById(“id”) : 根据ID 获取元素

  • document.getElementsByTagName(“tagname”) : 根据标签名获取多个元素

  • document.getElementsByNames(“name”) : 根据标签的 name 属性名 获取多个元素

  • document.getElementsByClassName(“class”) : 根据类名 获取多个元素

  • document.querySelector(“css选择器”) : 根据css选择器获取某一个指定的元素

  • document.querySelectorAll(“css选择器”) : 根据css选择器获取所有匹配的元素

  • document.createElement(“tagName”) : 创建一个元素对象，但该对象不会出现在 document文档中

Element 元素常见的操作

  • innerText / innerHTML : 获取或者修改 标签体中的 内容

  • tagName/ nodeName : 获取标签名 ， 返回的标签名全大写

  • getAttribute(prop) : 根据属性名 获取对应的属性值

  • setAttribute(prop, value) : 修改属性名

  • removeAttribute(prop) : 删除指定的属性

  • style : 操作 行内样式

  • className : 获取 或者 修改 class 属性

  • classList

    • add(name) : 添加 class样式
    • remove(name) : 移除 class样式

  • parentNode / parentElement : 获取该元素的 父元素

  • chidren : 获取 该元素下的所有一级子节点

  • querySelector() / querySelectorAll() : 获取该节点的指定的后代节点

  • previousElementSibling ： 获取上一个紧邻的兄弟元素

  • nextElementSibing : 获取下一个紧邻的兄弟元素

  • remove() : 删除自身

  • removeChild(node) : 删除指定的子节点

  • appendChild(node) : 追加一个子节点

  • append(…nodes) : 追加多个子节点

  • offsetLeft / offsetTop : 获取该元素 距离 它最近的具有定位的父元素的 左侧/顶部 距离

  • offsetWidth / offsetHeight : 获取元素的 宽 和 高 (包含边框 但不包含 外边距)

  • clientLeft / clientTop : 获取元素的 做边框宽度 / 上边框 宽度

  • clientWidth / clientHeight : 获取元素的 可见宽 / 高 （不包含边框 但 包含 内边距）

  • scrollLeft / scrollTop : 获取或者设置 滚动条 水平/垂直 位置

  • scrollWidth / scrollHeight : 获取元素的 滚动宽 / 滚动高

放大镜的设计思路

  1. 鼠标放到需要放大的图片上、右侧弹出一个 div容器 （采用绝对定位）

  2. 在图片上添加一个 黄色的 遮罩容器、且该容器 不能超出 图片的位置

  3. 黄色的 遮罩容器 会跟随鼠标的移动 而移动 ，鼠标所在的位置 是 这个遮罩层的中心点