web开发的知识体系总结
一、客户端(前端)
- 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标签
- CSS(了解)
HTML+CSS:编写网页,好看,但是没有动态效果
2.1 引入CSS
HTML和CSS建立关联关系
2.2 选择器
使用选择器选中要修饰的标签
2.3 常用的CSS样式
使用样式修饰标签
- JavaScript
HTML+CSS+JavaScript:编写网页,好看,有动态效果,但是有难度
3.1 JS基本语法(ECMAScript)
3.1.1 基本语法
- 变量定义
- 数据类型
- 运算符
- 流程控制语句
3.1.2 函数(重点)
- 普通函数
- 定义
- 调用
- 匿名函数
- 把匿名函数赋值给一个变量,通过变量名调用函数
- 把匿名函数作为另外一个函数的实参传递进去
- js的函数没有重载
3.1.3 事件(重点)
- 常见事件
- onclick:单击
- ondblclick:双击
- onsubmit:表单提交
- onchange:域内容改变
- onload:加载完成
- 绑定事件
- 普通函数的方式
- 普通函数的方式
3.2 操作浏览器(bom对象)
3.2.1 window对象
- 让浏览器弹窗
- 让浏览器开启定时器
- 提供了一些全局函数
3.2.2 location对象
- 获取网址
- 设置网址(网址跳转)
- 刷新当前页
3.2.3 history对象
- 前进一步:
- 后退一步:
- 切换n步:
3.3 操作网页(dom对象)
3.3.1 操作标签
- 获取标签
var element = document.getElementById(“id”);
var elements = document.getElementsByName(“name属性值”);
var elements = document.getElementsByTagName(“标签名称”);
var elements = document.getElementsByClassName(“类名”); - 创建标签
- 插入标签
- 删除标签
- 操作标签体
- 获取标签体:var html = 标签对象.innerHTML
- 设置标签体:标签对象.innerHTML = “html代码”;
- 设置的HTML代码会生效
- 覆盖式设置
3.3.2 操作属性
- 获取属性
- var value = 标签对象.属性名
- var value = 标签对象.getAttribute(“属性名”)
- 设置属性
- 删除属性
注意:
推荐使用.属性名的方式。简单
.属性名方式不能操作的情况有:
-
属性名称是关键字
-
是自定义的属性
-
Bootstrap
4.1 下载与引入
- 把css、fonts、js三个文件夹拷贝到项目里
- 使用页面模板,改一个模板里的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:单元格在一行里占几份
- xx:设备类型
- 实现响应式布局的方法:
- 一个单元格,增加各种设备类型的样式
- Bootstrap会根据实际浏览器宽度,自动切换显示合适的样式
二、数据库
三、服务端(web核心)