HTML+CSS+JavaScript
专业术语
Internet网络：互联网实现了全球信息资源共享，形成了一个能够共同参与、相互交流的互动平台
WWW：中译：“万维网” 他是Internet提供的一种服务
URL：中译：“统一资源定位符” 在万维网上所有文件（HTML、CSS、图像、音乐…）都有唯一的URL
DNS：中译：“域名解析系统” www.baidu.com --> 61.135.169.121
HTTP：中译：“超文本传输协议” 他详细规定了浏览器和万维网服务器之间的互相通信的规则 ·HTTPS 更具有安全性
Web：网页
W3C：中译：“万维网联盟” 标准化组织
HTML：中译：“超文本标记语言”
CSS：样式表 设置网页内容样式
JavaScript：Web页面中的脚本语言 将静态页面转变成支持用户交互响应相应事件的动态页面
网页基础
创建后缀为.html的文件
<!DOCTYPE html> #向浏览器说明文档使用HTML标准规范
<html> #代码写入html标签内
<head></head> #添加CSS样式
<body></body> #添加页面显示内容
</html>
<style type="text/css"></style> #CSS样式
<script></script>
·将script放在head内为头脚本，放在body内为体脚本
·type="text/javascript"
·src=”路径” 外链式引入js文件
双标记：<标记名></标记名>
单标记：<标记名/>
/* */ #注释
<!-- --> #注释
标签Head
<title></title> 网页标题
<meta /> 定义网页元信息
·name/content 为搜索引擎提供内容名称/提供对应搜索内容的值
·name=”keywords” 定义网页关键字 content：填写关键字内容
·name=”description” 定义网页描述 content：填写描述内容
·name=”author” 定义网页作者 content：填写作者信息
·http-equiv 为浏览器提供参数类型 content：参数值
·charset 设置字符集 utf-8 gbk gb2312
<link></link> 引用外部文件
·href=”URL” 指定文档地址
·type=”text/css//text/javascript” 引用文本类型
·rel=”stylesheet” 表示被链接的文档式一个样式表文件
<style></style> 内嵌样式
·type=”text/css”
标签Body
<h1><h1/> 1-6级标题
·align=”center/left/right” 设置对齐方式
<p></p> 段落标记
<hr /> 水平线
<font></font> 设置文字样式
·face=SimHei,”微软雅黑”,”黑体”,”宋体” 设置字体
·英文字体必须位于中文字体前
·size=”1--7” 设置字体大小
·color=”颜色” 设置字体颜色
<b></b>/<strong></strong> 文字加粗
<i></i>/<em></em> 文字斜体
<s></s>/<del></del> 文字加删除线
<u></u>/<ins></ins> 文字加下划线
<img></img>
·src=”URL” 图像位置
·slt=”文本” 图像无法显示时显示文本
·title=”文本” 鼠标悬停时显示的内容
·width=”像素” 图像宽度
·height=”像素” 图像高度
·border=”数字” 设置边框宽度
单位：
em 相对于当前对象内文本的字体尺寸
px 像素
特殊字符标记
空格 < < > >
& & ￥ ¥ ®（注册商标） ®
©（版权） © ÷ ÷ ³ ³
² ² ± ± ° °
× ×
块元素
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
行元素
<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>
无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
·type=”disc（●）/circle（⚪）/square（■）”
有序列表
<ol>
<li></li>
<li></li>
<li></li>
·value=”数字” 设置该li标签显示的数字
</ol>
·type=”1（数字）、a或A（小写字母或大写字母）”
·start=”数字” 设置起始值
定义列表
<dl>
<dt></dt> 指定术语名词
<dd></dd> 对名词进行解释
<dd></dd>
</dl>
<a></a> 超链接标记
·href=”URL地址” 跳转网页 当还没有确定链接目标时，可以填为#
·target=”_self（默认 在当前窗口打开）/_blank（在新窗口中打开）”
表单
·网页上用于输入信息的区域，收集用户信息、将信息传递给后台服务器
<form> 表单域
·action=”URL地址” 将数据传输给另一个页面
·method=”get（默认 保密性差 数据量有限制）/post（保密性好 无数据量限制）”
·name=”指定表单的名称”
<input/> 输入控件
·type=”text（单行文本输入框）、password（密码输入框）、radio（单选按钮）、checkbox（复选框）、button（普通按钮）、submit（提交按钮）、reset（重置按钮）、image（图片样式的提交按钮（需要src指定图像位置））、hidden（隐藏域）、file（文件域）”
·name=”值” 控件名称
·value=”值” 输入框中的默认文本值
·size=”像素” 控件显示的宽度
·readonly=”readonly” 控件只读
·disabled=”disabled” 第一次加载页面时禁用该控件
·checked=”checked” 定义选择控件默认被选中的项
·maxlength=”值” 控件允许输入的最多字符数
<textarea>初始化内容</textarea> 多行文本框
·cols=”数” 每行字符数
·rows=”数” 显示的行数
<select> 下拉列表
·size=”显示的选项数”
·multiple=”multiple” 按住Ctrl键可以对选项进行多选
<option></option> 选项
·select=”select” 设置为默认选中项
<optgroup></optgroup> 对选项进行分组
·label=”值” 设置组名
<option></option>
</select>
<label>内容</label> 绑定表单控件
·for=”控件id”
·当点击内容时，控件也会有相应操作
</form>
</br> 换行
<pre>内容</pre> 内容什么格式写、页面同样格式输出
样式
选择器
1、标记选择器
标记名{}
2、类选择器(class)
.类名{}
·一个标记可以定义多个类名，用空格进行分割
3、id选择器(id)
#id名{}
·一个标记只可以定义一个id名
4、通配符选择器
*{} #全部标记
5、标签指定式选择器
标签#id(/.class){}
·两个选择器之间不可以有空格
6、后代选择器
外层标记 内层标记{}
7、并集选择器
选择器,选择器,选择器{}
选择器{属性1:值;属性2:值}
·大小写、属性设置间“;”分隔
选择器优先级
·!important：设置为最大优先级
·标签内设置
·id设置
·class设置
.class{color:red!important;}
引用样式表
·<标签 style=”属性1:值;属性2:值” /> 行内式
·<style> 选择器{属性1:值;属性2:值} </style> 内嵌式
·<link href=”路径”></link> 链入式
font 文本设置
·SimHei,”微软雅黑”,”黑体”,”宋体” （family）设置字体
·英文字体必须位于中文字体前
·像素（size） 字体大小
·bold（weight）字体加粗
color 设置文本颜色
1、red、green、blue...
2、十六进制：#FF0
3、rgb(255,0,0)
4、rgba(225,0,0,0.1) 0.1表示透明度
letter-spacing 字符间距
·默认为normal
word-spacing 英文单词间距
line-height 行间距
text-transform 英文字符大小写控制
·none 不转换
·capitalize 首字母大写
·uppercase 全部字符转大写
·lowercase 全部字符转小写
text-decoration 文本装饰
·none 不装饰
·underline 下划线
·overline 上画线
·line-through 删除线
text-align 文本内容对齐方式
·left 左对齐
·center 居中对齐
·right 右对齐
·适用于块级元素，对行内元素无效
text-indent 首行缩进
·建议使用em
·适用于块级元素，对行内元素无效
white-space 空白符处理
·normal 文本中空白空行无效、到达边界时自动换行
·pre 按书写格式原样输出
·nowrap 空格换行无效、遇边界不换行、除非遇到<br />
width 盒子宽度
height 盒子高度
background 盒子背景设置
·颜色/transparent透明（color）
·url(路径)（image）
·像素 像素（size） 背景图片大小
·像素 像素（position） 背景图片显示位置定位
left/center/right top/center/bottom
·no-repeat背景图像不平铺（repeat）
·fixed固定位置、scroll默认为跟随滚动（attachment）背景图片是否跟随页面滚动
margin 盒子与其他盒子的距离
·像素（可以四个方位同时定义：上右下左）
·auto 盒子居中
border 边框
·像素（width）
·solid实线、none没有、dashed虚线、double双实线、dotted点线（style）
·颜色（color）
padding 盒子的内边距
·像素
display 元素框类型
·inline 设置元素为行内元素（行内元素默认）
·设置width,height属性无效
·竖直方向无法产生边距效果（padding-top, padding-bottom, margin-top, margin-bottom）
·block 设置元素为块元素（块元素默认）
·inline-block 设置元素为行内元素、该元素不会独占一行
·none 此元素被隐藏
list
·none（style） 将列表符号消除
float 脱离标准文档流
·left左浮动、right右浮动、none默认不浮动
clear
·left不允许左侧有浮动元素、right不允许右侧有浮动元素、both同时清除左右两边的浮动
overflow 滚动条
·当子元素在父元素上浮动时，子元素浮动起来，但父元素的块没有被撑开（一条线）
hidden 使父元素可以自适应子元素高度，使父元素被撑开 写在父元素样式上
·visible 默认 内容不会被修剪，会呈现在元素框外
·hidden 溢出部分会被剪切掉，使其不可见
·auto 需要时会出现滚动条，通过滚动条查看溢出部分
·scoll 滚动条始终存在，通过滚动条查看溢出部分
position 定位
·static 默认 自动定位
·relative 相对定位
·absolute 绝对定位
·fixed 固定定位
top:像素 right:像素 bottom:像素 left:像素 配合position使用
z-index 层叠等级
·0~n 值越大层叠元素越居上
伪类
标签:link{CSS样式规则} 没有访问时，标签状态
标签:visited{CSS样式规则} 访问后标签状态
标签:hover{CSS样式规则} 鼠标经过、悬停时标签状态
标签:active{CSS样式规则} 鼠标单击不动时标签状态
cursor 光标形状
·url 使用自定义光标
·default 默认光标（箭头）
·auto 默认，浏览器设置的光标
·crosshair 十字线
·pointer 链接的指针（手）
·move 对象可被移动
·help 帮助（问号）
·progress 加载中（箭头沙漏）
·text 文本
·wait 等待（沙漏）
脚本
变量
var 变量名= 值; 声明变量
作用域：
<script type="text/javascript">
var a; #作用于整个脚本代码
function print(){
var b; #作用于函数体
}
</script>
函数
window.prompt(提示内容); 输入值
window.alert(内容); 弹出警示框
console.log(内容); 控制台输出
function 函数名(参数){
执行命令;
}
·使用时 调用该方法
<script>
函数名(参数);
</script>
数组
var 数组名 = new Array(n); 创建一个长度为n的数组
var 数组名 = new Array(值,值) 直接赋值
var 数组名 = new Array(数组,数组) 二维数组
数组方法
数组.length 获取数组长度
数组.toString() 返回一个字符串，数组元素用逗号分割
DOM节点树
1、以html元素为根节点
2、除了根节点，每个节点都有一个父节点
3、每个节点有许多子节点
4、相同父节点的节点叫兄弟节点
// 提供触发方式
<body onload="方法名()"></body>
访问指定节点
getElementById(“id”) 通过id访问元素
getElementsByName(“name”) 通过name访问元素
getElementsByTagName(“标签名”) 通过标签名访问元素
getElementsByClassName(“class”) 通过class访问元素
节点对象
parentNode 元素节点的父节点
childNodes 元素节点的子节点数组
firstChild 第一个子节点
lastChild 最后一个子节点
previousSibling 前一个兄弟节点
nextSibling 后一个兄弟节点
元素对象
createElement(标签) 创建元素节点
createTextNode(文本) 创建文本节点
appendChild(节点) 为当前节点增加一个子节点（作为最后一个节点）
insertBefore(节点,节点) 为当前节点增加一个子节点（插入到指定子节点前）
removeChild(节点) 删除当前节点的某一个节点
元素属性与内容操作
innerHTML 获取或设置元素的HTML内容
className 获取或设置元素的class属性
style 获取或设置元素的style样式属性
offsetWidth、offsetHeight 获取或设置元素的宽和高（不含滚动条）
scrollWidth、scrollHeight 获取或设置元素的完整的宽和高（含滚动条）
offsetTop、offsetLeft 获取或设置包含滚动条，距离上或左边滚动过的距离
scrollTop、scrollLeft 获取或设置元素在网页中的坐标
getAttribute(“style/type”) 获取元素指定属性的值
setAttribute(“type”,”button”) 为元素设置新的属性
removeAttribute(“style/type”) 为元素删除指定属性
转义字符
转义字符 描述 转义字符 描述
\b 退格 \v 跳格（Tab、水平）
\n 回车换行 \r 换行
\t Tab符号 \\ 反斜杠
\f 换页 \ooo 八进制整数
\’ 单引号 \xHH 十六进制
\” 双引号 \uhhhh 十六进Unicode字符
比较运算符
比较运算符 描述
< 小于
> 大于
<= 小于等于
>= 大于等于
== 等于，只根据表面值判断，不涉及数据类型
=== 绝对等于，根据表面值判断和数据类型判断
!= 不等于，只根据表面值判断，不涉及数据类型
!== 不绝对等于，根据表面值判断和数据类型判断
逻辑运算符
逻辑运算符 描述
&& 逻辑与 a&&b : a为true且b也为true 最终true 其他为false
|| 逻辑或 a||b : a为true 或 b 为true 最终 true（只要a或b有一个true）
! 逻辑非 : !true 为false
赋值运算符
运算符 说明 运算符 说明
+= 加法赋值运算符 -= 减法赋值运算符
*= 乘法赋值运算符 /= 除法赋值运算符
%= 取模赋值运算符 = 赋值
运算符优先级
运算符 结合性
. [] () 向左
++ -- - ! delete new typeof void 向右
* / % 向左
+ - 向左
>> << >>> 向左
<= < > >= in instanceof 向左
== != === !=== 向左
& 向左
^ 向左
| 向左
&& 向左
|| 向左
?: 向右
= 向右
*= /= %= += -= <<= >>= >>>= &= ^= |= 向右
, 向左
条件语句
·if语句
if (条件){
执行语句
}
if (条件){
执行语句
}
else{
执行语句
}
if (条件){
执行语句
}
else if (条件){
执行语句
}
switch (表达式){
case 目标值1:
执行语句1
break;
case 目标值2:
执行语句2
break;
default:
执行语句n+1
break;
}
条件运算符
三目运算：操作数?结果1:结果2 操作数为true结果为“结果1”，否则为“结果2”
Window对象
document、history、location、navigator、screen 返回相应对象的引用
parent、self、top 分别返回父窗口、当前窗口和最顶层窗口的对象引用
screenLeft、screenTop、screenX、screenY 返回窗口的左上角的坐标
innerWidth、innerHeight 分别返回窗口文档显示区域的宽度和高度
outerWidth、outerHeight 分别返回窗口的外部宽度和高度
closed 返回当前窗口是否已被关闭，返回布尔值
opener 返回对创建此窗口的窗口引用
open()、close() 打开或关闭浏览器窗口
alert()、confirm()、prompt() 分别弹出警告框、确认框、用户输入框
moveBy()、moveTo() 按偏移量移动、移动到指定的屏幕坐标
scrollBy()、scrollTo() 按偏移量滚动内容、滚动到指定坐标
setTimeout(“代码”,毫秒)、clearTimeout(对象) 设置或清除普通定时器
setInterval(“代码”,毫秒)、clearInterval(对象) 设置或清除周期定时器
·调用时因为window对象是最顶层的对象、所以可以省略window
var a = setTimeout("window.alert('i')",3000);
clearTimeout(a);
var inter = setInterval(function(){alert("dwadw")},3000)
clearInterval(inter);
screen对象
·获取用户计算机的屏幕信息
width、height 屏幕的宽度和高度
availWidth、availHeight 屏幕可用宽度和可用宽度（不包括Windows任务栏）
colorDepth 屏幕的颜色位数
location对象
·获取和设置当前网页的URL地址
hash 获取或设置URL中的锚点
host 获取或设置URL中的主机名
port 获取或设置URL中的端口号
href 获取或设置整个URL
pathname 获取或设置URL的路径部分
protocol 获取或设置URL的协议
search 获取或设置URL地址中的GET请求部分
reload 重新加载当前文档
history对象
back() 加载历史记录中的前一个URL
forward() 加载历史记录中的后一个URL
go() 加载历史记录中的某个页面
document对象
·处理网页文档
body 访问元素
lastModified 获得最后修改文档的日期和时间
referrer 获得该文档的来路URL地址
title 获得当前文档的标题
write() 向文档写入HTML或JavaScript代码
Date对象
·var 变量 = new Date();
·获取和设置日期与时间的方法
getYear() 返回日期的年份，是2位或4位
setYear(x) 设置年份值x
getFullYear() 返回日期的完整年份 2013
setFullYear(x) 设置完整年份值
getMonth() 返回日期的月份 1月~12月
setMonth(x) 设置日期的月份
getDate() 返回日期的日期值 1~31
setDate(x) 设置日期值
getDay() 返回值0~6 0：星期天
getHours() 返回小时值 0~23
setHours(x) 设置小时值
getMinutes() 返回时间的分钟 0~59
setMinutes(x) 设置分钟数
getSeconds() 返回时间的秒数
setSeconds(x) 设置时间秒数
getMilliseconds() 返回时间毫秒值 0~999
setMilliserconds(x) 设置毫秒数值
getTime() 返回1970年1月1日至今的毫秒数
setTime(x) 设置日期时间
toLocaleString() 根据本地时间格式，把Date对象转换为字符串
toLocaleTimeString() 根据本地时间格式，把Date对象时间部分转换为字符串
toLocaleDateString() 根据本地时间格式，把Date对象日期部分转换为字符串
toGMTString() 返回时间对应的格林尼治标准时间的字符串
String对象
length 返回字符串中字符的个数
charAt(数) 返回指定索引位置处的字符（从0开始）
indexOf(字符串A) 返回字符串中字符串A出现位置（第一次出现位置）
lastIndexOf(字符串A) 返回字符串中字符串A出现位置（最后一次出现位置）
substr(startIndex[,length]) 返回从起始索引提取length个字符
substring(数,数) 返回两个索引间的字符串
split(分割字符) 把字符串切分为字符串数组
search(表达式) 通过正则表达式搜索字符，返回下标值
replace(字符串A,字符串B) 替换与正则表达式匹配的子串
toLowerCase() 把字符串转换为小写
toUpperCase() 把字符串转换为大写
localeCompare(字符串A) 对象与字符串A比较是否一致（一致为：0，不一致为：1）
var str = "dwahdu,iwah,dfuioh,aegoi,asghor";
str.search(/Ah/i) #返回2 忽略大小写
str.search(“Ah”) #返回-1 对大小写敏感
循环控制语句
while (循环条件){
循环体语句;
}
do{
循环体语句;
}while(循环条件);
for(初始化表达式;循环条件;操纵表达式){
循环体语句;
}
break; 跳出循环，跳出switch语句
continue 结束本次循环继续下一次循环
循环语法
for (变量 in 数字){} #变量遍历数组的每一个下标索引
鼠标事件
onclick 鼠标单击时触发此事件
ondblclick 鼠标双击时触发此事件
onmousedown 鼠标按下时触发此事件
onmouseup 鼠标弹起时触发此事件
onmouseover 鼠标移动到某个设置了此事件的元素上时触发此事件
onmousemove 鼠标移动时触发此事件
onmouseout 鼠标从元素上移动开时触发此事件
键盘事件
onkeydown 当键盘上的某个键被按下时触发此事件
onkeyup 当键盘上的某个键被弹起时触发此事件
onkeypress 当输入有效的字符按键时触发此事件
<script type="text/javascript">
function a(){
var x;
if(window.event) // IE8 及更早IE版本
{
x=event.keyCode;
}
else if(event.which) // IE9/Firefox/Chrome/Opera/Safari
{
x=event.which;
}
alert(x); # 弹出Unicode 编码
x=String.fromCharCode(x); # 将Unicode 编码转为一个字符:
alert(x); # 弹出Unicode 编码对应的字符（键盘输出）
}
</script>
页面事件
onload 当页面加载完成时触发此事件
onunload 当页面关闭时触发此事件
表单事件
oublur 当元素失去焦点时触发此事件
onchange 当元素失去焦点且元素内容发生改变时触发此事件
onfocus 当某个元素获得焦点时触发此事件
onreset 当表单被重置时触发此事件
onsubmit 当表单被提交时触发此事件
事件对象
在键盘事件中，使用event对象的keyCode属性识别用户按下哪个键盘键
<script type="text/javascript">
window.onload = function (){
document.body.onkeyup = function(evt){
// 创建事件对象：主流浏览器、IE浏览器
var a = evt ? evt:window.event;
if(a.keyCode == 65){
alert("A");
}
}
}
</script>
键码值对照表
键 值
A 65
B 66
C 67
D 68
E 69
F 70
G 71
H 72
I 73
J 74
K 75
L 76
M 77
N 78
O 79
P 80
Q 81
R 82
S 83
T 84
U 85
V 86
W 87
X 88
Y 89
Z 90
0 48
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
left 39
up 38
right 39
down 40
扫一扫
3291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
