web开发的前端

web开发的知识体系总结

一、客户端（前端）

1. HTML

编写网页，但是丑

1.1 文字排版

1.2 图片显示（重点）

1.3 清单标签

1.4 超链接标签（重点）

1.5 表单标签（重点）

1.5.1 form标签

1.5.2 input标签

1.5.3 select标签

1.5.4 textarea标签

2. CSS（了解）

HTML+CSS：编写网页，好看，但是没有动态效果

2.1 引入CSS

HTML和CSS建立关联关系

2.2 选择器

使用选择器选中要修饰的标签

2.3 常用的CSS样式

使用样式修饰标签

3. JavaScript

HTML+CSS+JavaScript：编写网页，好看，有动态效果，但是有难度

3.1 JS基本语法（ECMAScript）

3.1.1 基本语法

1. 变量定义
2. 数据类型
3. 运算符
4. 流程控制语句

3.1.2 函数（重点）

1. 普通函数
   • 定义
   • 调用
2. 匿名函数
   • 把匿名函数赋值给一个变量，通过变量名调用函数
   • 把匿名函数作为另外一个函数的实参传递进去
3. js的函数没有重载

3.1.3 事件（重点）

1. 常见事件
   • onclick：单击
   • ondblclick：双击
   • onsubmit：表单提交
   • onchange：域内容改变
   • onload：加载完成
2. 绑定事件
   • 普通函数的方式
     
     

3.2 操作浏览器（bom对象）

3.2.1 window对象

1. 让浏览器弹窗
2. 让浏览器开启定时器
3. 提供了一些全局函数

3.2.2 location对象

1. 获取网址
2. 设置网址（网址跳转）
3. 刷新当前页

3.2.3 history对象

1. 前进一步：
2. 后退一步：
3. 切换n步：

3.3 操作网页（dom对象）

3.3.1 操作标签

1. 获取标签
   var element = document.getElementById(“id”);
   var elements = document.getElementsByName(“name属性值”);
   var elements = document.getElementsByTagName(“标签名称”);
   var elements = document.getElementsByClassName(“类名”);
2. 创建标签
3. 插入标签
4. 删除标签
5. 操作标签体
   • 获取标签体：var html = 标签对象.innerHTML
   • 设置标签体：标签对象.innerHTML = “html代码”;
     • 设置的HTML代码会生效
     • 覆盖式设置

3.3.2 操作属性

1. 获取属性
   • var value = 标签对象.属性名
   • var value = 标签对象.getAttribute(“属性名”)
2. 设置属性
3. 删除属性

注意：

推荐使用.属性名的方式。简单

.属性名方式不能操作的情况有：

1. 属性名称是关键字

2. 是自定义的属性

3. Bootstrap

4.1 下载与引入

1. 把css、fonts、js三个文件夹拷贝到项目里
2. 使用页面模板，改一个模板里的bootstrap.css、jquery类库和bootstrap.js三个文件的路径

4.2 栅格系统

实现页面布局。用法类似于表格

4.2.1 容器：相当于table标签

• container：随着设备类型而改变的固定宽度。
  • 两边有留白
• container-fluid：宽度始终是100%

4.2.2 行：相当于tr标签

• row：一个容器里可以有多个行
  • 一行分12份
  • 如果一行不够12份，空着
  • 如果一行超过12份，换行显示

4.2.3 单元格：相当于td标签

• col-xx-n:
  • xx：设备类型
    • lg：大型设备
    • md：中型设备
    • sm：小型设备
    • xs：超小型设备
  • n：单元格在一行里占几份
• 实现响应式布局的方法：
  • 一个单元格，增加各种设备类型的样式
  • Bootstrap会根据实际浏览器宽度，自动切换显示合适的样式

二、数据库

三、服务端（web核心）