目录
HTML
Hypertext Markup Language：超文本标记语言
标记语言的格式：
<开始标签 属性名="属性值" 属性名="属性值">标签体</结束标签>
文本相关标签
内容标题h1-h6：字体加粗，独占一行，自带上下的间距
水平分割线hr
段落标签p：独占一行，自带上下间距
换行br
加粗b
斜体i
下划线u
删除线s
无序列表ul和li
有序列表ol和li
列表嵌套：有序和无序列表可以任意无限嵌套
图片标签img
src设置资源路径:
相对路径：访问站内资源时使用
1.资源和页面在同级目录：直接写图片名
2.资源在页面的上级目录：../图片名
3.资源在页面的下级目录：文件夹名/图片名
绝对路径：访问站外资源时使用，称为图片盗链，有找不到图片的风险
alt：当图片不能正常显示时显示的文本
title：鼠标悬停时显示的文本
width/height：设置宽高 两种赋值方式：1.像素 2.百分比
只设置宽度 高度会自动等比例缩放
超链接a
href：设置请求的资源路径，作用类似图片标签的src属性
图片超链接：用a标签包裹文本为文本超链接，包裹图片为图片超连接
页面内部跳转：在目的地元素里面添加id属性，然后在超链接href="#id",这样就能跳转到指定元素的位置
表格标签table
相关标签：table tr表示行 td表示列 th表头 caption表格标题
相关属性：border边框 colspan跨列 rowspan跨行
表单form
作用：获取用户输入的各种信息，并提交给服务器
form表单控件包括：文本框，密码框，单选，多选，下拉选等
<!--action设置请求地址-->
<form action="http://www.baidu.com">
<!--文本框,name属性是所有控件必须添加的属性，否则提交时不会传递此内容
placeholder占位文本 maxlength设置最大字符长度 value设置默认值 readonly只读-->
<input type="text" name="username" maxlength="5" value="xxx" readonly placeholder="用户名"><br>
<!--密码框-->
<input type="password" name="password" placeholder="密码"><br>
<!--value设置提交的内容,如果不设置提交的是on checked设置默认选中
label标签通常和input标签一起使用，标签为input元素定义标注
label标签和特定表单控件关联后，当用户点击标签中的文本时，
浏览器会自动将焦点转到和该标签相关联的控件上-->
性别:
<input type="radio" name="gender" value="m" checked id="r1"><label for="r1">男</label>
<input type="radio" name="gender" value="w" id="r2"><label for="r2">女</label><br>
兴趣爱好:
<input type="checkbox" name="hobby" value="c">吃
<input type="checkbox" name="hobby" value="h">喝
<input type="checkbox" name="hobby" value="w">玩
<input type="checkbox" name="hobby" value="l">乐<br>
地区:
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select><br>
照片:
<input type="file" name="pic"><br>
生日:
<input type="date" name="birthday"><br>
<!--提交按钮-->
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="自定义">
<hr>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">自定义</button>
</form>分区标签
分区标签可以理解为一个容器，将多个有相关性的标签添加到一个分区标签里面，便于统一管理。
常见的分区标签：
div：独占一行
span：共占一行
HTML5.0版本新增的分区标签，这些标签的作用和div一样，为了提高代码的可读性。
header 头
footer 脚
main 主体
nav 导航
section 区域
CSS层叠样式表
如何在html页面中添加css样式代码
三种引入方式：
内联：在标签的style属性中添加样式代码，不能复用
内部：在head标签里面添加style标签，在标签体内添加样式代码，可以当前页面复用，不能多页面复用
外部：在单独css文件中添加样式代码，在html页面中的head标签里面添加link标签，把css引入到html页面中，支持多页面复用
css选择器
作用：用来查找页面中的元素
标签选择器：匹配页面中所有同名标签 格式： 标签名{样式代码}
id选择器：当需要选择页面中某一个标签时使用 格式：#id{样式代码}
类选择器：当需要选择页面中多个不相关的元素时，给多个元素添加相同的class值划分为同
一类 格式：.class{样式代码}
分组选择器：将多个选择器划分为同一组进行统一管理 格式：div,#id,.class{样式代码}
属性选择器：通过元素的属性匹配元素 格式：标签名[属性名='值']{样式代码}
后代选择器：通过元素和元素之间的层级关系元素，选择的范围更广
格式：body div div p{样式代码} 匹配的是body里面的div里面的div里面的所有p(包含后代)
子元素选择器：通过元素和元素之前的层级关系元素，选择的范围更精准
格式：body>div>div>p{样式代码}匹配的是body里面的div里面的div里面的所有p子元素(不包含后代)
伪类选择器：选择元素的状态 包括:未访问/访问过/悬停/激活
格式：a:link/visited/hover/active{样式代码}
颜色赋值方式
三原色：RGB Red Green Blue ，每一种颜色的取值范围0~255
五种赋值方式：
颜色单词赋值：red/blue/green...
6位16进制赋值：#ff0000
3位16进制赋值：#f00
3位10进制赋值：rgb(255,0,0)
4为10进制赋值：rgba(255,0,0,0-1) a=alpha 透明度 值越小越透明
背景图片相关
background-image：url("路径") 设置背景图片
background-size：200px 300px; 设置背景图片大小
background-repeat：no-repeat; 禁止重复
background-position：100px 200px; 设置背景图片的位置
background-position：50% 50%； 设置背景图片的位置
文本和字体相关样式
text-align：right/center; 水平对齐方式
text-decoration：overline上划线/underline下划线/line-through删除线/none去掉修饰
line-height：20px;设置行高，单行可以实现垂直居中，多行可以控制行间距
text-shadow：颜色 x偏移值 y偏移值 浓度(值越小越清晰);
font-size：20px;字体大小
font-weight：bold加粗/normal去掉加粗
font-style：italic;设置斜体
font-family：xxxx,xxx,xxx；设置字体
font：20px xxx,xxx,xxx；设置字体大小+字体
元素的显示方式display
block:块级元素的默认值，显示特点：独占一行，可以修改元素的宽高，包括h1-h6,p,div
inline:行内元素的默认值，显示特点：共占一行，不能修改元素的宽高，包括span,b,i,s,u,a
inline-block:行内块元素的默认值,显示特点:共占一行,并且可以修改元素宽高,包括input,img
none:隐藏元素
盒子模型
通过盒子模型相关的样式控制元素的显示效果
盒子模型包括：content内容+border边框+margin外边距+padding内边距
content内容：用来控制元素的显示大小
border边框：用来控制边框的效果
margin外边距：用来控制元素的显示位置
padding内边距：用来控制元素内容的位置
盒子模型之Content内容
控制元素的显示大小
相关样式：width/height 赋值方式：1.像素 2.上级元素的百分比
行内元素时不能修改宽高的，如果必须要修改，需要将元素的显示方式改为块级block或行内块inline-block
盒子模型之margin外边距
控制元素的显示位置
赋值方式：
margin-left/right/top/bottom:10px;单独某一个方向赋值
margin:10px;四个方向赋值
margin:10px 20px; 上下10 左右20
margin:10px 20px 30px 40px; 上右下左赋值 顺时针
行内元素上下外边距无效
左右相邻彼此添加外边距，两者相加
外边距塌陷：
兄弟元素上下相邻，彼此添加外边距取最大值
父子元素上边缘重叠时，添加外边距取最大值，会导致父子元素粘连在一起，给父元素添加overflow:hidden样式解决。
盒子模型之边框border
赋值方式：
border-left/right/top/bottom：粗细 样式 颜色；单独某一方向添加边框
border：粗细 样式 颜色；四个方向添加边框
border-radius：10px；设置圆角 值越大越圆
盒子模型之内边距padding
控制元素内容的位置
赋值方式：和外边距类似
padding-left/right/top/bottom：10px；单独某一个方向添加
padding：10px；四个方向添加
padding：10px 20px；上下10 左右20
padding：10px 20px 30px 40px；上右下左 顺时针赋值
给元素添加内边距默认情况下会影响元素的显示范围，给元素添加box-sizing:border-box；后则不再影响
部分标签会带盒子模型中的某些样式
body自带8个像素的外边距
段落标签p，列表标签和内容标题h1-h6 自带上下的外边距
文本框自带边框和内边距
列表标签自带外边距和内边距
居中相关
元素自身居中:
块级元素：通过外边距margin:0 auto;
行内或行内块元素：在上级元素中添加text-align:center;
元素内容居中：只能通过text-align:center;
CSS三大特性
继承性：指元素可以继承上级元素文本和字体相关的样式，部分标签自带的效果不受继承影响，比如超链接的字体颜色
层叠性：值一个元素可以层叠很多不同的样式，多个选择器有可能选择到同一个元素，如果添加的样式不同，则样式全部层叠生效,如果添加的样式相同则由由选择器的优先级决定哪个生效
优先级：作用范围越小 优先级越高 !important>id>class>标签名>继承(属于间接选择)
定位
静态定位
position:static;
默认的定位方式,又称为文档流定位
特点:块级元素从上往下依次排列，行内元素从左向右依次排列,通过外边距控制元素的位置
默认情况下无法实现元素层叠效果
相对定位
position:relative;
特点:元素不脱离文档流(不管元素显示到什么位置，仍然占着原来的位置，后面的元素不会顶上来)，元素通过left/right/top/botton样式相对于初始位置做偏移。
应用场景:当元素需要层叠显示时，静态定位是无法实现的，通过相对于定位可以实现层叠，当需要对某一个元素的显示位置进行微调时使用。
绝对定位
position:absolute；
特点：元素脱离文档流(不占原来的位置,后面的元素会顶上来)，通过left/right/top/bottom相对于窗口(默认)或某一个上级元素做偏移。
应用场景：当需要层叠显示，并且需要让元素相对于某个上级元素坐位置偏移时使用。
固定定位
position:fixed；
特点：元素脱离文档流，通过left/right/top/bottom相对于窗口做位置偏移
应用场景：当需要将元素固定在窗口的某个位置时使用
浮动定位
float:left/right
特点：元素脱离文档流，从当前所在行向左或向右浮动，当撞到上级元素边缘或其它浮动元素时停止。
多个浮动元素一行装不下时会自动拆分，拆行时有可能被卡主
当元素的所有子元素全部浮动时，自动识别的内容高度为0，会导致后面的元素顶上来，出现显示异常，给元素添加overflow:hidden解决此问题。
应用场景：将纵向排列的多个元素改成横向排列时使用
溢出设置overflow
hidden 隐藏
visible 显示
scroll 滚动显示
显示层级
当元素为非static定位，出现层叠时,可以通过z-index设置显示层级，值越大显示越靠前
行内元素垂直对齐方式vertical-align
top上对齐
middle中间对齐
bottom下对齐
baseline基线对齐
视频播放
JavaScript
作用：给页面添加动态效果
语言特点：
属于脚本语言，不需要编译由浏览器解析执行。
属于弱类型语言 （int x=10;String name="张三"；let x=10;let name="张三"）
基于面向对象语言
安全性强：因为JS语言是嵌入到html页面中运行在客户端的语言，所以对安全性要求较
高，JS语言只能获取浏览器内部的数据，浏览器以外客户端电脑上面的数据是禁止访问的。
交互性强：JS语言是嵌入到html页面中运行在客户端的语言，和用户直接接触；而像Java语言是运行在服务器的语言，需要通过网络进行交互，所以相对来说JS语言的交互性更强
JavaScript和Java语言没有任何关系
变量
JavaScript语言属于弱类型语言
java：int age=18；string name=“张三”； name=20；//报错
JS：let age=18；let name=“李四”； name=20；//正常执行
JavaScript语言中通过let或var声明变量
let声明的变量，作用域和Java语言类似
var声明的变量，不管在什么位置都相当于声明的是一个全局变量
Java:
for(int i=0;i<10;i++){
int j = i+1;
}
int x = i+j; //报错 i和j超出了作用域
JavaScript: let
for(let i=0;i<10;i++){
let j=i+1;
}
let x = i+j; //不会报错 但是因为i和j超出了作用域,访问不到i和j
JavaScript: var
for(var i=0;i<10;i++){
var j=i+1;
}
var x = i+j; //不会报错, 并且可以访问到i和j的值数据类型
JavaScript语言中只有引用类型
常见的对象类型：
string字符串：可以通过单引号或双引号进行修饰
number数值：相当于java中所有数值类型的总和
boolean布尔值：true和false
undefined未定义：当变量只声明不赋值时，变量的类型为未定义类型
获取变量类型的方法：typeof 变量
运算符
算术运算符：+ - * / %
除法运算会自动根据结果转换整数或小数
java：int x=5；int y=2；int z=x/y； z=2;
js： let x=5; let y=2; let z=x/y; z=2.5; x=6 z=3
关系运算符：> < >= <= != ==和===
==:先统一等号两边变量的类型，再比较值 "666"==666 true
===:先比较类型，类型相同后再比较值 "666"===666 false
逻辑运算符：&& || ！ 只支持短路与和短路或
赋值运算符：= += -= *= /= %=
三目运算符：条件?值1:值2
各种语句
if else
for 新循环 for(Person p:persons) JS:for(let p of persons)
while
switch case
如何在html页面中添加js代码
三种引入方式
内联：在标签的事件属性中添加JS代码，当事件触发时执行
事件：指系统提供的一系列时间点
点击事件：当用户点击元素的时间点
内部：在页面的任意位置可以添加script标签，在标签体内写js代码，建议写在body结束标签的附近
外部：在单独的js文件中写js代码，在html页面中通过script标签的src属性引入，如果script标签引入了js文件则不能在标签体内继续写js代码
方法
Java：public 返回值 方法名(参数列表){方法体}
JS：function方法名(参数列表){方法体}
三种定义方法的方式：
function方法名(参数列表){方法体}
let 方法名 = function(参数列表){方法体}
let 方法名 = new Function("参数1","参数2","方法体");
和页面相关的方法
通过选择器获取页面中的元素对象
let 元素对象=document.querySelector("选择器");
获取和修改控件的值 <input type='text' value='abc'>
input.value 获取
input.value="xxx" 修改
获取和修改元素的文本内容 <div>abc</div> <span>abc</span>
NaN
Not a Number：不是一个数，任何数值和NaN进行任何运算得到的结果都是NaN
isNaN(变量)，判断变量是否是NaN，true代表时NaN(不是数),false代表不是NaN(是数)
JavaScript对象分类
内置对象：包括string，number，boolean等
BOM：浏览器对象模型，包含和浏览器相关的内容
DOM：文档对象模型，包含和页面相关的内容
BOM
BrowserObject Model：浏览器对象模型，包含和浏览器相关的内容
window对象,此对象中的属性和方法可以称为全局属性和全局方法,访问时可以省略掉window
window.isNaN() window.alert() window.parseInt()
window对象中常见的方法：
isNaN(变量) 判断变量是否是NaN
parseInt() 将字符串或小数转成整数
parseFloat() 将字符串转成小数
alert("xxx") 弹出提示框
confirm("xxx") 弹出确认框
prompt("xxx") 弹出文本框
let timer = setInterval(方法,时间间隔); 开启定时器
clearInterval(timer); 停止定时器
setTimeout(方法,时间间隔)； 开启只执行一次的定时器
window对象中常见的属性
location(位置)
location.href 获取或修改浏览器的请求地址
location.reload() 刷新页面
history(历史)
history.length 历史页面的数量
history.back() 返回上一页面 后退
history.forward() 前往下一页面 前进
history.go(n) n正值代表前进 n负值代表后退 0代表刷新
DOM
Document Object Model 文档对象模型，包含和页面相关的内容
通过选择器获取页面中的元素对象
let 元素对象 = document.querySelector("选择器")；
获取和修改控件的值: <input type='text' value='abc'>
input.value 获取
input.value="xxx" 修改
获取和修改元素的文本内容: <div>abc</div> <span>abc</span>
元素对象.innerText="xxx"; 修改
元素对象.innerText 获取
创建元素对象
let d=document.createElement("div");
添加元素到某个元素里面
元素对象.append(新元素);
前端MVC设计模式
MVC设计模式就是将实现前端业务的所有代码划分为三部分
M：model 模型，对应数据相关代码
V：View 视图，对应的是页面标签相关
C：Controller 控制器，对应的是将数据显示到页面中的过程代码
前端MVC设计模式存在弊端：在Controller控制器部分 需要频繁的进行DOM相关操作(遍历查找元素)，比较浪费资源，MVVM设计模式可以解决此问题
前端MVVM设计模式
MVVM设计模式也是将实现前端业务的所有代码划分为三部分
M：model 模型，对应数据相关代码
V：View 视图，对应的是页面标签相关
VM：视图模型，视图模型负责将页面可能发生改变的元素和某个变量在内存中进行绑定，并对变量进行监听，当变量发生改变时，会从内存中找到和变量所对应的元素，让元素进行改动，这样就不用像MVC设计模式中通过遍历查找的方式查找元素了，从而提高执行的效率。
VUE
此框架是基于MVVM设计模式的框架，目前最流行的前端框架之一
VUE框架两种用法：
多页面应用：在html页面中引入vue.js框架文件
单页面应用：通过脚手架的方式使用VUE框架
如何在html页面中引入vie.js
从CDN服务器引入
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
把框架文件下载到本地后引入
<script src="js/vue.min.js"></script>
VUE框架执行元素：VUE对象就相当于是MVVM设计模式中的VM视图模型，此对象负责将页面中发生改变的元素和data里面的变量在内存中绑定，并且会不断监听变量值的改变，当检测到变量值发生改变时，会自动从内存中找到与之对应的元素，并且让元素的内容跟着发生改变。
VUE相关指令
{{变量}}:插值，让当前位置的文本内容和变量进行绑定
v-text="变量" 让元素的文本内容和变量进行绑定 功能和插值相似
v-html="变量" 让元素的标签内容和变量进行绑定
:属性名="变量" 让元素的某个属性的值和变量进行绑定
v-model="变量" 双向绑定，让控件的值和变量进行双向绑定，当需要获取控件的值得时候使用
@事件名="方法" 给元素添加事件，需要将事件触发的方法声明在methods里面
v-for"(变量,下标)in 数组" 循环遍历指令，遍历的同时会生成元素
v-if="变量" 让元素是否显示和变量进行绑定，true显示 false不显示(删除元素)
v-else 让元素的显示状态和v-if取反
v-show="变量" 让元素是否显示和变量进行绑定，true显示 false不显示(隐藏元素)
5721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
