一、Html
1.引入
前端与后端
1.前端：为用户使用的，和用户进行交互
2.后端：为前端做支撑，数据提供，...
B/S,C/S
1.B/S：浏览器和服务端
2.C/S：软件和服务端
html：超文本标记语言
标签与属性：标签可以有0-多个属性
标签支持嵌套
注释<!-- -->
简单的html文档结构
<html>
<head></head> <!-- 页面声明的信息，引入css，引入js，... -->
<body></body> <!-- 页面中展示的内容 -->
</html>2.标签的分类
1.行级标签：可以和文本，行级标签一行展示，宽和高为内容的宽和高，没有内容没有宽和高 不可以设置宽和高 2.块级标签：独占一行，宽度为父标签的宽度，高度内容的高度，没有内容，没有高度 可以设置宽和高
3.各种标签
标题标签：h1~h6 数字越大字体越小
段落标签：<p></p>
换行：<br/>
水平线：<hr/>
图片标签：
<img src="图片的路径" title="鼠标悬浮时提示的信息" alt="图片加载失败提示的信息"/>
超链接：
<a href="跳转的路径" target="打开的方式"></a>
target：_self(默认)当前页打开
_blank 新的标签页打开
自定义值
列表：
有序列表<ol><li></li></ol>
无序列表<ul><li></li></ul>
4.表格
<table>
<!-- 表头，加粗和居中 -->
<thead>
<tr>
<th></th>
</tr>
</thead>
<!-- 表体 -->
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>属性
table属性：
border：边框 height：表格的高度
width：表格的高度 bgcolor：表格的北京颜色
align：表格的水平对齐方式 cellpadding：内边距（内容和单元格之间的距离）
cellspacing：外边距（单元格边框和表格边框的距离）
tr属性：
height：行的高度 bgcolor：列的背景颜色
align：行中内容的水平对齐方式（左 中 右）
td|th属性：
width：列的宽度 bgcolor：列的背景颜色
align：列中内容的水平对齐方式（左 中 右）
5.表单（form）
1.介绍
标识这一个整体，提交时可以讲表单元素中的值提交到后端。
2.form标签的属性
action：提交的后端路径
method：提交方式
get：地址栏拼接参数，有大小的限制，只能进行url编码，不安全
post：请求体中传递参数，没有大小的限制，可以使用其他方式编码，安全
enctype：参数格式的处理，只有post请求时才有效
1.application/x-www-form-urlencoded：普通的参数（post请求默认）
2.multipart/form-data：普通参数和文件（有文件上传时必须指定）
3.表单元素
1.文本框：<input type="text" name="xxx"/>
2.密码框：<input type="password" name="xxx"/>
3.日期框：<input type="date" name="xxx"/>
4.文件域：<input type="file" name="xxx"/>
5.单选按钮：
<input type="radio" name="sex" value="xxx"/>
<input type="radio" name="sex" value="xxx"/>
注意事项：
1.name属性值相同的为一组单选按钮
2.name属性值相同才能有单选效果
3.提交时将value中的属性值提交到后端
4.出现多组单选按钮
5.checked默认选中
6.复选框：
<input type="checkbox" name="hobby" value="xxx"/>
<input type="checkbox" name="hobby" value="xxx"/>
注意事项：
1.name属性值相同的为一组复选框
2.提交时将value中的属性值提交到后端
3.出现多组单选按钮
4.checked默认选中
7.下拉列表：
<select name="xxx">
<option value="xxx"></option>
</select>
注意事项：
1.提交时将选中的option中value属性值提交到后端
2.selected默认选中
8.文本域:
<textarea name="xxx"></textarea>
9.按钮：
1.提交按钮：具有提交功能
<input type="submit" value="按钮中提示的文字"/>
<button type="submit">按钮中提示的文字</buuton>
2.重置按钮：具有重置功能
<input type="reset" value="按钮中提示的文字"/>
<button type="reset">按钮中提示的文字</buuton>
3.普通按钮：没有功能
<input type="button" value="按钮中提示的文字"/>
<button type="button">按钮中提示的文字</buuton>4.表单元素的属性
placeholder：提示信息 autofocus：自动获得焦点
minlength|maxlength：最小|最大长度 readonly：只读
disabled：禁用
6.内联框架
<iframe src="默认内联的路径" frameborder="边框" width="" height="" name="xxx"></iframe>1.内联其他的资源
2.配合a标签使用，a标签跳转的资源在iframe中打开
<a href="..." target="iframe标签的name属性值"></a>
7.常用布局标签
div：块级元素（标签）
span：行级元素（标签）
二、Css
1.作用
CSS：层叠样式表
HTML：绘制页面
CSS：页面的样式设置
2.CSS引入方式
1.行内式：在标签中添加style属性，通过style属性值设置样式
<span style="xxx"></span>2.内部式：head标签中的style标签中设置样式
<head>
<style>
选择器{
xxx
}
</style>
</head>3.外部式：样式编写在单独的.css文件中，需要使用该样式的页面引入外部的.css文件
<head>
<link rel="stylesheet" href=".css文件路径">
</head>
4.优先级：
行内式 > 内部式|外部式
3.选择器
获取标签
1.id选择器：#id属性值
2.class选择器：.class属性值
3.标签选择器：标签名
4.id选择器 > class选择器 > 标签选择器
5.并集选择器：选择器,选择器,...
6.后代选择器：选择器 选择器
7.子选择器：选择器>选择器
8.兄弟选择器：
选择器+选择器：后边第一个兄弟
选择器~选择器：后边所有的兄弟
4.浮动
1.行级元素浮动
可以去除空格
2.块级元素浮动
可以在一行展示-------浮动后让出空间
5.盒子模型
组成
1.内容实际的宽和高
2.内边距（内容和边框的距离）
3.边框
4.外边距（边框到其他标签的距离）
使用
1.内容实际的宽和高
宽：width
高：height
2.内边距（内容和边框的距离）padding
上内边距，右内边距，下内边距，左内边距
方向：top right bottom left
1.padding-方向: 值px;
2.padding: 值px 值px 值px 值px; 上右下左
3.padding: 值px 值px; 上下 左右
4.padding: 值px; 上右下左
3.边框 border
1.边框宽度 border-width
border-方向-width: 值px;
border-width: 值px 值px 值px 值px; 上右下左
border-width: 值px 值px; 上下 左右
border-width: 值px; 上下左右
2.边框样式 border-style
样式：solid 实线 dashed 虚线 dotted 点线 double 双实线 none：没有
border-方向-style: 样式;
3.边框颜色 border-color
颜色：英文名 RGB(0~255,0~255,0~255)红绿蓝 十六进制
border-方向-color: 颜色;
4.边框的简化
border: 宽度 样式 颜色;
5.圆角 border-radius
border-top-left-radius: 值px; 上左
border-top-right-radius: 值px; 上右
border-bottom-right-radius: 值px; 下右
border-bottom-left-radius: 值px; 下左
border-radius: 值px 值px 值px 值px; 上左下右
border-radius: 值px 值px; 上右下左
border-radius: 值px; 上左下右上右下左
4.外边距（边框到其他标签的距离）margin
上外边距，右外边距，下外边距，左外边距
方向：top right bottom left
margin-方向: 值px;
特殊用法：margin: 0 auto; 元素水平居中
6.display属性：
1.none：将隐藏元素
2.inline：将元素变为内联元素，特殊的行级元素，行级元素不可以设置高和宽该元素为内联元素
3.block：将元素变为块级元素，变为块级元素后具备了块级元素的特点
4.inline-block：将元素变为内联块元素，内联块元素可以设置高和宽，可以和其它行级元素或内容一行展示
7.字相关属性：
1.color：字体颜色
2.font-size：字体大小
3.font-weight：字体加粗
4.font-style：字体（宋体，楷体，微软雅黑，...）
5.line-height：行高（内容的垂直方向的展示位置），特殊用法：行高和父元素高度相同实现内容垂直居中
8.伪类：
元素获取的伪类，改变元素的样式，失去伪类，恢复为原有样式
1.鼠标悬浮伪类：选择器:hover{}
2.获得焦点伪类：选择器:focus{}
9.定位：position
left right bottom top z-index(优先级)
1.静态定位（默认）：没有定位 position: static;
2.绝对定位：以祖先元素进行定位，祖先元素没有定位，以body进行定位 position:absolute;
3.相对定位：以该元素本身进行定位 position:relative;
4.固定定位：不会随滚动条滚动而发生位置的改变 position:fixed;
注意：
1.绝对定位：让出定位之前所占的空间
2.相对定位：不会让出定位之前所占的空间
10.背景属性
background-color：颜色; 背景颜色
background-image：url("图片路径"); 背景图片
background-repeat：是否平铺
repeat 背景图像将向垂直和水平方向重复。默认值。
repeat-x 只有水平位置会重复背景图像。
repeat-y 只有垂直位置会重复背景图像。
no-repeat 背景图像不会重复。
background-size：值px 值px;
background-attachment：否固定或者随页面滚动
scroll 背景图片随着页面的滚动而滚动，这是默认的。
fixed 背景图片不会随着页面的滚动而滚动。
三、Js
1.介绍
.JS：客户端脚本语言，可以使页面和用户产生交互的行为。
动态页面：
1.HTML + JS： 动态效果
2.HTML + JSP：动态数据
组成
ECMAScript（ES）：提供了js的核心语法
BOM：浏览器对象模型
DOM：文档对象模型
输出
1.输出到浏览器控制台：console.log(xxx);
2.输出到页面中：document.write(xxx);
3.弹框输出：alert(xxx);
引入方式
1.内部式：将js脚本写在script标签中
<script>
xxx
</script>2.外部式：将js脚本写在单独的.js文件中，需要使用js脚本的页面引入外部.js文件。
<script src="外部.js文件的路径"></script>标识符
java中标识符：包名，类名，方法名，变量名，...
js中标识符：类名，方法名，变量名，...
语法规则：数字，字母，_，$ 组成，其中数字不能开头，不能为关键字和保留字。
语法要求：
类名： 大驼峰命名法
方法名：小驼峰命名法
变量名：小驼峰命名法
数据类型
1.数值类型（整数和浮点数）：number
2.字符串类型：string
3.布尔类型：boolean
4.null 空值
5."" 空串
6.特殊类型：
not a number
undefined
7.对象类型
8.var可存储所有数据类型
js中的运算符
1.算数运算符：+ - * / % ++ --
2.赋值运算符：= += -= *= /+ %=
3.比较运算符：> >= < <= == === != !==
==： 两侧数据类型不一致，转换为数字类型进行比较
===：数据类型不一致直接返回false，两侧数据类型相等才进行比较
4.逻辑运算符：|| && !
5.三元运算符：条件 ? 值1 : 值2;
6.类型运算符：
1.typeof：判断存储值的实际类型
2.instanceof：是否为对象
2.流程控制
1.顺序执行结构：按照顺序依次执行
2.分支结构：
1.if系列：if if else if else if else
2.switch
3.循环结构
1.for循环
2.while循环
3.do while循环
4.循环控制语句：
break：终止循环
continue：终止本次循环，进入下次循环
for使用continue，终止本次循环，执行迭代因子
while do while使用continue，终止本次循环，执行boolean表达式（容易造成死循环）
3.函数
1.自定义函数
1.无参数，无返回值
function 函数名(){}
var 函数名 = function(){}2.有参数，无返回值
function 函数名(参数, ...){}
var 函数名 = function(参数, ...){}3.无参数，有返回值
function 函数名(){
return 值;
}
var 函数名 = function (){
return 值;
}4.有参数，有返回值
function 函数名(参数, ...){
return 值;
}
var 函数名 = function (参数, ...){
return 值;
}2.内置函数（JS对象中提供的函数）
1.Array 对象中的函数
2.Date 对象中的函数
3.Global 全局对象中的函数（直接使用）
eval()： 将字符串中的内容变为可执行的js脚本
isNaN()：是否不是一个数字
parseFloat()：转换为浮点类型
parseInt()：转换为整数类型
Number()：转换为数字类型
4.Math 对象中的函数
5.Number 对象中的函数
6.String 对象中的函数
4.数组
1.创建
var arr = [元素,元素,...];
var arr = new Array(数组长度);
2.操作数组
1.添加|修改元素：数组名[索引] = 值;
2.获取元素：var 变量名 = 数组名[索引];
3.数组的遍历
1.普通for循环
for(var i = 0; i < 数组名.length; i++){
数组名[i] -> 数组中每一个元素
}2.增强for循环
for(var i in 数组名){
数组名[i] -> 数组中每一个元素
}5.事件（事件驱动）
1.介绍
元素绑定事件，监听到元素触发了事件，驱动函数执行。
2.常用事件
onclick：单击事件
onmouseover：鼠标移入事件
onmousemove：鼠标移动事件
onmouseout：鼠标移出事件
onsubmit：form表单提交事件
onfocus：获得焦点事件
onblur：失去焦点事件
onchange：改变事件（通常用在下拉列表中）
onload：页面加载完成的事件
3.事件使用
1.方式一：
<button onclick="函数名()">xxx</button>2.方式二：
<button id="btn">xxx</button>
<script>
document.getElementById("btn").onclick = function () {}
</script>6.BOM和DOM
1.BOM（浏览器对象模型，window使用时可以省略）
使用js操作浏览器
1.属性：
history：
history.back()：回到上一个历史
history.forward()：回到下一个历史
history.go(数字)：回退指定个数的历史，负数
前进指定个数的历史，正数
location：
location.reload()：刷新页面
location.href：获取地址栏的url
location.href = "url"：访问指定的url，当前标签页中打开
2.函数：
1.弹框
1.警告框（只有确认按钮）：alter(xxx)
2.提示框（确认按钮和取消按钮）：confirm(xxx)
var b = confirm(xxx);3.对话框（输入内容，确认按钮，取消按钮）prompt(xxx)
var b = prompt(xxx);2.访问指定的资源
open(url)， 打开指定的url，新的标签页中打开
3.setInterval()：周期性执行，循环执行
4.setTimeout()：延时执行，只执行1次
2.DOM（文档对象模型，document对象）
1.获取元素节点：
1.根据id属性值获取，返回唯一元素节点对象
document.getElementById("id属性值");2.根据class属性值获取，返回元素节点对象的数组
document.getElementsByClassName("class属性值");3.根据标签名获取，返回元素节点对象的数组
document.getElementsByTagName("标签名");4.根据name属性值获取，返回元素节点对象的数组
document.getElementsByName("name属性值");2.操作文本节点：
1.操作纯文本
获取元素节点中的文本内容
var val = 元素节点对象.innerText;
将新的内容添加到元素节点中，覆盖元素节点中之前的内容
元素节点对象.innerText = "内容";
2.操作文本或html
获取元素节点中的html和文本内容
var val = 元素节点对象.innerText;
将新的内容添加到元素节点中，覆盖元素节点中之前的内容
元素节点对象.innerText = "html + 内容";
3.操作属性节点：
1.获取元素节点的属性节点值
var val = 元素节点对象.属性名;
var val = 元素节点对象.getAttribute("属性名");
2.修改元素节点的属性节点值
元素节点对象.属性名 = "值";
元素节点对象.setAttribute("属性名", "值");
4.操作css样式：
1.方式一：修改style属性值
var val = 元素节点对象.style.样式名; 获取样式值
元素节点对象.style.样式名 = "值"; 修改样式值
2.方式二：修改class属性值
var val = 元素节点对象.className; 获取class属性值
元素节点对象.className = "值" 修改class属性值
5086
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
