web前端复习

一、HTML

HTML文件的基本结构。

常用标签

  • 图片<img>
  • 超链接<a href="">(链接)、<a name="">(锚点)
  • 表格
    • 表格结构:<table><tr><td><th>
    • 跨行跨列:rowspancolspan
  • 列表
    • 有序列表:<ol>
    • 无序列表:<ul>
    • 定义列表:<dl>
  • 表单
    • 文本框、密码框
    • 单选按钮、复选按钮
    • 普通按钮、提交按钮、重置按钮
    • 下拉选择:<select>
    • 文本域:<textarea>

二、CSS

选择器

  • 基本类型:标记选择器、类选择器、ID选择器
  • 复合类型:属性选择器、交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器

盒子模型

  • 内容:width、height
  • 内边距:padding
  • 边框:border
  • 外边距:margin

标准流盒子定位原则

  1. 相邻行内元素:水平定位
  2. 块级元素之间:垂直定位
  3. 父子盒子之间:定位关系
  4. margin负值:特殊定位效果

浮动与清除

  • 浮动float: left/right,元素尽量向上浮动
  • 清除浮动clear: left/right/both

定位

  • position属性
    • static:静态定位(默认)
    • relative:相对定位(保留原位置)
    • absolute:绝对定位(相对于最近定位祖先元素)
    • fixed:固定定位(相对于视口)
  • 定位特点
    • 是否保留原来位置
    • 包含框是什么
    • 位置偏移基准是什么

三、JAVASCRIPT

变量与常量

  • 变量声明:varlet
  • 常量声明:const

基本数据类型

  • numberstringboolean

数据类型转换

  • 隐式转换
    • number → string
    • string → number
  • 显示转换
    • eval()
    • parseInt()
    • parseFloat()
  • 强制转换
    • Number()
    • String()
    • Boolean()

对象

  • 内置对象:Array、String、Date、Math
  • 自定义对象

事件处理

  • 事件响应函数
    • 标记事件
    • 对象事件
    • addEventListener()

DOM(文档对象模型)

  • document
  • image
  • form
  • 表单元素对象

BOM(浏览器对象模型)

  • window对象
  • 对话框:alert()confirm()prompt()
  • 窗口操作:open()close()
  • 定时器:两类定时器方法

四、VUE.JS

概述

  • 创作者:尤雨溪
  • 设计模式:MVVM(Model-View-ViewModel)

使用步骤

  1. 安装 Vue.js
  2. 创建Vue应用实例
  3. 绑定DOM元素
  4. 应用Vue

核心特性

  • 文本插值{{ data }}
  • 指令
    • v-html:渲染HTML
    • v-if/ v-show:条件渲染
    • v-bind:属性绑定
    • v-for:列表渲染
    • v-on:事件绑定
    • v-model:表单双向绑定
  • 计算属性computed
    • 定义像函数,使用像数据
    • 在组件对象的data()方法中使用this.xxx访问
  • 方法methods
  • 监听器watch
    • 监听器函数名与被监听的数据名保持一致
  • Class与Style绑定v-bind
  • 组件化
  • 路由

留下评论

您的邮箱地址不会被公开。 必填项已用 * 标注