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. 黄色的 遮罩容器 会跟随鼠标的移动 而移动 ，鼠标所在的位置 是 这个遮罩层的中心点