软件架构的分类：B/S、C/S
web开发中的资源：静态资源、动态资源
一、html：搭建网页框架
1.概念：超文本标记语言
2.标签：
（1）文件标签
<!DOCTYPE html> <html> <head> --> <title>、<meta charset="utf-8"> <body>
（2）文本标签
<h1>~<h6> <p> <br /> <hr /> <b> <i> <font> <center>
color:1.写英文 2.rgb(num,num,num) 3.#XXXXXX
width:1.写数字 3.写百分数
（3）图片标签
<img src="路径" width="图片宽度" height="图片高度" alt="加载失败的提示文字"/>
（4）列表标签
<ul type=""><li></li></ul>
<ol type=""><li></li></ol>
（5）链接标签
<a href="跳转URL" target="打开链接的方式"></a>
（6）块标签
<div>:每一个div占一整行。块级标签
<span>:在一行内显示。 内联标签 行内标签
（7）语义化标签
<header> <footer>
（8）表格标签
<table>属性：width，border，cellspacing（表格之间的距离）,cellpadding(内容和单元格的举例)
bgcolor,align
<tr>属性：bgcolor,align
<td>属性：rowspan,colspan
<th> <caption> <thead> <tbody> <tfoot>
（9）表单标签
<form> action:提交的路径 method:提交的方式
<input> type=text,password,radio,checkbox,file,hidden,submit,button,image,date,color,num,email
<select><option></option></select>
<textarea></textarea>
二、css：美化网页
1.概念：层叠样式表
2.格式：
选择器{
属性名:属性值;
}
3.选择器：
id选择器：#id名{}
类选择器：.类名{}
元素选择器：标签名{}
选择所有元素：*{}
并集选择器：选择器1,选择器2{}
交集选择器：选择器1选择器2{}
子类选择器：选择器1 选择器2{}
父类选择器：选择器1>选择器2{}
属性选择器：元素名[属性名="属性值"]{}
伪类选择器：选择器:状态{}
link:初始状态
visited:访问过
hover:鼠标悬浮
active:正在点击
4.属性：
font-size:字体大小
color：颜色
text-align:对其方式
line-height:行高
background:背景
border:边框
width,height:
5.盒模型：margin：外边距 padding：内边距
6.浮动：作用：把块级元素排在同一排
三、JavaScript：给网页加特效
1.一门客户端脚本语言。
2.两种和HTML结合的方式：内部JS,外部JS
3.注释： // /* */
4.原始数据类型：number string boolean null undefined
5.变量：JAVA是强类型的，JS是弱类型的。
6.运算符：
（1）一元运算符 ++ -- +
把其他类型转化为number：
string:按照字面值，如果字面值不是数字，则转为NaN。
boolean:true为1，false为0
null 和 undefined：NaN
（2）算数运算符 赋值运算符 三元运算符
（3）比较运算符 ==和===的区别:==只比较值，===比较数据类型和值。
（4）逻辑运算符
把其他类型转化为boolean：
number：非0为true，0或NaN为false
string：非空为true
null undefined：false
对象:true
7.流程控制语句
switch：case可以接收任意的类型。
8.JS特殊语法：
加var定义变量是局部变量，不加是全局变量。
9.对象：
（1）Function
var fun = new Function(参数列表，方法体)
function 方法名(参数){方法体}
var 方法名 = function(参数){方法体}
属性:length:形参个数
特点：不定义参数类型和返回值，如果方法名一样，会覆盖，方法调用只与名称有关，与参数无关。如果定义
名称一样的方法会覆盖。
方法内部有一个隐藏的arguments对象，代表实参数组。
（2）Array
var arr = new Array(元素列表)
var arr = new Array(默认长度)
var arr = [元素列表]
属性:length 代表数组长度
方法:join() push()
特点：长度和元素类型都是可变的。
（3）Date Math
（4）RegExp:正则表达式对象
A.正则表达式，定义字符串的组成规则。
[]:单个字符
\d:单个数字
\w:单个字母或数字
?：出现0或1次
+：出现至少一次
*：出现0次或多次
{m,n}表示出现m到n次
^：开始字符
$：结束字符
B.var reg = new RegExp("正则表达式");
var reg = /正则表达式/;
C.reg.test(字符串)
（5）Global：全局对象，不需要对象可以直接使用。
encodeURL:编码
decodeURL:解码
encodeURLComponet:编码(包括特殊符号)
decodeURLComponet:解码(包括特殊符号)
parseInt()
isNaN()
eval()
BOM:
(1)document.getElementById("id名");
(2)元素.onclick = function对象;
(3)Window:可以直接调用
alert()
confirm()
prompt()
open()：参数可选，打开的URL，返回值是新打开的窗口对象。
close()：谁调用，关谁。
setTimeout(方法对象,毫秒)：返回值是一个定时器对象
clearTimeout(定时器对象)
setInterval(方法对象,毫秒)：返回值是一个定时器对象
clearInterval(定时器对象)
window的属性:location,history,document
（4）Location:地址栏对象
方法:location.reload()
属性:location.href
（5）History:历史记录对象
属性:length
方法:forword() back() go()
DOM:文档对象模型
1.核心DOM
（1）document：文档对象
getElementById()
getElementsByTagName()
getElementsByClassName()
getElementsByName()
createElement()
createTextNode()
（2）element：元素对象
setAttribute("属性名","属性值")
removeAttribute("属性名")
（3）node：节点对象（其他所有dom对象的父类对象）
appendChild():添加子节点
removeChild():删除子节点
parentNode:父节点
2.HTML DOM：
A.可以直接通过 元素对象.属性 修改元素的属性值
（1）元素对象.innerHTML:修改标签体内容
（2）元素对象.style.css属性:修改样式
（3）元素对象.className:修改类属性
B.事件
onclick()
ondblClick()
onmouseover()
onmouseout()
onload()
onblur():失去焦点
onfocus()：获得焦点
onsubmit():
onchange():
四、Bootstrap：一个前端框架
1.使用：
（1）下载bootstrap
（2）将三个文件夹复制到我们的项目中
（3）创建html文件，引入必要的静态资源。（bootstrap.css/jquery.js/bootstrap.js）
2.功能：
（1）栅格系统：响应式布局。
容器:container/container-fluid
行:row
格:col-设备代号-格子数目
（设备向上兼容，向下占满12格）
（2）利用他的样式和组件。
按钮/图片/表格/表单/导航条/分页条/轮播图
原文：https://www.cnblogs.com/aniymx/p/9931335.html