HTML+CSS（简单入门）例子

来源：互联网发布：怎样抢到淘宝秒杀产品编辑：程序博客网时间：2024/05/22 17:23

HTML

<br/>换行

<hr/>一条线

font什么意思？

<font color="">文字

区别？

圆点和方点

-------------------------------------

<P align="center">静夜思

李白

床前明月光，

床下鞋二双，

举头望明月，

低头敲代码。</p>

直接表示文本居中

---------------------------------------------

列表

ul无序

</ul>

ol有序

type类型,start从角标开始算起

</ol>

无点无序列表

<dl>

</dl>

------------------------------------------------

图片写法

---------------------------------------------------------------

点击链接事件

href表示直接返回标记为top处（<a name="top"></a>）如果加了target="_blank"则表示开启新的此页面跳到此页面的top

--------------------------------------------------------------

表单

<tr>

<td>

</td>

</tr>

</table>

table表示表单意思

tr行

td为tr里面的列

border="1"为表格边加深像素

--------------------------

align="center"居中

-----------------------------

<tr>

<th>

姓名

</th>

</tr>

tr下面的th为列且加深文字

<tr>

</td>

</tr>

td 中的colspand=“2”表示跨2列

-------------------------------------------------

<td>

</td>

input表示输入框 type类型 name定义的名字

-------------------------------------------

=================================================================

form表单中

#表示传递到的地址

method 拿到值

在form表单中表示文本框中传递的值的

如果输入为12则

结果为

age=12

-----------------------------------------------

表示传入类型为圆形选项记住要给value赋值

--------------------------------------

表示传入类型为方形选框

------------------------------------------

</select>

表示下拉列表

----------------------------------------------

表示？

---------------------------

固定格式

表示直接浏览传入的文件，按钮为：浏览..

-----------------------------

类型为按钮，值为提交

-----------------

固定格式重置按钮

---------------------

按钮图片

------------------------

=======================================================

frameset框架

注意frameset框架不能放在body里面

//rows设置框架纵向比例

此框架内容页面可以写一个已经写好的页面直接导入链接可显示

//cols 设置此框架内的横向比例

显示已经写好的页面路径

name=right，响应target="right"的标记页面

</frameset>

结构

frameset

！----frame

===========================================================

css导入方式

文字类型为color：绿色

-------------------

<div>holle</div>

div{

color: red

}

</style>

在本HTML页面中定义style类型的css

注意：内部样式必须定义在head中间

----------------------------------

css样式选择器:

1.id选择器

2.类选择器

3.元素选择器

4.属性选择器

5.伪类

<div id="div01">id选择器</div>

#div01{

color: red;

}

----------

<div class="class01">class选择器</div>

.class01{

color: green;

}

----------------

<div>元素选择器</div>

div{

color: red;

}

------------------

<div align="left">属性选择器</div>

div[align="left"]{

color: green;

}

------------------------

a:HOVER {

color: blue;鼠标悬浮为蓝色

}

a:LINK {

color: red;点击前为红色

}

---------------------------------------

盒子模型

</div>

#div1{

width: 100px;

height: 200px;

border: 2px solid;

padding-left: 50px;

}

.class1{

width: 50px;

height: 100px;

border: 1px solid;

}

注意：

solid;表示显示出来

padding-left: 50px;距离边距左边50px

margin-left: 50px;

margin-top: 50px;

-----------------------------------------------------------------------------------------

js的语法

js是一门弱语言

Java一门强语言面对象

js一门基于对象

js中的原始数据类型

数字型 number

字符串 String

布尔型 boolean

null：对象占位符

undefined 未定义

js的变量

var

js定义变量

1 定义是var

2 系统会自动分配

3 分号是可以省略但是在一行只能有一句代码

4 方法

建议每使用一个类初始化一下

=====================================================

js变量

alert("") //打印

分号是可以省略，但是在一行只有一句代码

var省略全局变量

js引入两种方式：

内部：

外部

alert(typeof a)

a类型为？

写法：

function test(){

a="holle";

}

test();

alert(a);

写一个方法，方法里面可直接定义数值数据

调用此方法

显示出来

js运算符

boolean转数字

var a=+false;

alert(a);

null转数字

var a=+undefined;

alert(a);

alert(typeof a);

逻辑运算符

var a3=undefined;

if(a3){

alert("true");

}

else{

alert(false);

}

var a=3;

var b=3;

if(a==b){

alert("true");

}else{

alert("false");

}

------------------------------------------

String 创建语法

new String(s)

String(s);

方法

charAt() 返回在指定位置的字符

concat() 连接字符串

indexOf() 检索字符串

match()找到一个或多个正则表达式的匹配

replace()替换与正则表达式匹配的子串

search() 检索与正则表达式相匹配的值

split()把字符串分割为字符串数组

toLocaleLowerCase()把字符串转换为小写

toLocaleUpperCase()把字符串转换为大写

toLowerCase() 把字符串转换为小写

toUpperCase() 把字符串转换为大写

substr() 从起始索引号提取字符串中指定数目的字符

substring() 提取字符串中两个指定的索引之间的符号

array使用

1.创建方式

new Array();

[]

1 没有角标越界

var x3=["YIHAO","00"];

alert(X3[2]);

会提示 undefined

属性

length 设置或返回数组中元素的数目

方法

concat() 连接两个或更多的数组并返回结果

join() 把数组所有元素放入一个字符串。元素通过指定的分隔符进行分隔

pop() 删除并返回数组的最后一个元素

push() 向数组的末尾添加一个或更多元素，并返回新的长度

reverse() 颠倒数组元素的顺序

shift() 删除并返回数组的第一个元素

slice() 从某一个已有的数组返回选定的元素

sort() 对数组的元素进行排序

split()删除元素，并向元素添加新元素

sunshift() 向数组的开头添加一个或更多元素，并返回新的长度

-----------------------------------------------

var age=["20","11","300","40"];

alert(age.sort(comp));

function comp(a,b){

return a-b;

}

//字符串转换为数字进行排序比较

------------------------------------------

var arr=new Array();

alert(arr);

var a=["011","02"];

alert(a[0]);

数组写法

array使用

1.创建方式

new Array();

[]

1 没有角标越界

var x3=["YIHAO","00"];

alert(X3[2]);

会提示 undefined

属性

length 设置或返回数组中元素的数目

方法

concat() 连接两个或更多的数组并返回结果

join() 把数组所有元素放入一个字符串。元素通过指定的分隔符进行分隔

pop() 删除并返回数组的最后一个元素

push() 向数组的末尾添加一个或更多元素，并返回新的长度

reverse() 颠倒数组元素的顺序

shift() 删除并返回数组的第一个元素

slice() 从某一个已有的数组返回选定的元素

sort() 对数组的元素进行排序

split()删除元素，并向元素添加新元素

unshift() 向数组的开头添加一个或更多元素，并返回新的长度

date使用

1.功能日期返回

var day=new Date();

alert(day);//返回格林威治时间和区时

alert(day.getTime());//时间戳唯一时间

alert(day.getDay());//返回周几 0~6

math：数学类

1.属性

math.pI

var pi=Math.PI;

alert(pi);

2.方法

ceil(x) 对数进行舍入

alert(Math.ceil(pi));

floor(x) 对数进行下舍入

alert(Math.floor(pi));

random() 返回0~1 之间的随机数

alert(Math.random());

round(x) 把数四舍五入为最接近的整数

alert(Math.round(9.91));

abs(x) 返回数的绝对值

alert(Math.abs(-9.91));

global:

方法：

decodeURI 解码某一个编码的URI

解析网址

decodeURIComponent() 解码一个编码的UIR 组建

encodeURI()把字符串编码为URI

加密网址比如原来的为view-source:file:///D:/JavaEE/day02/资料/day02/07-Global.html

结果为 %dasdjiu5

encodeURIComponent() 把字符串编码为URI组建

isFinite() 检查某一个值是否为有穷大的数

var a=123;

alert(isFinite(a));

isNaN() 检查某一个值是否是数字

alert(isNaN("o"));

parseFloat()解析一个字符串并返回一个浮点数

var a="1234.13";//此字符串必须是数字字符

alert(parseFloat(a));

parseInt() 解析一个字符串并返回一个整数

正则表达式

/pattern/atttributes

/^\w{6,12}$/;

new RegExp

var reg =new RegExp(" \\w{6,12}$");

有两种写法

一种定义规则比较内容 test方法测试

var reg=/^\w{6,12}$/;

var strg="acdesd";

alert(reg.test(strg));

第二种

new RegExp();对象构造规则，test方法比较

var reg1=new RegExp("^\\w{6,12}$");

var strs1="mynhm";

alert(reg1.test(strs1));

JavaScript高级

function创建方式

三种：

---------------------

第一种方式:

function方法名(){

方法体;

}

方法();调用

function test(){

alert("我喜欢美食");

}

test();

第二种方式:

var变量名 =new Function("参数","执行语句");

var test= new Function("一号","alert('美食');");

test();

----------------------------------------

第三种方式

var test=new function(a){

alert("ok");

} ;

-------------------------------------------

function参数

参数:方法体内的参数个数，叫形参

1.参数只是你想得到的个数，实际调用时没有任何关系

有一个自带的参数argument

2.如果这个参数没有传入那么就是undefined

3.调用方法名(N个参数);

注意只跟方法名有关(..)参数可传或不可穿

return方法

---------------------------

//参数调用之一：

/* function test(a,b)

{

alert("打一号热线:"+a+"之:"+b);

}

test("114","150",""); */

--------------------------------

参数调用方式二

function test(){

alert("jinru");

var sum=0;

for(var i=0;i<arguments.length;i++){

sum+=arguments[i];

}

return sum;

}

var s=test(10,9);

alert(s);

<a href="javascript:void(test(1));">点击test(1)</a>

<a href="javascript:void(0):" onclick="test();">shanchu</a>

通过连触发事件两种写法

--------------------------

function test(a,b,c){

var sum=0;

for(var i=0;i<arguments.length;i++);

{

sum+=arguments[i];

}

return sum;

}

var new_sum = test(120,130,9);

alert(new_sum);

运行不出来

原因：?

------------------------------------

常用的DOM对象

dom成员分析

dom内存结构分析

属性

1.想要的参数

2.arguments实际的参数

函数的调用方式

1.直接调用

innerHTML 属性

getElementById() 返回对拥有指定id 的第一个对象的

getElementsByName() 返回带有指定名称的对象集合。

getElementsByTagName() 返回带有指定标签名的对象集合。

</body>

返回对拥有指定id 的第一个对象的

window.document.getElementById("bb_id").innerHTML="芙蓉";

返回带有指定名称的对象集合。

var m=window.document.getElementsByName("mm");

alert(m.length);

返回带有指定标签名的对象集合。

var m=window.document.getElementsByTagName("input");

alert(m.length);

void();截断数据

----------------------------------------------------------

BOM

Browser object Model 浏览器对象模型

概念

将浏览器的组成部分，封闭成各个对象。

方法

-----------------------------------------------------

DOM对象简述

将浏览器的组成部分，封闭成各个对象

Window 窗口对象,

1.window.（点)

2.直接方法

常用的方法:

alert();

history 对 History 对象的只读引用

Navigator 对 Navigator 对象的只读引用。

Screen 对 Screen 对象的只读引用

location 用于窗口或框架的 Location 对象。

document 对 Document 对象的只读引用。

Navigator 对象包含有关浏览器的信息

Screen 对象包含有关客户端显示屏幕的信息。

History 对象包含用户（在浏览器窗口中）访问过的 URL

back() 加载 history 列表中的前一个 URL。 4 1 9

forward() 加载 history 列表中的下一个 URL。 4 1 9

go() 加载 history 列表中的某个具体页面。

Location 对象包含有关当前 URL 的信息

DOM

Document object Model 文档对象模型

DOM对象简述

将文档的各个部分也封装成相应对象

对象

document ：文档

element：元素

attribute：属性

text：文本

comment：注释

==============================================================

事件

事件源：可以注册的组件

事件:一件事

监听器：一组事件

注册监听：事件源和监听组合在一起

绑定方式一:

function test()

{

alert("我去马尔");

}

绑定方式二

function test(){

alert("按钮触发");

}

document.getElementById("id").onclick=test;

=================================================================

在js中的事件类型

onblur 元素失去焦点。

onfocus 元素获得焦点。

onchange 域的内容被改变。

onselect 文本被选中。

onclick 当用户点击某个对象时调用的事件句柄。

ondblclick 当用户双击某个对象时调用的事件句柄。

onkeydown 某个键盘按键被按下。

onkeypress 某个键盘按键被按下并松开。

onkeyup 某个键盘按键被松开。

onmousedown 鼠标按钮被按下。 4 1 9 Yes

onmousemove 鼠标被移动。 3 1 9 Yes

onmouseout 鼠标从某元素移开。 4 1 9 Yes

onmouseover 鼠标移到某元素之上。 3 1 9 Yes

onmouseup 鼠标按键被松开。

onreset 重置按钮被点击。

onsubmit 确认按钮被点击。

onunload 用户退出页面。

相互冲突

双击事件要控制间隔时间

注意一个作用域焦点要写在作用域里面

注意两个会冲突

在英文状态下有效果在输入法中没效果

document.getElementById("id_bb").onkeydown =function(){

alert(arguments[0].value);

//alert(arguments.length);

alert("我被弹了!");

};

<!--

onmousedown 鼠标按钮被按下。 4 1 9 Yes

onmousemove 鼠标被移动。 3 1 9 Yes

onmouseout 鼠标从某元素移开。 4 1 9 Yes

onmouseover 鼠标移到某元素之上。 3 1 9 Yes

onmouseup 鼠标按键被松开。

onreset 重置按钮被点击。

onsubmit 确认按钮被点击。

onunload 用户退出页面。

-->

-------------------------------------------------------------------------------------------------

<!--

json使用

取数据方式:

1.点

json变量名.key

json{“键1”:值，“键1”:值}

{"age":100,"name":"测试"}

两种方式

var json={"01":1,"02":2};

alert(json.01);//变量名.键=值

alert(json["01"]//变量名["键"]=值

json 循环

for(变量名 in 集合){

}

var json=[{"A":1,"A":2,"B":3},

{"A":4,"A":5,"A":6},{"A":7,"A":8,"A":9}];

for(a in json){

//alert(json[a]);

//alert(a);

alert(json[a].A);

}

---------------------------------------------------------------

json表格添加

1:数据

var jsons = [ {

"name" : "zs",

"age" : 23,

"gender" : "male"

}, {

"name" : "ls",

"age" : 24,

"gender" : "female"

{

"name" : "ww",

"age" : 25,

"gender" : "male"

} ];

2.循环

for (key in jsons) {

//alert(key);

//alert(jsons[key]);

alert(jsons[key].name);

}

function add(){

var json = [ {

"name" : "zs",

"age" : 23,

"gender" : "male"

}, {

"name" : "ls",

"age" : 24,

"gender" : "female"

{

"name" : "ww",

"age" : 25,

"gender" : "male"

} ];

for(key in json){

var name=json[key].name;

var age=json[key].age;

var gender=json[key].gender;

document.getElementById("table").innerHTML+="<tr><td>"+name+"</td><td>"+age

+"</td><td>"+gender+"</td></tr>"

}

</script>

<tr>

<td>gender</td>

</tr>

</table>

0 0