HTML+CSS+JavaScript基础知识

最新推荐文章于 2023-03-31 20:38:29 发布

YongJia_Li

最新推荐文章于 2023-03-31 20:38:29 发布

阅读量7.7k

点赞数 11

本文链接：https://blog.csdn.net/u010975449/article/details/46984781

版权

第一部分：HTML

一、简介HTML
1、HTML（Hyper Text Mark-up Language超文本标记语言）的缩写（标记：就是用来描述网页内容的一些特定符号）。HTML不是编程语言，而是一种描述性的标记语言，用于描述网页内容的显示方式，比如文字的颜色、大小，这些都是利用html标记来实现的。
2、HTML文档的创建方式：

手工直接编写（例如记事本）
通过图形化的HTML开发软件Dreamweaver
由web服务器上的动态网页程序生成

二、HTML的语法

HTML最基本的语法就是<标记符>内容</标记符>，标记符通常都是承兑使用的，有一个开始标记和一个结束标记。结束标记只是在开始标记的前面加上一个斜杠/当浏览器打开html文件后，就会理解里面的标记符，然后把标记符对应的功能表达出来。

HTML标记的类型：单标记与双标记

1、单标记

<标记名称>：单一型，无属性值。如<br/>
<标记名称属性="属性值">：单一型，有属性值。如<hr width="80%" />

2、双标记

<标记名称>...</标记名称>：没有属性值。如<title>...</title>
<标记名称属性="属性值">...</标记名称>：有属性值。如<body bgcolor="red">...</body>

3、总结

标记与属性、属性之间以空格分隔
属性不区分先后顺序，且属性不是必须的
虽然在HTML中标记不区分大小写，但在XHTML中所有的标记都必须小写，所以建议所有标记都采用小写

三、HTML文档结构

所有的网页文件，通常由四对标记来构成文档的骨架，它们是：

<html>：标识网页文件的开始和结束，所有的html元素都要放在这对标记中

<head>：标识网页文件的头部信息，如标题、搜索关键字等

<title>标题</title>：标识文件的标题

</head>

<body>：标识文件的主体部分

正文

</body>

</html>

（一）、meta标记用于定义文件信息

meta标记用于定义文件信息，对网页文件进行说明，放置于<head></head>之间

设置关键字：<meta name="keywords" content="value">，多个关键字内容之间可以用逗号分隔。
设置描述：<meta name="description" content="value"/>
设置作者：<meta name="author" content="value"/>
设置字符集：<meta http-equiv="content-type" content="text/html;charset=gb2312"/>
设置页面定时跳转：<meta http-equiv="Refresh" content="2;http://www.itcast.com"/>

（二）、网页主体标记body

1、注释：

2、body属性：

（三）、字体修饰

1、<font>标记：

2、字符格式

3、段落控制标记

属性名称：align，属性值：left（默认）、center、right

4、段落标题

x取值[1-6]：hx内的文本对自动加粗显示。

注：hx针对的对象时段落，font针对的对象时任意文本

5、换行：<br/>换行不换段

6、水平直线：<hr/>

（三）、特殊标记

1、定义一个块引用：使用文本缩进

格式：<blockquote>...</blockquote>

属性名称：cite，属性值：url，说明：被引用的地址

2、居中标记<center>内容</center>（被废弃的标签）

3、预格式化：<pre></pre>

4、显示已经格式化好的文字，不加此标记的话，HTML浏览器会忽略所有空格和制表符

（四）、列表标记

1、列表标记的用途：列表标记可以创建一般的无需列表、编号列表，以及定义列表的三种方式。还可以在一种列表中嵌套另一种列表。便于概括显示一系列相关的内容。

无需列表：<ul>...</ul>
有序列表：<ol>...</ol>
定义列表：<dl>...<dl>

2、无序列表

语法：<ul type="项目符号类型"> <li type="项目符号类型">内容1</li> <li>内容2</li> </ul>

3、有序列表

语法：<ol start="列表起点" type="项目符号类型"> <li>内容1</li> <li>内容2</li> </ol>

4、定义列表

语法：

<dl>----------定义列表

<dt>标题1</dt>-----------表示一个项目

<dd>内容1</dd>------------表示一个项目下的更详细的内容解释

</dl>

（五）、图片

1、web上支持的图片格式

GIF（图形交换格式）：GIF格式文件最多只能保存256种颜色。该格式支持透明色，支持动画效果。
JPEG（联合图像专家组）：改格式不支持透明色及动画，颜色可达1670万种。
PNG（网格可移植格式）：该格式支持透明色，但不支持动画，颜色从几十种至1670万种。

2、图片标记：<img src="图片的路径"/>

3、路径：

绝对路径：提供目标文档的完整主机名称、路径信息、及文档全称
相对路径：从当前文档开始的路径
根相对路径：从站点根目录开始的路径，以/开头

相对路径时，如果当前文档和目标文档位置平行，则直接书写文档全称；如果当前文档和目标文档所在文件夹位置平行，则书写为文件夹名称/目标文档全称；如果当前文档所在位置和目标文档位置平行，则书写为../目标文档全称。

四、表格

（一）、表格结构和属性

1、因为表格中可以包含任何内容，所以在使用DIV+CSS之前，网页设计师是使用表格对网页内容进行排版与布局的

2、表格基本结构：

<table>...</table>--------定义表格
<tr>...</tr>----------定义行
<td>...</td>-----------定义列（单元格）
<th>...</th>-----------定义标题栏（文字加粗）

3、表格的属性<table>

4、<table>标签下的边框设置

4、行的属性<tr>

5、列的属性<td>

（二）、表格的结构化

1、结构化格式：

<table>
<thead>...</thead>---------表头区
<thead>...</thead>---------表体区
..........
<tfoot>...</tfoot>----------表尾区
</table>

2、直列化格式：<colgroup>...</colgroup>

3、表格的标题：<table> <caption>...</caption> </table>

五、超链接

一个网站由多个网页组成的，网页之间通过连接实现相互关联。

（一）、连接的概念

实现当前文档到目标文档的一种跳转。

（二）、链接语法

_blank：在新窗口中打开
_self：在自身窗口中打开（默认）
_parent：在上一级窗口中打开
_top：在本窗口中打开

（三）、链接的类型

1、内部链接：当前文档和目标文档在同一个站点

<a href=目标文档位置及全称>

2、外部链接：当前文档和目标文档不在同一个站点

<a href=URL>

3、E-mail链接：允许访问者向指定的地址发邮件

<a href=mailto:电子邮件地址>

4、局部链接（锚点）：跳转到同一网页或其他文档中的指定位置，

创建锚点：<a name="锚点名称">...</a>
链接锚点：<a href="#锚点名称">...</a>

5、空链接：就是没有目标端点的链接

<a href="#"></a>

例如：

A、设为首页：<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.sethomepage('http://www.sohu.com')">设为首页</a>

B、添加收藏：<a href="#" onClick="javascript:window.external.addfavorite('http://www.sohu.com','搜狐')">加入收藏夹</a>

6、脚本链接：是一种特殊的链接，当单机设置脚本链接的文本或图像时，可以运行相应的JavaScript语句。

例如：

关闭窗口：输入javascript:window.close()
打开窗口：输入javascript:window.open ('文件名')

六、表单

（一）、表单的功能

1、表单的作用是从访问您web站点的用户那里获取信息，访问者可以使用诸如文本框、列表框、单选框及复选框之类的表单元素输入信息，然后单击某个按钮提交这些信息。

2、客户端和服务器端进行交流的途径。

（二）、表单标记

1、form标记用于创建一个表单，定义表单的开始和结束，它是一个容器，用于包含其他表单元素，例如文本框、单选框等。表单元素必须写在form标记内才有用。

2、格式：

3、表单元素标记：

A、单行文本框：

B、密码框：

C、多行文本框：

D、单选框：

E、复选框：

F、标注：

G、列表框：

菜单式：

......

</select>

分组：<optgtoup label="分组名称"></optgroup>

列表式

......

</select>

H、按钮：

I、图片按钮：

J、隐藏域：

K、浏览框：

L、表单外框：

<fieldset >...</fieldset>--------定义围绕表单中元素的边框

<legend>...</legend>---------legend为fieldset定义标题

七、插入多媒体元素标记

1、Flash动画的插入

2、插入MP3音乐

3、插入背景音乐

<bgsound src="音乐文件名及路径" loop="循环次数" />（如果loop=-1即为无限循环）

4、插入视频wmv格式

5、网络流媒体文件的插入

6、滚动字幕

<marquee>滚动的文字</marquee>

direction="滚动方向"（left、right、up、down）
behavior="滚动方式"（scroll、slide、alternet）
loop="循环次数"（若未指定则循环不止，loop=infinite）
bgcolor=""
onMouseOver="this.stop()" onMouseOut="this.start()"
scrollamount=""
scrolldelay=""

八、框架--实现网页之中嵌套网页

1、框架的功能：

将浏览器划分为不同的区域，每个区域可以包含不同的网页。以实现多个网页在一个浏览器窗口中显示的效果。

2、框架的格式：

写框架时，不需要写body语句。

</frameset>

3、内嵌式框架

</iframe>

九、从html迈向xhtml

1、什么是XHTML？

XHTML是The Extensible Hyper Text Markup Language的缩写，xhtml的意思是可扩展标识语言。

XHTML是HTML向XML过度的一个桥梁，Xhtml是基于html的，这是更严密、代码更简洁的HTML版本。

2、DOCTYPE

DOCTYPE是document type（文档类型）的简写，主要用来说明你用的XHTML或HTML是什么版本。浏览器根据DOCTYPE定义的DTD来解释页面代码，并展现出来。所以，建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分。

3、XHTML1.0提供了三种DTD声明：

过度的（Transitional）：要求非常宽松的DTD，它允许你继续使用HTML4.0.1的标记（但是要符合xhtml的语法），完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

严格的（Strict）：要求严格的DTD，你不能使用任何表现层的标记和属性，例如<br>，完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

框架的（Frameset）：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Frameset//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

4、XHTML与HTML的区别：

XHTML标签必须被正确的嵌套；
XHTML标签必须被关闭；
标签名必须用小写字母；
属性名必须用小写，必有值，值必加引号；

第二部分：CSS

一、Web标准简介

1、什么是web标准？

web标准不是某一个标准，而是由W3C和其他标准化组织指定的一系列的标准集合，包含我们熟悉的HTML、XHTML、JavaScript、CSS等。

2、web标准的目的？

在于创建一个统一的用于web表现层的技术标准，以便于通过不同浏览器或终端设备向最终户展示信息内容。

3、采用web标准的好处？

提高页面浏览速度：使用css方法，比传统的设计方法至少节约50%以上的文件尺寸。
缩短改版时间，将表现（样式/外观）与内容（信息/数据）相分离：只需要简单的修改几个css文件就可以重新设计一个有成千上万页面的站点。
降低网站流量的费用：带宽要求降低（代码更简洁），成本降低。
更容易被搜索引擎搜索到：提高网站在百度或谷歌上的排名。
内容能被更广泛的设备访问：包括屏幕阅读、手持设备、搜索机器人、打印机、电冰箱等等。

4、web标准的构成？

web标准由三部分组成：

结构（structure）
表现（presentation）
行为（behavior）

5、理解表现和结构的分离

基本的概念：内容、结构、表现和行为

内容：就是制作者放到页面内真正想让访问者浏览的信息。
结构：使内容更加具有逻辑性和易用性（类似于一级二级标题、正文、列表等称为结构）
表现：用于修饰内容外观的样式
行为：对内容的交互及操作效果，如通过JavaScript判断表单提交等

二、CSS简介

（一）、概念

1、CSS是Cascading Style Sheets（层叠样式表）的简称。

2、更多的人把它称作样式表，顾名思义，它是一种设计网页样式的工具。借助CSS的强大功能，网页将在你丰富的想象力下千变万化。实际上CSS代码都是由一些最基本的语句组成的。

3、CSS可以作为HTML、XHTML、XML的样式控制语言。

（二）、CSS语法结构

1、选择符{ 属性：值 }

例如：body{ font-size : 12px; }

参数说明：

选择符（Selector）：指明这组样式所要针对的对象。可以是一个XHTML标签，如body、h1等；也可以是定义了特定的ID或class的标签，如#main选择符表示选择<div id="main">，即一个被指定了main为id的对象。
属性（Property）：选择符的样式属性，如颜色、大小、定位、浮动方式等。
值（Value）：指属性的值。

注：同时可以为一个选择符定义多个属性，每个属性之间用分号分隔。

2、CSS长度单位

3、CSS颜色单位

4、CSS控制字体

（三）、CSS在网页中的应用方式

1、内联式样式表：直接写在现有的标记中，如：

2、嵌入式样式表：使用<style></style>标签嵌入到HTML文件的头部<head>标记内，如：

3、外部链接式：将样式表写在一个独立的css文件中，然后再页面head区<head>标记内用<link>标签调用它，如：

4、导入式样式表：导入式样式表和链接式样式表的功能基本相同，只是语法和动作方式略有不同，同样也将导入式样代码写在<head>标记内，如：

@import url(basic.css);

</style>

（四）、CSS选择符类型

1、类型选择符：就是HTML文档中的元素，如：

p{属性：值}

2、类选择符：可以自定义样式，应用于一个或多个网页元素，类在网页中可以出现多次用于定义重复的样式，类以.开头，后面的名称自己定义，类定以后还需要在网页中加入class=类名称，加以调用。如：

.warning{属性：值}

3、ID选择符：与类基本相似，只是以英文#开头，因为ID具有唯一性，所以在网页中只能出现一次，用于定义只出现一次的样式。如：

#main{属性：值}

（五）、CSS样式的特点

1、继承：

网页中子元素将继承父元素的样子，例如：要控制段落p中的文字大小，可以直接给body标记家样式。

2、层叠（覆盖）：

网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素中的样式
定义后面的样式会覆盖前面的样式

（六）、CSS样式的优先权

1、四种方式的优先权：内联式【行内样式】-->嵌入式【内部式】-->连接式【外部式】-->@import【导入式】

2、CSS优先权：就近原则

总结：范围越小，优先权越高；

离要修饰目标越近的样式，优先权越高。

3、选择符的优先权：ID>class>类选择符

（七）、CSS控制文本

（八）、CSS控制链接

三、CSS高级

（一）、CSS选择符的详细使用

1、类型选择符：

就是html文档中的元素[作用于html标记]。如：p{属性：值}

2、类选择符：

可以自己定义样式，应用于一个或多个网页元素，类在网页中可以出现多次，用于定义重复的样式。类以英文.开头，后面的名字自己定义，类定以后还需要在网页中加入"class=类名称"，加以调用。如： .waring{属性：值} <p class="waring">...</p>

3、ID选择符：

与类基本相似，只是以英文#开头，因为ID具有唯一性，所以在网页中只能出现一次，用于定义只出现一次的样式。如： #main{属性：值} <p ID=main></p>

4、通配选择符：

用于定义所有元素。如：*{属性：值}

5、包含选择符：

所有被e1包含的e2。如：table td{属性：值}
同时给某个元素应用多个类和ID。如：<p class="a1 a2" id="a6">...</p>

6、选择符分组：

将同样的样式定义用于多个选择符，选择符之间用逗号隔开。如：body，div，p{属性：值}

7、标签指定式选择符：

如果既想使用id或class，也想使用标签选择符，那么，

h1#content{}：表示针对所有id为content的h1标签；
h1.content{}：表示针对所有class为content的h1标签；

8、组合选择符：

将以上选择符组合使用，那么，

h1 .content{}：表示在h1下所有class为content的标签；
h1 .content，#content h1{}

（二）、CSS常用属性

1、CSS控制边框属性：

功能	语法
设置边框粗细	border-top-width：12px
设置边框样式	border-bottom-style：slide（实线）、dashed（虚线）
设置边框颜色	border-right-color：#000000
设置某一边框的属性	border-边框位置：线宽线型颜色
设置四条边的属性	border：线宽线型颜色

2、CSS控制背景：

功能	语法
背景	background：颜色图片平铺方式固定方式位置
背景颜色	background-color：#ccc
背景图片	background-image：url
背景图片的重复方式	background-repeat：【repeat，no-repeat，repeat-x，repeat-y】
背景图片的依附方式	background-attachment：【scroll，fixed】
背景图片的位置	background-position：top【left、center、right】 center【left、center、right】 bottom【left、center、right】，x坐标y坐标（左上角是0，0，单位是像素px）

3、CSS控制列表：

功能	语法
列表属性	list-style：list-stylet-ype list-style-position list-style-image
列表项目类型	list-style-type：none，disc，circle，square，decimal，lower-roman，upper-roman，lower-alpha，upper-alpha
列表项目位置	list-style-position：inside，outside
列表项目图片	list-style-image：url，none

4、CSS控制元素的尺寸：

功能	语法
设置元素的宽度	width：100px
设置元素的高度	height：100px
设置元素最小宽和高	min-width：50px，min-height：50px
设置元素最大宽和高	max-width：50px，max-height：50px
设置元素的外边距	margin：上右下左
设置元素的内边距	padding：上右下左

四、CSS+DIV布局

（一）、网页元素分类

1、div是什么？

div是一个容器，能放置内容，例如：<div>内容</div>。

说明：XHTML中每一个标签对象几乎都可以成为一个容器，例如：<h1>标题</h1>。

div是xhtml中指定的，专门用于布局设计的容器对象。CSS布局中，div是这种布局的核心对象，做一个简单的布局只需要两样东西div与css，因此也有人称CSS布局为div+css布局。

（二）、盒子模型

1、盒子模型：W3C组织建议把所有网页中的对象都放到一个盒子中。

设计师可以通过创建定义来控制这个盒子的属性，这些对象包括段落、列表、标题、图片及层<div>。

2、盒子模型主要定义这四个区域：内容（content）、填充（padding）、边框（border）、边界（margin）。

3、整个盒子模型在页面中所占的宽度：左边界+左边框+左填充+内容+右填充+右边框+右边界。

示意图如下：

3D示意图如下：

（三）、CSS布局

1、元素的分类：不同的元素在文档类型定义DTD（Document Type Difinition）内有默认的分类，可以通过css修改分类的定义。

【1】、块级元素：{display：block}

每个块级元素都从一个新行开始，而且其后的元素也需要另起一行开始，如：div[层]、标题、段落、表格、body等；
块级元素只能作为其他块级元素的子元素，而且需要一定的条件；

【2】、内联元素：{display：inline}

内联元素不需要在新行显示，而且也不强迫后面的元素换行，如：a、em、span等；
内敛元素可以作为任何元素的子元素；

【3】、隐藏元素：{display：none}

当某个元素被设置为display：none时，浏览器会完全忽略这个元素，此元素将不会被显示；

2、浮动与清除浮动

【1】、浮动（float）

浮动（float）是CSS实现布局的一种方式，包括div在内的任何元素都可以浮动的方式展示。

值：

none：不浮动
left：对象向左浮动，而右侧的内容流向对象的右侧
right：对象向右浮动，而左侧的对象内容流向对象的左侧

【2】、浮动的清理（clear）

清理时浮动的又一个有用的工具，实现拒绝浮动对象对后面对象的影响。

技巧：

当浮动了许多元素之后，突然需要另起一行时，可以制作一个空白的div标签，为其设置clear：both清楚左右的浮动

【3】、溢出（overflow）

设置当前对象的内容超出其指定高度和宽度时，如何管理内容。

visible：默认值，不剪切内容，也不添加滚动条；
auto：在必须时，对象内容才会被剪切，或显示滚动条；
hidden：不显示超过尺寸的内容；
scroll：总是显示滚动条；

【4】、定位（position）

设置对象的定位方式。

static：静态定位，页面中没一个对象的默认值；
absolute：绝对定位，将对象从文档流中分离出来，通过设置left、right、top、bottom四个方向，相对于父级元素进行绝对定位；
relative：相对定位，对象不从文档流中分离出来，通过设置left、right、top、bottom四个方向，相对于自身位置进行相对定位；

4、CSS布局方式

默认文档流方式：以默认的html元素的结构顺序显示；
浮动布局方式：通过html元素的float属性显示；

定位布局方式：通过设置html元素的position属性显示；

#box{

width:300px;

height:300px;

position:relative;

}

#first{

width:300px;

height:300px;

position:absolute;

top:10px;

right:20px;

}

#second{

width:300px;

height:300px;

position:absolute;

top:100px;

left:200px;

}

</div>

5、清除浮动的方式

【1】、额外标签法：w3c推荐，在浮动元素的最后添加一个空标签

.clear{

clear:both;

}

</div>

【2】、overflow方法：

#box{

width:300px;

height:300px;

overflow:hidden;

}

</div>

【3】、利用伪对象after方法（网上最流行的清除浮动代码）

.clearFix：after{

clear:both;

display:block;

visibility:hidden;

height:0;

line-height:0;

content:"";

}

.clearFix{zoom:1}

第三部分：JavaScript

一、JavaScript简介

1、JavaScript概述

JavaScript是基于对象和事件的脚本语言。

特点：

安全性（不允许直接访问硬盘），他可以做的是信息的动态交互。
跨平台性。（只要是可以解释执行JS的浏览器都可以执行，和平台无关）

2、JavaScript和Java的不同之处

JS是Netscape公司的产品，Java是SUN（现在是Oracle）公司的产品。
JS是基于对象，Java是面向对象。
JS只需要解释执行，Java需要先编译成字节码文件，再执行。
JS是弱类型，Java是强类型。

3、JavaScript和HTML结合的方式

想要将其他代码融入html中，都需要以标签的形式

代码放在<script>...</script>标签中
使用script标签的src属性引入一个js文件，方便后期更新，及维护。例如：<script type="javascript" src="test.js"></script>

二、JavaScript语法

1、变量

通过关键字var来定义，弱类型即是不用指定具体类型。

例如：var x = 12； x = "hello"；

注：JS中特殊的常量undefined，当变量没有初始化就被使用，该变量的值就是undefined（未定义）。

2、语句

判断结构（if语句）

注：在JS中0就是false，非0就是true（通常用1表示）

选择结构（switch语句）

注：没有具体类型限制

循环结构（while语句，do...while语句，for语句）

3、函数

一般函数

格式：

function 函数名（形式参数...）

{

执行语句；

renturn 返回值；

}

函数是多条语句的封装体，只有被调用才会被执行。

注意：调用有参数的函数，但没有给其赋值，函数一样可以运行；或者调用没有参数的函数，给其传值，也一样运行。简单地说，只要写了函数后面的小括号，函数就可以运行。

其实，在函数中有一个参数数组对象（arguments），该对象将传递的参数都封装在一个数组中。例如：

function demo（）{

alert（arguments.length）；

}

demo（123，"hello"，true）；//调用函数，弹出对话框的结果为3。

通过for循环遍历该数组，如：

for（var x=0；x<arguments.length；x++）{

alert（arguments[x]）；

}

函数在调用时的其他写法：

var show = demo（）//show变量接收demo（）函数的返回值

var show = demo //这种写法是可以的，意为show和demo是一个函数，那么该函数也通过show（）的方式运行

动态函数

通过JS的内置对象function实现，例如：

var demo = new function（"x，y"；"alert（x+y）"；）；

demo（4,6）；

和一般函数不同的是，动态函数、参数及函数体都可以通过参数传递，动态指定。

匿名函数

格式：function（）{...}，例如：

var demo = function（）{...}

demo（）；

通常在定义事件属性的行为时，较为常用。

匿名函数就是一种简写格式。

4、数组

方便操作多元素的容器，可以对其中的元素编号。

特点：可以存任意元素，长度是可变的。

格式：

var arr = new Array（）；

arr[0] = "hello"；

arr[1] = 123；

var arr =["hello"，123，true，"abc"]；

for(var x=0；x<arr.length；x++){

alert(arr[x])；

}

5、对象

JS除了已经提供的内置对象外，也可以自定义对象。

例如：

function Person(){}

var p = new Person()；

p.name = "zhangsan"

p.age = 13；

p.function(){

alert("run")；

}

或：

funtion Person(){

this.name = name；

this.age = age；

}

var p = new Person("zhangsan"，13)；

with语句

格式：

with（对象）{}

应用：

当调用一个对象中多个成员时，为了简化调用，避免"对象. "这种形式的重复书写，可以写成：

var p = new Person(“zhangsan”,20);

with(p)

{

alert(name+”,”+age);

}

with语句定义了某个对象的作用域，在该域中可以直接调用该对象的成员。

for...in语句

用于遍历对象属性。

例：

var p = new Person(“zhangsan”,20);

for(x in p){

alert(x);//结果是两个对话框，一个是name，一个是age。

alert(x+”:”+p[x]);//可以得到属性与属性的值。p[x]:p对象就是个数组，要通过指定的元素名获取元素的值。

}

三、window对象

1、navigator对象

appName属性：浏览器的名称
AppVersion属性：浏览器的版本号

2、location对象

href属性：获取或者设置地址

3、screen对象

height与availHeight属性：获取屏幕的高度，是否去除任务栏
width与availWidth属性：获取屏幕的宽度，是否去除任务栏

4、event对象

keyCode属性：获取键盘按键
returnValue属性：获取或者设置某个属性的返回值
srcElement属性：获取某个事件的源对象

5window方法

confirm：弹出一个确认对话框，返回值的值为true或false
focus：使某个元素获得焦点，并执行onfocus时间制定的代码
moveBy与moveTo：移动
open：打开窗口，可以制定标题、打开方式、窗口属性（标题栏、滚动条、可变大小等）
prompt：显示一个提示框，有一条消息和一个输入框
setTimeout与clearTimeout：间隔多长时间之后执行
setInterval与clearInterval：每间隔多长时间执行

YongJia_Li

关注

11
点赞
踩
94

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JavaScript基础知识

第一部分：HTML一、简介HTML1、HTML（Hyper Text Mark-up Language超文本标记语言）的缩写（标记：就是用来描述网页内容的一些特定符号）。HTML不是编程语言，而是一种描述性的标记语言，用于描述网页内容的显示方式，比如文字的颜色、大小，这些都是利用html标记来实现的。2、HTML文档的创建方式：手工直接编写（例如记事本）
复制链接

扫一扫