一，html
1.1 html的概念
html：超文本标记语言，hypertext markup language
特点：
可以文本中嵌入超链接、视频、音频、图片等
标记语言：html中的内容都是以标记（标签）的形式出现
单标记：只有开始标记
例如：
<input/> <br /> <hr />双标记：由开始标记与结束标记组成
例如：
<a></a> <button></button> <p></p> <font></font>html文件的后缀是
.html或者.htm由浏览器
解释运行，不同浏览器的内核显示同一个html页面的能力是不同的html中的标签都是预定义的
1.2 html页面的组成
head：头部标签，专门用于配置当前页面
body：主体标签，专门用于承载页面上的标签
1.3 常见的标签
html中的注释：
<!-- 注释内容 -->
1.3.1 标题标签
标签名：h
分类：h1、h2、...、h6
特点：
标题标签是一个块级标签，块级标签的特点是独占一行，上下自动换行；行内标签的特点是可以和其他行内标签处于同一行
标题标签自动加粗
快捷键：
h1{第$个一级标题}*10，在最后按下tab键能自动生成10个有内容"第n个一级标题"的h1标签
1.3.2 字体标签
标签名：font
标签属性的格式：属性必须写在开始标签中
<font 属性名="属性值" 属性名="属性值" ... ></font>属性：
size：字体大小，取值范围1~7，默认大小是3
color：字体颜色
取值：
颜色单词
#ffggbb
使用css的写法，使用style样式属性
style="color:rgba()"css的样式写法：
<标签名 style="属性名:属性值;属性名:属性值;..."/>
1.3.3 图片标签
标签名：img
属性：
src：设置图片路径
本地图片：放上图片相对于当前页面的路径
网络图片：放上网络图片的地址
width/height：宽高，单位：px像素，单独设置宽或者高，图片会自动等比缩放
title：鼠标悬浮在图片上的提示性文本
alt：图片无法加载时显示的提示性文本
1.3.4 超链接标签
标签名：a
属性：
href：用于明确跳转到的目标位置
target：设置跳转页面的打开方式，取值：
_self（默认）、_blank
页面内的跳转：
实现步骤：
在目标位置的标签中添加id属性并赋值
在起始位置添加a标签，并在a标签的href属性值上写
#目标位置的id值补充：返回顶部，在任何一个a标签中写上
href="#"
1.3.5 列表标签
标签名：ol（有序）、ul（无序）
列表项：li
属性：
type：表示列表项前内容的样式，ul（square、circle、disc默认），ol（1、a、A、i、I）
start：只有有序列表有，表示数字从几开始
列表嵌套：将列表作为另一个列表的列表项中的内容
1.3.6 表格标签
标签名：table
表格行：tr
单元格：td
属性：
border：边框厚度
cellspacing：单元格的间距
cellpadding：单元格的内边距，设置内边距可能是使整个表格的宽高发生变化
width/height：宽高
align：水平居中，取值：left、right、center
valign：垂直居中，取值：top、bottom、center
不规则表格：
跨列：colspan
跨行：rowspan
1.3.7 表单标签
标签名：form
输入域标签：input
form的属性：
action：用于设置当前的表单提交到哪里（该表单提交到服务器中，由哪个Java类来处理）
method：用于设置当前表单中的数据以何种方式提交到服务器
get：默认提交方式，提交的数据会拼接在请求的地址之后
post：提交的数据不会拼接在请求的地址之后，提交的数据会封装请求头中
input的属性：
type：输入类型
取值：
text：默认的类型，普通的文本输入框
password：密码框
radio：单选框
checkbox：复选框
button：普通按钮
reset：重置按钮
submit：提交按钮
name属性和value属性：
在button、reset、submit中，用于设置按钮上的文本
在text和password中，value就是输入框里的内容，当点击提交按钮时，输入框中name的属性值与value的属性值会形成键值对提交到服务器，例如：
<input type="text" name="user" value="666"/><br /> <input type="password" name="pwd" value="999999"/><br /> <!-- 提交的内容会以user=666&pwd=999999的形式提交到服务器 -->在raido和checkbox中，当点击提交按钮时，单元框中的name的属性值与value的属性值会形成键值对提交到服务器
<input type="radio" name="gender" value="1"/>男 <input type="radio" name="gender" value="2"/>女补充：name属性在radio中，能让多个radio归结到同一个组中，产生互斥性
1.3.8 补充
点击radio、checkbox后的文本就相当于点击的该标签
<input type="radio" id="male"/>男 <input type="radio" id="female"/><label for="female">女</label>radio和checkbox的默认勾选状态
<input type="checkbox" checked=""/> <input type="checkbox" checked="checked"/> <input type="checkbox" checked/>button标签，在表单外时，没有默认的功能；在表单中，它就是一个提交按钮
二，css
2.1 css的概念
级联（层级）样式表，cascading style sheet，它用于对页面进行样式的设置
对于不同的标签来说，某些标签有样式属性，某些标签没有样式属性；不同的标签设置同一种样式使用的方式可能也各不相同，非常的麻烦，繁琐；因此css的出现就是为了统一所有标签的所有样式属性的设置方式。
2.2 css的写法
2.2.1 内联样式
将样式属性写在标签的开始标签中
格式：
style="样式1:值1;样式2:值2;..."
2.2.2 内部样式表
将样式写在head标签中，使用选择器来明确哪些标签使用了该样式
写法：
1.在head标签中，定义style标签 <style type="text/css"> </style> 2.在style标签中定义样式 <style type="text/css"> p{ color: white; background: black; } </style>
2.2.3 外部样式表
将样式写在css文件中，在需要使用这些样式的页面中引入该css文件
写法：
1.新建css文件，在文件中写标签样式，写法与内部样式表相同 2.在html的head标签中，使用link标签的href属性引入该css文件 <link rel="stylesheet" href="css/test.css" />
优先级的问题：
相同选择器，写在后面的优先级更高
不同选择器，范围越小优先级越高
2.3 选择器
用于定位到指定标签的一种模式
2.3.1 元素（标签）选择器
用于定位到指定元素（标签）
写法：
元素名{ 样式1:值1; 样式2:值2; ... }
2.3.2 类选择器
用于定位到指定class值的标签
写法：
1.为元素添加class属性并赋值 2.设置样式 .class值{ 样式1:值1; 样式2:值2; ... }
2.3.3 通配符选择器
用于定位到页面中的所有元素
写法：
*{ 样式1:值1; 样式2:值2; ... }
2.3.4 id选择器
用于定位到页面中指定id的元素
写法：
1.为标签添加id属性并赋值 2.设置样式 #id值{ 样式1:值1; 样式2:值2; ... }
2.3.5 分组选择器
用于定位到页面中各个不同选择器的标签上
写法：
选择器1,选择器2,...{ 样式1:值1; 样式2:值2; ... }
2.3.6 属性选择器
用于定位到页面中设置了指定属性或者设置了指定属性以及属性值的标签
写法1：
选择器[属性名]{ 样式1:值1; 样式2:值2; ... }写法2：
选择器[属性名="值"]{ 样式1:值1; 样式2:值2; ... }写法3：
选择器[属性名="值"][属性名="值"][属性名][属性名="值"]...{ 样式1:值1; 样式2:值2; ... }
2.3.7 子代选择器、后代选择器
子代选择器：
选择器1>选择器2{ 样式1:值1; 样式2:值2; ... }后代选择器：
选择器1 选择器2{ 样式1:值1; 样式2:值2; ... }
2.3.8 相邻兄弟选择器
格式：
选择器1+选择器2{ 样式1:值1; 样式2:值2; ... }
2.3.9 伪类选择器
格式：
选择器:模式{ 样式1:值1; 样式2:值2; ... }模式的取值：
link：超链接的默认状态
visited：超链接被访问过的状态
hover：鼠标悬浮在标签上的状态
active：鼠标在标签上按住的状态
2.4 盒子模型（box model）
研究的是边框以及内外边距
2.4.1 内边距
padding
用法：
padding:npx，设置上下左右四个方向的内边距都是npx padding-left:npx，设置左内边距npx padding-right:npx，设置右内边距npx padding-top:npx，设置上内边距npx padding-bottom:npx，设置下内边距npx padding:apx bpx，设置上下内边距apx，左右内边距bpx padding:apx bpx cpx dpx，设置上右下左内边距分别为apx、bpx、cpx、dpx注：设置内边距会改变标签的大小
2.4.2 外边距
margin
用法：
margin:npx，设置上下左右四个方向的外边距都是npx margin-left:npx，设置左外边距npx margin-right:npx，设置右外边距npx margin-top:npx，设置上外边距npx margin-bottom:npx，设置下外边距npx margin:apx bpx，设置上下外边距apx，左右外边距bpx margin:apx bpx cpx dpx，设置上右下左外边距分别为apx、bpx、cpx、dpx注：
左右外边距相加
上下外边距取较大者
2.4.3 边框
border
用法：
border:粗细 颜色 类型注：
粗细、颜色、类型的顺序是任意的
类型的取值：solid实线、dotted点划线、double双划线、dashed虚线
圆角边框：border-radius:npx，原理是使用一个指定半径的圆形去内切标签的四个角
2.5 定位
position，取值：
static：默认位置
relative：相对位置，相对于自身的默认位置进行移动
absolute：绝对位置，相对于整个body进行移动
fixed：固定位置
注：position属性在使用时必须要配合left、right、top、bottom属性
三，js
3.1 概念
javascript
它是基于对象和事件驱动的脚本语言
基于对象：js中提供了很多对象，可以直接调用
事件驱动：js中提供了很多动态效果的实现
js的作用：提高用户体验，提供了交互效果
特点：
安全：不能直接访问计算机的硬盘
跨平台：任何浏览器都有解析js的引擎
交互：提供了交互效果
js是弱类型的语言：变量的类型由值决定
3.2 js的写法
3.2.1 内嵌式
在head标签中，使用script标签，在script中标签编写js代码
<script type="text/javascript"> function f(){ alert("我飘了"); } </script>
3.2.2 外联式
创建js文件，编写js代码，在head标签中使用script标签的src属性引入该js文件
<script type="text/javascript" src="js/test.js"> </script>function f(){ var obj = document.getElementById("btn2"); obj.disabled = "disabled"; }
注：
两种方式可以同时使用，先写的先执行
两种方式不能混合使用
如果方法名相同，那么只执行后写的
3.3 注释
单行注释：// 注释内容
多行注释：/* 注释内容 */
3.4 基础语法
3.4.1 变量
变量的定义：使用关键字
var
先定义后赋值
var age; age = 10;定义的同时赋值
var name = "张三";注：
变量的类型由值决定
在函数中定义变量时，如果省略了var，那么这个变量就是一个全局变量
3.4.2 数据类型
基本（普通）数据类型：
Boolean：布尔类型，只有
true和falseNumber：数值类型，表示所有整数和小数
String：字符串类型，用一对单引号或者双引号括起来，js中没有字符类型
Object：对象
Array：数组
RegExp：正则表达式
Function：函数
特殊的数据类型：
Null：只有一个值null，当定义了一个变量后，这个变量没有任何指向时，它就是null
Undefined：只有一个值undefined，当定义了一个变量后，这个变量没有赋值，它就是undefined
NaN：not a number，不是一个数字
3.4.3 运算符
算术运算符
+、-、*、/、%、++、--
逻辑运算符
&&、||、!
关系运算符
>、<、>=、<=、!= ==：比较两个数据的值是否相同 ===：比较两个数据的值和类型是否都相同
赋值运算符
=、+=、-=、*=、/=、%=
三元运算符
条件表达式?表达式1:表达式2;
typeof运算符
作用：检查变量的数据类型
用法：typeof(参数)
字符串：string
数值：number
布尔：boolean
方法：function
其他：object
3.4.4 流程控制
判断结构：if-else
分支结构：switch-case
循环结构：do-while、while、for
3.5 函数
关键字
function函数定义的格式：
function 函数名(参数列表){ 方法体 }
参数：参数在定义时为形参，在调用时为实参，需要注意的是形参不能写
var注：实参使用
this表示参数是触发事件的标签对象返回值：通过关键字
return来结束方法并返回结果注：单独使用
return的作用是结束方法
函数的重名问题：调用的是最后一个
匿名函数：
格式：
function(){ 方法体 }匿名函数的调用：
方式一：使用一个变量接收该匿名函数，此时这个变量名就是函数名
var f = function(){ 方法体 }方式二：将匿名函数赋值给标签对象的事件属性，表示该标签触发指定事件时执行该函数
// 页面加载事件，页面加载完毕后自动触发，并调用函数 onload = function(){ btn = document.getElementById("b2"); }
3.6 数组
存储数据的容器
特点：
一个数组中可以存储不同数据类型的值
数组的长度可变
数组的创建：
方式一：
var arr = new Array(元素1,元素2,元素3,...);方式二：
var arr = new Array(数组的长度); var arr = new Array(3);表示创建了一个没有任何元素，长度为3的数组方式三：
var arr = [元素1,元素2,元素3,...];
数组的操作：
数组名.length：获取数组长度
数组名[下标]：确定指定下标的元素
注：数组的下标范围
[0,length-1]，如果获取元素时，超过了下标范围，返回的结果是undefined添加元素
push(元素1，元素2，元素3，...)：在数组的末尾添加若干个元素
unshift(元素1，元素2，元素3，...)：在数组的开头添加若干个元素
splice(下标，0，新元素)：向指定下标位置上插入新元素
删除元素
splice(下标，删除的个数)：从指定下标开始，删除指定数量个元素
修改元素
splice(下标，替换的个数，新元素)：从指定下标开始的指定个数的元素用新元素替换
3.7 正则表达式
创建：
1. var reg = new RegExp("正则表达式"); 注：必须写单（双）引号 2. var reg = /正则表达式/; 注：不能写单（双）引号匹配的方法：
正则表达式对象.test(要匹配的字符串)注：
只要字符串中包含了匹配正则表达式的子串就会返回true
标记开头和结尾，开头：
^，结尾：$
3.8 事件
某个元素被执行了某种操作后，触发了某些功能的执行
3.8.1 点击事件
onclick：单击事件
ondblclick：双击事件
3.8.2 鼠标事件
onmouseover：鼠标移到标签上
onmousemove：鼠标在标签上移动
onmouseleave：鼠标从标签上移开
3.8.3 加载事件
onload：页面加载完毕后只执行
3.8.4 键盘事件
onkeydown：键盘按下
onkeyup：键盘松开
3.8.5 焦点事件
onfocus：获取焦点
onblur：失去焦点
3.8.6 表单事件
onsubmit：由提交按钮触发，写在form表单上的
注：该事件返回的布尔值的为true时，表单会将数据提交到指定服务器，结果为
false时，表单不会提交；写法：
onsubmit="return f()"
3.9 DOM
Document Object Model，文档对象模型，通过document对象对标签元素进行操作
使用document方式：
window.document，window可以省略
document的常用功能：
获取元素对象
getElementById()
getElementsByClassName()
getElementsByTagName()
getElementsByName()
创建元素对象
createElement(标签名)
createTextNode(文本)
添加元素对象
a.appendChild(b)：将b添加为a的最后一个子标签
a.insertBefore(b，c)：在a内部的c标签前添加b标签
删除元素对象
a.removeChild(b)：在a中删除b标签
a.remove()：删除a标签及其子标签
3.10 BOM
Browser Object Model：浏览器对象模型
3.10.1 window
window对象表示整个浏览器窗口，可以直接使用它进行方法和属性的调用，window在调用任何方法和属性时，window都可以省略
常用方法：
alert()：带有一段文本和确认按钮的警告框
confirm()：带有一段文本，一个确认按钮、一个取消按钮的对话框
prompt()：带有一段文本，一个确认按钮，一个取消按钮和一个输入框的对话框
setTimeout(函数，时间)：设置一个定时器，在指定时间到达后执行一次，参数是毫秒值，返回一个定时器id
clearTimeout(定时器id)
setInterval(函数，时间)：设置一个定时器，每隔指定时间执行一次，参数是毫秒值，返回一个定时器id
clearInterval(定时器id)
注：setTimeout()和setInterval()中的匿名函数如果封装了出来，在调用时，
不能写
()，例如：setInterval(changeImg,1000)；如果要写
()，必须写成setInterval("changeImg()",1000)；
3.10.2 history
获取方式：
window.history常用方法：
back()：后退一个页面
forward()：前进一个页面
go(参数)：
参数是正整数n，表示前进n个页面
参数是负整数n，表示后退n个页面
3.10.3 location
获取方式：
window.location方法：reload()：重新加载页面
属性：href
3.9 全局函数
在js中可以直接调用的函数
isNaN()
parseFloat()
parseInt()
eval()
encodeURI()
decodeURI()
4804
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
