------------------------------------------------------------------------------------------------------------------------------
form[fɔːm]n.形式,形态,外形;方式;表格vt.构成,组成;排列,;产生,塑造vi.形成,排列
action['ækʃ(ə)n]n.行动;活动;功能;战斗;情节
script[skrɪpt]n.脚本;手迹;书写用的字母
input['ɪnpʊt]n.投入;输入电路vt.[自][电子]输入;将…输入电脑
select[sɪ'lekt]vt.挑选;选拔adj.精选的;挑选出来的;极好的vi.挑选
option['ɒpʃ(ə)n]n.[计]选项;选择权;买卖的特权
text[tekst]n.文本;课文;主题area['eərɪə]n.区域,地区;面积;范围
check[tʃek]vi.核对无误;vt.检查;制止;寄存n.支票;阻止;阻止物
head[hed]n.头;头痛;上端;最前的部分;理解力
title['taɪt(ə)l]n.冠军;标题;字幕vt.加标题于;把…称为adj.冠军的;标题的;
align[ə'laɪn]vt.使结盟;使成一行;匹配vi.排列;排成一行
center['sɛntɚ]n.中心,中央;中锋;中心点vi.居中,被置于中心
font[fɒnt]n.字体;字形;泉;洗礼盘,圣水器
face[feɪs]n.脸;表面;面子;vi.向;朝vt.面对;面向;承认;抹盖
size[saɪz]n.大小;尺寸adj.一定尺寸的vt.依大小排列vi.可比拟
color['kʌlɚ]n.颜色;肤色;颜料;脸色vt.粉饰;给...涂颜色;歪曲vi.变色;获得颜色
alt[ælt]n.高音,中高音adj.高音的;最高调的
width[wɪtθ;wɪdθ]n.宽度;广度
height[haɪt]n.高地;高度;身高;顶点
target['tɑːgɪt]n.目标;靶子vt.把……作为目标;规定……的指标;瞄准某物
table['teɪb(ə)l]n.桌子;表格;平地层vt.制表;搁置;嵌合adj.桌子的
border['bɔːdə]n.边境;边界;国界vt.接近;与…接壤;在…上镶边vi.接界;近似
col[kɒl]n.山坳;出口;峡路
row[rəʊ]n.行,排;划船;街道;吵闹vt.划船;使……成排vi.划船;争吵
span[spæn]n.跨度,跨距;范围
radio['reɪdɪəʊ]n.收音机;无线电广播设备vi.用无线电进行通信vt.用无线电发送vt.跨越;持续
submit[səb'mɪt]vt.使服从;主张;呈递vi.提交;服从
reset[riː'set]vi.重置;清零vt.重置;重新设定;重新组合n.重新设定;重新组合;重排版
button['bʌt(ə)n]n.按钮;钮扣
hidden['hɪdn]adj.隐藏的
image['ɪmɪdʒ]n.影像;想象;肖像;偶像vt.想象;反映;象征;作…的像
------------------------------------------------------------------------------------------------------------------------------
CSS
css:
层叠样式表,用于渲染页面提高工作效率
格式:
选择器{属性:
值;属性1:
值1;}
后缀名:
.css独立的css(样式)文件
css和html元素的整合★
pan:
行内的块标签:
方式1:
内联样式表:
通过标签的style属性设置样式
100%;display:
none">
方式2:
内部样式表:
在当前页面中使用的样式
通过head标签的style子标签导入
方式3:
外部样式表:
有独立的css文件
通过head标签的link子标签导入
例如:
选择器:
★
id选择器
要求:
html元素必须有id属性且有值
css中通过"#"引入,后面加上id的值#id1{...}
class选择器
要求:
html元素必须有class属性且有值
css中通过"."引入,后面加上class的值.cls1{...}
元素选择器
直接用元素(标签)名即可xxx{...}
派生的选择器
属性选择器★
要求:
html元素必须有一个属性不论属性是什么且有值
css中通过下面的方式使用
元素名[属性="属性值"]{....}
例如:
xxx[nihao="wohenhao"]{....}
后代选择器
选择器后代选择器{...}在满足第一个选择器的条件下找后代的选择器,给满足条件的元素添加样式
了解的选择器
锚伪类选择器
a:
link{color:
#FF0000}/*未访问的链接*/
a:
visited{color:
#00FF00}/*已访问的链接*/
a:
hover{color:
#FF00FF}/*鼠标移动到链接上*/
a:
active{color:
#0000FF}/*选定的链接*/
选择器使用小结:
id选择器:
一个元素(标签)
class选择器:
一类元素
元素选择器:
一种元素
属性选择器:
元素选择器的特殊用法
使用的时候注意:
(了解)
若多个样式作用于一个元素的时候
不同的样式,会叠加
相同的样式,最近原则
若多个选择器作用于一个元素的时候
越特殊优先级越高id优先级最高
//////////////////////
属性(了解)
字体
font-family:
设置字体(隶书)设置字体家族
font-size:
设置字体大小
font-style:
设置字体风格
文本:
改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进
color['kʌlɚ]:
文本颜色
line[laɪn]-height[haɪt]:
设置行高
text-decoration[dekə'reɪʃ(ə)n]:
向文本添加修饰。
noneunderline
text-align[ə'laɪn]:
对齐文本
列表:
list-style-type:
设置列表项的类型例如:
a1实心圆
list-style-image:
设置图片最为列表项类型使用的时候使用url函数url("/i/arrow.gif");
背景:
background['bækgraʊnd]-color:
设置背景颜色
background-image:
设置图片作为背景url
尺寸:
width:
height:
浮动:
float[fləʊt]:
可选值leftright
分类:
clear[klɪə](关闭浮动):
设置元素的两边是否有其他的浮动元素
值为:
both两边都不允许有浮动元素
display:
设置是否及如何显示元素。
none[nʌn]此元素不会被显示。
block[blɒk]此元素将显示为块级元素,此元素前后会带有换行符。
inline默认。
此元素会被显示为内联元素,元素前后没有换行符。
框模型:
(理解)
一个元素外面有padding(内边距)border(边框)margin['mɑːdʒɪn](外边距)
padding:
元素和边框的距离
margin:
元素最外层的空白
上面这三个属性都有简写的属性
若设置大小的时候四个值:
顺序上右下左
padding:
10px10px10px10px
若只写一个的话代表四个边使用同一个值padding:
10px
若只写两个个的话代表四个边使用同一个值padding:
10px20px
若只写三个个的话代表四个边使用同一个值padding:
10px20px30px
border(边框)
还可以设置颜色风格
简写属性:
border:
宽度风格颜色;
border:
5pxsolidred;
solid['sɒlɪd]:
实线
dashed[dæʃt]:
虚线
double:
双实线
JavaScript
●JavaScript[skrɪpt]的简介
什么是JavaScript:
是基于对象和事件驱动的语言,应用于客户端。
基于对象:
java是面向对象,使用对象需要创建;js里面提供好了一些对象,直接使用
事件驱动:
每次滑动鼠标,变换一张图片
客户端:
指的是浏览器
●JavaScript的特点(三个)
第一个:
交互性
第二个:
安全性
**JavaScript不能访问本地硬盘里面的文件
第三个:
跨平台性
**在java里面跨平台,通过虚拟机实现的
**JavaScript跨平台,只要在系统里面安装了支持JavaScript的浏览器,可以运行JavaScript
●Java和JavaScript区别
(雷锋和雷峰塔)
第一,java是sun公司,现在是oracle;JavaScript是网景公司
第二,java是面向对象的语言,javascript是基于对象的语言
第三,java跨平台需要依靠虚拟机实现,JavaScript只需要浏览器可以运行
第四,JavaScript弱类型语言,java是强类型的语言
比如在java里面定义一个变量inta=10;intb="10";不正确
在JavaScript里面定义变量都是使用一个关键字vara=10;varb="10";varc=true;
第五,java运行先编译通过虚拟机运行,JavaScript直接使用浏览器运行
●JavaScript由三部分组成
第一部分:
ECMAScript
又ECMA组织制定语句,语法
第二部分:
BOM
broswerobjectmodel:
浏览器对象模型
第三部分:
DOM
document['dɒkjʊm(ə)nt]objectmodel['mɑdl]:
文档对象模型
●js和html的结合方式
有两种结合方式
⏹第一种:
使用html中的标签js代码
代码
alert("aaa");
js的注释有两种
//单行注释
/*
多行注释
*/
⏹第二种:
使用html的标签,引入外部的js文件
*使用第二种方式的时候有两点注意
注意一:
不要在script标签里面写js代码了,不会执行
注意二:
结束script标签,不要在标签内结束
*代码
//不要在script标签里面写js代码了,不会执行
alert("aaa");
变量声明和数据类型
(1)在js里面如何声明变量,都是使用一个关键字varvara=10;
原始类型有五个:
string:
字符串类型。
(vara="abc")
number:
数字类型。
(varb=10)
boolean:
布尔类型truefalse。
(varc=true)
null:
null是特殊的引用类型,表示对象引用为空。
比如vardate=null;
undefined[ʌndɪ'faɪnd]:
表示定义了一个变量,但是没有赋值。
值只有undefined
typeof变量|值
(3)typeof(变量的名称):
查看当前变量的类型。
alert(typeof(a));
通过typeof可以判断一个值或者变量是否是原始类型,若是原始类型,还可以判断属于那种.
引用类型和类型转换
引用类型
Object对象:
所有对象都由这个对象继承而来
Boolean对象:
Boolean原始类型的引用类型
Number对象:
Number原始类型的引用类型
原始类型中的StringNumberBoolean都是伪对象,可以调用相应的方法
数组
Array
*什么是数组:
定义一个变量只能存一个值,想要存多个值,可以使用数组进行存储
●js里面定义数组的方式
第一个:
vararr1=[];
第二个:
vararr2=["10",10,true];//可以写任意的类型
第三种:
vararr3=newArray(3);//表示定义数组名称是arr3,数组的长度是3
第四种:
vararr4=newArray(4,5,6);//表示定义数组名称是arr4,数组里面的值456
*数组的长度:
在js里面数组的长度可变的
**数组的长度是最大的下标+1,之间如果没有赋值直接默认是空字符串
String:
语法:
newString(值|变量);//返回一个对象
String(值|变量);//返回原始类型
常用方法:
substring(start,end):
[start,end)
substr(start,size):
从索引为指定的值开始向后截取几个
charAt(index):
返回在指定位置的字符。
indexOf(""):
返回字符串所在索引
replace():
替换
split():
切割
常用属性:
length
Boolean:
语法:
newBoolean(值|变量);
Boolean(值|变量);
非0数字非空字符串非空对象转成true
Number
语法:
newNumber(值|变量);
Number(值|变量);
注意:
null====>0
fale====>0true====>1
字符串的数字=====>对应的数字
其他的NaN
Date:
newDate();
常用方法:
toLocalString()
RegExp:
正则表达式
语法:
直接量语法/正则表达式/参数
直接量语法/正则表达式/
newRegExp("正则表达式")
newRegExp("正则表达式","参数")
参数:
i:
忽略大小写
g:
全局
常用方法:
test():
返回值为boolean
Math:
Math.常量|方法
Math.PI
Math.random()[0,1)
全局:
★
decodeURI()解码某个编码的URI。
encodeURI()把字符串编码为URI。
Number():
强制转换成数字
String():
转成字符串
parseInt():
尝试转换成整数
parseFloat():
尝试转换成小数
eval()计算JavaScript字符串,并把它作为脚本代码来执行。
类型转换
**转换成字符串
**转换成数字:
parseInt()和parseFloat()
**强制类型转换
Boolean(value)-把给定的值转换成Boolean型;
Number(value)-把给定的值转换成数字(可以是整数或浮点数);
String(value)-把给定的值转换成字符串;
运算符
(1)算术运算符
+-*/....
(2)赋值运算符
+=含义:
x+=y相当于x=x+y
(3)比较运算符
==:
表示条件的判断,如果是=,表示赋值
(4)逻辑运算符
&&||!
(5)js的运算符和java不同的内容
第一个:
js里面不区分整数和小数*比如vara=123/1000*1000,如果在java里面结果是0,js里面的结果:
123
第二个:
字符串的相加和相减操作
*字符串相加是字符串的拼接操作,字符串相减是真正的相减运算,如果字符串不是数字提示NaN
*//字符串的相加和相减
varb="10";
document.write(b+1);//字符串拼接
document.write("
");
document.write(b-1);//真正相减的运算
document.write("
");varc="a";
document.write(c-1);//NaN
第三个:
boolean类型相加和相减的操作
*如果布尔类型值是true,把类型当成1运算;如果布尔类型值是false,把类型当成0运算
//布尔类型相加和相减操作
varflag=true;
document.write(flag+1);//2,当boolean类型是true时候,把类型当成1运算
document.write("
");varflag1=false;
document.write(flag1+1);//1,当boolean类型是false时候,把类型当成0运算
第四个:
==和===区别
==比较的是值,===比较的是值和类型
*代码
varmm="10";
if(mm==="10"){
alert("10");
}else{
alert("other");
}
ECMAScript对象
string对象
(1)字符串对象
*创建字符串:
vara="abc";varb=newString("bb");
(2)属性length字符串的长度
(3)方法
第一类:
与html相关的方法(设置字符串的样式的方法)
=bold()使用粗体显示字符串。
**document.write(a.bold());
=fontcolor()使用指定的颜色来显示字符串。
**document.write(a.fontcolor("red"));
=fontsize()使用指定的尺寸来显示字符串。
**document.write(a.fontsize(7));
=link()将字符串显示为链接
**document.write(a.link("04-练习99乘法表.html"));
第二类:
与java相似的方法(在java里面也有类似的方法)
=charAt()返回在指定位置的字符。
如果位置不存在字符,返回空字符串""
**varstr="abcdefg";
document.write(str.charAt
(1));
=concat(