网页设计与制作教程

国字型是最常见的一种布局方式其上方为网站标题和广告条，中间为正文，左右分列两栏，用于放置导航和工具栏等，下方是站点信息。

与“国字型”相似，上方为标题和广告条，中间左侧较窄的一栏放超链接一类的功能，右侧为正文下面为站点信息。

这种结构的布局方式比较简单主要用于突出需要表达的重点通常最上方为通栏的标题和导航条，下方是正文部分。

常用于显示宣传网站首页，常以精美大幅图像为主题，设计方式多为Flash动画。

网页安全色是红色、绿和蓝色。

颜色值最常见的表达方式是十六进制

颜色值可以采用6位的十六进制来进行表示，并且需要在前面加上特殊符号“#”

采用相近色配色

采用近似色配色

name属性主要用于描述网页摘要信息，与之对应的属性值为content

keywords用来告诉搜索引擎网页使用的关键字。

description 用来告诉搜索引擎网站主要的内容

<br/>放在任意一行中都会使该行换行

<hr align="left I center l right" size ="横线粗细" width="横线长度”color ="横线色彩”noshade="noshade" />

<pre>可以让tab键，换行键，空格键全部有效

<blockquote>标签可定义一个块引用

<blockquote>与</ blockquote>之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

使用<a>标签来建立一个链接，通常<a>标签又称为锚。建立超链接的标签以<a>开始，以</a >结束

建立超链接时，href属性定义了这个超链接所指的目标地址，也就是路径。如果要创建
个不链接到其他位置的空超链接，可用“#”代替URL。

属性target：设定链接被单击后所要开始窗口的方式有以下4种：
（1）blank。在新窗口中打开被链接的文档。
（2）self。默认值。在相同的框架中打开被链接的文档。
（3）parent。在父框架集中打开被链接的文档。
（4）top。在整个窗口中打开被链接的文档。

在当前页面与其他页面建立超链接，根据目标文件和当前文件的目录关系有4种写法（采用相对路径）

1.链接到同一目录：<a href="目标文件名.html">热点文本</a>

2.链接到下一级目录：<a href="子目录名/目标文件名.html">热点文本</a>

3.链接到上一级目录：<a href="../目标文件名.html">热点文本</a>

4.链接到同级目录：<a href="../子目录名/目标文件名.html">热点文本</a>

用<a>标签对网页元素做一个记号，类似于用于固定船的锚，所以书签也叫锚记或锚点。在<a>标签的name属性中定义：<a name="记号名">目标为文本附近的内容</a>

1.指向页面内容书签的超链接。需要定义两个标签：一个超链接标签，一个书签标签

2.指向其他页面书签。需要定义两个标签：一个是当前页面超链接书签，一个是跳转页面的书签标签

<a href="文件名.zip">下载</a>

<a href="mailto:邮箱号">联系我</a>

GIF

JPEG

PNG

高质量的图像因其图像体积过大，不太适合网络传输。

网页中的动画并非越多越好，页面中应合理使用动画，太炫酷的动画会分散网站访客的注意力。

.如果在同一文件中多次使用相同的图像时，最好使用相对路径查找该图像。相对路径是相对于文件而言的，从相对文件所在目录依次往下直到文件所在的位置。

1.cellspacing：值的单位为像素或百分比，默认值为2px。

2.cellpadding：值的单位为像素或百分比。

使用单元格td标记的rowspan属性可以设置单元格跨行合并。

<td rowspan="行数">….</td>

使用单元格td标记的colspan属性可以设置单元格跨列合并。
语法：

<td colspan="列数">·...</td>

语法：

<input name="" type="text" maxlength="" size="" value="" readonly/>

说明：单行文本输入框的主要属性有 name，maxlength,size,value和readonly

<input name="" type="password" maxlength="" size=""/>

说明：密码输入框的主要属性有 name，maxlenth和size，取值及说明与单行文本输入框相同

语法：

<imput name="" type=" checkbox" value=" "checked/>

说明：复选框的主要属性有 name，value 和checked，其中 checked属性用于设置初饰选项

语法：

<input name="" type="radio" value="" checked/>

单选按钮必须是唯一的，在一组单选按钮中，只能选择一个单选按钮，所以一组单选按钮的所有name属性值必须相同，value属性取值应该不同。

语法：

<input name="" type="image" src="" width="" height=""/>

语法：

<input name="" type="submit"value="提交"/>

一定要给value 属性赋值。

语法：

<input name=" "type="reset" value =""/>

说明：重置按钮的属性主要有name和value，其属性、取值及说明与提交按钮的相同。

语法：

<input name="" type="button" value="" onclick=""/>

语法：

<input name=""type="file" value=""/>

语法：

<input name="" type="hidden" value=""/>

CSS通过定义HTML标记如何显示控制网页的格式，使得页面内容和表现分离，简化了
网页格式设计，也使得对网页格式的修改更方便。

CSS样式属性提供了比HTML更多的格式设计功能。例如，可以通过CSS样式去掉网页
中超链接的下划线，甚至可以为文字添加阴影效果等。

将CSS样式定义到样式表文件中，然后在多个网页中同时应用样式表文件中的样式就可以确保多个网页具有一致的格式，并且可以随时更新样式表文件，实现自动更新多个网页的格式功能，从而大大降低网站的开发与维护的成本。

存放CSS样式文件的目录一般命名为style或css

在项目初期，会把不同类别的样式放于不同的CSS文件，是为了CSS编写和调试的方便；在项目后期，为了网站性能上的考虑，会将不同的CSS文件整合到一个CSS文件中，这个文件一般命名为style.css或css.css。

所有选择器必须由小写英文字母或下划线组成，必须以字母开头，不能为纯数字。

css以“/*”开始，“*/”结束，注释可以是单行也可以是多行。

代码缩进可以保证CSS代码的清晰可读。在实际应用中，可以按一次Tab键来缩进选择器，按两次Tab键来缩进声明和结束大括号。这样的排版规则便于查询，避免代码混乱。

selector{ property1: value1; property2:value2; property3: value3;...}
选择器（属性1：属性值1；属性2：属性值2；属性3：属性值3；)

（1）选择器：选择器可以是HTML标记名称或者属性的值，也可以是自定义的标识符。         

(2）属性/属性值对。“属性：属性值”必须一一对应，属性与属性值之间必须用“：“连接，每个属性/属性值对之间用分号（；）隔开。

（3）属性：在CSS中对属性命名与脚本语言中有一点不同，即属性名称的写法，在CSS中，凡是属性名为两个或两个以上的单词构成时，单词之间以连词符号（一）分隔，例如背景颜色属是background-color；而在脚本语言中，对象属性则连写成 backgroundColoro在脚本语言中，属性由两个以上单词构成，则从第二个单词开始向后，所有单词首字母必须大写。                               

  (4)复合属性：在css中有些属性可以表示多个属性的值。

（5）多个属性指：在css中有些属性可以设置多个属性的值 。   

标记选择器也可以叫元素选择器即直接使用HTML标记名称作为选择器，它定义的样式作用于页面之中所有与选择器同名的标记

class选择器也叫"类"选择器，可以给指定标签设置一个class属性和class值如何通过class选择器找到对应的标签，设置class值，即添加css样式。

用于对某个单一元素的样式，ID选择器在HTML中使用一次，针对性更强，定义ID选择器时需要在id名称前加一个#。

特别注意：a：hover 必须位于a：link和a：visited之后，才有效；a：active 必须位于a:hover 之后才有效

集体声明代码如下:
h3 .h4,h5,p{

color:red ;

font-size: 18px;

}

对于实际网站中的一些小型页面，例如弹出的小对话框和上传附件的小窗口等，希望这些页面中所有的标记都使用同一种CSS样式，但又不希望通过逐个加入集体声明列表的方式。这时可以利用全局声明符号“*”，代码如下.



*{
color: red;
font-size:18px;
}

根据标记所在位置的上下文关系来定义样式，可以使标记更加简洁，派生选择器允许根据文档的上下文关系来确定某个标记的样式。通过合理地使用派生选择器，可以使CSS代码变得更加整洁。例如，要让列表项<li>中的<strong>标记变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：
li strong { font-style ; italic;font-weight; normal;}
strong { font-weight:bold;}

<标记 style=“属性1：属性值 1;属性 2：属性值2；…">修饰的内容</标记>

(1)标记是指HTML标记，如p，hl和body等标记;
(2)标记的style定义的声明只对自身起作用；
(3)style 属性的值可以包含多个声明，每一声明之间用“；”分隔;
(4标记自身定义的style样式优先于其他所有样式定义。

<style type="text/css">
选择器1{属性 1:属性值 1;属性 2:属性值2;…}
选择器2{属性 1:属性值 1;属性 2:属性值2;…}
选择器n{属性 1:属性值 1;属性 2:属性值2;…}
</ style>

style 标记是成对标记，有1个type 属性是指style元素以CSS的语法定义。
选择器1,选择器n，可以定义n个选择器，再定义声明部分。
属性和属性值之间用冒号连接，“属性/属性值”对之间用分号分隔。

链接式是将所有的样式放在一个或多个以“.css”为扩展名的外部样式表中，通过网页的<head></head标签中使用<link>标记将外部样式表文件链接到HTML文档中。

（1）基本语法：

<link type="text/css" rel="stylesheet" href="外部样式表名.css"

导入式是将一个独立的CSS文件导入HTML文档中，其是在FTME，文档《hes中应用
style>标签，并在<style>标签中的开头处用@import语句，即可导入外部样式表文件。

（1）基本语法：

<style type=" text/css">
@import url("CSS文件路径");
/*此处还可以存放其他CSS样式*
</style>

其指以该属性的前一个属性的单位值为基础来完成目前的设置，在浏览器内常用且支持的两种长度单位是以相对类型出现的。如用cm（当前字母中，字母的宽度）作为属性单位时，将会依据父元素的font-size 属性，如果没有父元素，则参考浏览器的默认值字号。

div{
color:#FF0000;
}

x,y,z分别是红,绿,蓝的值x，y，z属于[0,255],也可以用百分比表示。

margin-top:length|percent|auto

参数：length包括长度值和长度单位，包括绝对单位和相对单位。percent 是基于父对等的高度。auto值为自动提取边距值，是默认值。
说明：设置对象上外边距，外边距始终透明。内联元素要使用该属性，必须先设定元的height属性或width属性，或者设定position 属性为absolute。

margin-right：length | percent | auto

margin-bottom：length | percent |auto

margin-left:length | percent | auto

margin-left:length | percent | auto

行级元素的盒子相遇，盒子和盒子之间的距离等于两个盒子外边距的总和。

块级元素的盒子相遇，盒子和盒子之间的距离等于两个盒子中外边距的较大者

border-top:border-style | border-width | border-color

border-right:border-style | border-width | border-color

border-bottom：border-style | border-width | border-color

border-left：border-style | border-width | border-color

在CSS中，边框颜色是通过border-color 属性来设置的，该属性可以使用色值，包括用颜色命名的值、十六进制参数或RGB值。但是如果对象的boder。none 或者border-width设置为0，本属性将失去作用。

/* 圆角边框 */
border-radius: 25px;

/*阴影边框 右偏移 下偏移量 宽度 颜色*/
box-shadow: -20px 10px 30px #ffff00;

/* 图片绘制边框 */
}
img{
width: 40px;
height: 30px;
}

参数：length为百分比或者由数字和单位标识符组成的长度值，position 可取top，center、bottom、left、right之一。

关键字参数的取值及含义如下：
top：将背景图像同元素的顶部对齐。
bottom：将背景图像同元素的底部对齐。
left：将背景图像同元素的左边对齐。
right：将背景图像同元素的右边对齐。
center：将背景图像相对于元素水平居中或垂直居中。

/* 6.3.5.2.使用长度进行背景定位 */
background-position: 20px 50px;

使用百分比进行背景定位，其实是将背景图像的百分比指定的位置和元素的百分比值置
对齐。

文本域主要用于采集用户在其中编辑的文字信息，通过CSS样式可以对文本域内的字体，颜色以及背景图像加以控制。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本域修饰</title>
<style type="text/css">
.text1{
border: 1px solid #f60;
color: #03c;
}
.text2{
border: 1px solid #c3c;
height: 20px;
background: #fff url(img/password_bg.JPG)left center no-repeat;
padding-left: 20px;
}
.area{
border: 1px solid #00f;
overflow: auto;
width: 99%;
height: 100px;
}
</style>
</head>
<body>
<p>
<input type="text" name="nornal"/>
默认样式的文本域
</p>
<p>
<input name="chbd" type="text" value="输入的文字显示为蓝色" class="text1"/>
改变边框颜色和文字颜色的文本域，看起来更加醒目。
</p>
<p>
<input name="pass" type="password" class="text2"/>
增加了背景图片的文本域，看起来更加形象直观。
</p>
<p>
<textarea name="cha" cols="45" rows="5" class="area">
改变边框颜色的多行文本域
</textarea>
</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按钮修饰</title>
</head>
<style type="text/css">
.btn01{
background: url(img/btn_bg02.jpg)repeat-x;
border: 1px solid #f00;
height: 32px;
font-weight: bold;
padding-top: 2px;
cursor: pointer;
font-size: 14px;
color: #fff;
}
.btn02{
background: url(img/btn_bg03.jpg) 0 0 no-repeat;
width: 107px;
height: 37px;
border: none;
font-size: 14px;
font-weight: bold;
color: #d84700;
cursor: pointer;
}
</style>
<body>
<p>
<input name="button" type="submit" value="提交"/>
默认风格的“提交”按钮
</p>
<p>
<input name="button01" type="submit"
class="btn01" id="button" value="自适应宽度按钮"/>
自适应宽度按钮
</p>
<p>
<input name="button02" type="submit"
class="btn02" id="button2" value="免费注册"/>
固定背景图片的按钮
</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>制作登陆表单</title>
<style type="text/css">
.login{
margin: 0 auto;
width: 280px;
padding: 14px;
border: dashed 2px #b7ddf2;
background: #ebf4fb;
}
.login *{
margin: 0;
padding: 0;
font-family: 宋体;
font-size: 12px;
line-height: 1.5em;
}
.login h2{
text-align: center;
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: solid 1px #b7ddf2;
}
.login.content{
padding: 5px;
}
.login.frm_cont{
margin-bottom: 8px;
}
.login.username input,.login.password input{
width: 180px;
height: 18px;
padding: 2px 0px 2px 18px;
border: solid 1px #aacfe4;
}
.username input{
background: #fff url(img/username.JPG) no-repeat left center;
}
.password input{
background:#fff url(img/lock.JPG) no-repeat left center;
}
.login.btns{
text-align: center;
}
</style>
</head>
<body>
<div class="login">
<h2>用户登录</h2>
<div class="content">
<form action="" method="post">
<div class="frm_cont username">用户名
<label for="username"></label>
<input type="text" name="username" id="username"/>
</div>
<div class="frm_cont password">密&nbsp;&nbsp;码
<label for="password"></label>
<input type="password" name="password" id="password"/>
</div>
<div class="btns">
<input type="submit" name="button1" id="button1" value="登录"/>
<input type="button" name="button2" id="button2" value="注册"/>
</div>
</form>
</div>
</div>
</body>
</html>

<audio>标签定义声音，比如音乐或其他音频流，此标签默认是隐藏的。
<audio>标签允许包含多个<source>标签，<source>标签可以链接不同的音频文件，浏览
器将使用第一个可识别的格式。

<audio controls="controls">
<source src="media/Easy. ogg" type="audio/ogg" ></source>
<source src="media/铃铛.mp3" type="audio/mp3"></source>
您的浏览器不支持audio元素。                                                                 </audio>

<video>标签定义视频，例如电影片段或其他视频流。<video>标签在页面中嵌入视频的
代码格式和<audio>标签的使用相似。

<nav>标签是HTML5新增的文档结构标签，用于标即导航栏，以便后续与网站的其他其内容整合，使用常用<nav>标签在页面上创建导航栏菜单区域。

可以利用CSS在<head>标签中进行声明，对列表样式进行改变。

利用CSS为超链接重新设置样式，例如对a：link，a：visited进行设置，表示链接未被访问和已被访问的状态。

利用CSS为a：hover，a：active进行样式设计，表示鼠标悬停和活动链接状态的样式变化。

仍然是在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<ul>和有
列表<ol>标签，配合列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接
地址当前设置为空链接。

此时会带有<ul>元素的实心点标记，及<ol>元素的阿拉伯序号，可以利用CSS在<head>
签中进行声明，对列表样式进行改变。
同样，使用 list-style-type属性去掉默认标记，设置margin和padding 属性为0，为<li>
袜选项定义浮动效果，设置 text-decoration属性 none。这里使用通配符“*”整体设置。

为了使有序列表的二级菜单隐藏起来，需要设置display 属性为 none。
为了鼠标悬停一级菜单时可以显示二级菜单，需要设置有序列表的display属性为block。
为了二级菜单能在从属的一级菜单正下方显示，需要设置二级菜单的绝对定位及一级菜
单的相对定位。

对内容所处的div进行样式设置。

利用CSS为超链接重新设置样式，例如对a：link，a：visited进行设置，表示链接未被访问和已被访问的状态。将display属性设置成block，使超链接成为块级元素。

利用CSS为无序列表项li：hover和有a:hover进行样式设计，表示鼠标悬停状态的样式变化。

普通的纵向导航同样可以使用超链接和列表元素来实现，只需要将文字链接设置成块级素。区别于水平导航栏，纵向导航栏不需要设置列表选项<li>的浮动属性。
在<nav>的首尾标签之间使用<div>标签创建菜单范围，结合无序列表<ul>标签和列表选项>标签创建菜单选项。

对导航栏所处的div样式进行设置，包括宽度、边框和背景，同时对大标题文字的CSS进行设置，包括高度、行高、颜色和对齐方式。

此时列表选项还带有<ul>元素的默认实心圆点样式，需要使用 ist-style-type属性去掉默认标记，设置 margin 和 padding的属性值。并同时给列表选项添加背景颜色，使大小标题容易区分。

利用CSS为超链接重新设置样式，对超链接的a： link和a：visited进行设置，表示超链接未被访问和已访问状态。同时，利用CSS为a：hover和a：active 进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。并且，将display属性设置为block，使得超链接成为块级元素，以及字体CSS样式的设置。

在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<ul>和有序列表<li>标签，配合列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接地址当前设置为空链接。

对导航栏所处的div样式进行设置，包括宽度、边框和背景，同时对大标题文字的CSS进行设置，包括高度、行高、颜色和对齐方式。

为了使有序列表的二级菜单隐藏起来，需要设置display属性为 none。
为了鼠标悬停一级菜单时可以显示二级菜单，需要设置有序列表的display属性为block。
为了二级菜单能在从属的一级菜单正右方显示，需要设置二级菜单的绝对定位及一级菜单的相对定位。

此时列表选项还带有<ul>元素的实心圆点样式，及<ol>元素的阿拉伯序号，需要使用list-style-type属性去掉默认标记，设置margin 和 padding的属性值。并同时给列表选项添加背景颜色，使大小标题容易区分。

利用CSS为超链接重新设置样式，对超链接的a； ink和a：visited进行设置，表示超链接未被访问和已访问状态。同时，利用CSS为a: hover和a:active 进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。并且，将display属性设置为block，使得超链接成为块级元素，以及字体CSS样式的设置。

宽度：width

高度：height

width: 300px;
height: 100px;

width: 300px;
height: 100px;

如果把div的宽度设置了百分比，则相对其父元素相应改变宽度，但是div的高度则无法根据百分比相应改变

JavaScript是一种脚本语言，采用小程序段的方式实现编程。像其他脚本语言一样，JavaScript同样是一种解释性语言，提供了一个简易的开发过程。

JavaScript是动态的，可以直接响应用户或客户的输入，无须经过Web服务程序，通过事动来响应用户的请求。

JavaScrip依赖浏览器，与操作环境无关，只要能运行浏览器的计算机、支持 JavaSeript的浏览器就可以正确执行。

JavaScript是一种安全性语言，不允许访问本地的硬盘，并不能将数据存入到服务器上不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，可有效地防止数据的丢失。

JavaScript是一种基于对象的语言，同时可以看作是一种面向对象的语言。这意味着它能将特定功能封装在对象中。

script标记放在头部head标记中，通JavaScript代码必须定义成函数形式，并在主体body标记内调用或通过事件触发。放在head标记内的脚本在页面装载时同时载入，这样在主体标记内调用时可以直接执行，提高了脚本执行速度。

function functionname(参数1，参数2，.…，参数n）{
函数体语句；

}

JavaScript 自定义函数必须以 function 关键字开始，然后给自定义函数命名，函数命名时一定遵守标识符命名规范。函数名称后面一定要有一对括号“（）”，括号内可以有参数，也可以无参数，多个参数之间用逗号“，”分隔。函数体语句必须放在大括号“（）”内。

scnipt标记放在主体body标记中，JavaScript代码可以定义成函数形式，在主体body标记内调用或通过事件触发。也可以在script标记内直接编写脚本语句，在页面装载时同时执行相关代码，这些代码执行的结果直接构成网页的内容，在浏览器中可以查看。

除了将 JavaScript代码写在 head和body部分以外，也可将 JavaScript函数单独写成个js文件，在HTML文档中引用该js文件。

JavaScript代码除了上述三种放置位置外，还可直接写在事件处理代码中。

在 JavaScript 语言中，对大小写是敏感的，这在现在的很多开发语言中都是如此，所以读者要养成一种良好的习惯，这样就可以避免调试程序时遇到这些低级错误。

avacript中变量声明，采用其弱类型，即变量在使用前无须进行变量数据类型声明，而由解释器在运行时检查其数据类型，例如：
x=1234；
y="1234"
根据JavaScript变量的申明方式，可知前者说明x为数值型变量，而后者说明y为字符串型变量。

在JavaScript 里面每条语句结尾的分号“；”不是必要的，如果多个语句写在一行上，那么语句之间的分号“；”才是必需的，最后一条语句的分号“；”可以省略。为了养成良好的编程习惯，建议还是在每条语句后面加上分号。

注释就是对代码的解释和说明，目的是为了让别人和自己容易读懂程序。JavaSeript的
注释形式与C、C++、Java等语言相同，格式如下：
//单行注释
/*
多行注释
*/

标识符是计算机语言中用来表示变量名、函数名等的有效字符序列，简单来说，标识符就是一个名字，JavaScript关于标识符的规定如下：
（1）必须使用英文字母或者下划线开头。
  (2)必须使用英文字母、数字、下划线组成，不能出现空格或制表符。
（3）不能使用JavaScript关键字与JavaScript保留字。
  (4)不能使用JavaScript语言内部的单词，比如 Infinity,NaN，undefined等
（5）大小写敏感，如name和Name 是不同的两个标识符。
合法的标识符：Hello、_12th、sum、Dog23等。
不合法的标识符：if、3com、case、switch等。

var count;                                        //单个声明
var count,amount,level;                  //用单个var关键字声明的多个变量
var count =0,amount=100;              //一条语句中的变量声明和初始化

JavaScript有6种数据类型，主要的类型有 Number 数值型、String字符型、Object对象以Boolean 布尔型，其他两种类型为Null 和Undefined
 (1） Number 数值型。JavaScript支持整数和浮点数。整数可以为正数。0或负数：浮点食包含小数点，例如3.53、-534.87等都是浮点数。浮点数还可以采用科学计数法进行表、如3.5EI5表示3.5×10”。

（2）String字符型。字符型数据又称为字符串型，由若干个字符组成，并且用单引号或双引号封装起来，例如：”你好！" " this is string" "学习语言”。
        在使用字符串的过程中，有时会遇到一种情况：在一个字符串中需要使用单引号或双引号。正确的方法是在由双引号标记的字符串中引用字符时使用单引号，在由单引号标记的字符串中引用字符时使用双引号，即单引号、双引号必须成对使用相互包含，但不能交叉。
例如：
"热烈欢迎参加'JavaScript技术'研讨的专家"；         //正确的用法
"学习不是一件容易”的事件"；                                //错误的用法
（3） Boolean 布尔型。Boolean 值有 true 和false，这是两个特殊值，可以将他们转操为其他类型的数据，例如可将值为true 的布尔型数据转换为整数1，而将值为false的布尔型数据转换为整0。但不能用tne 表示1或false 表示0。
（4）Undefined数据类型。JavaScript会对未赋值变量赋值为 undefined。
（5）Null 数据类型。这是一个对象，但是为空。因为是对象，所以 typed mIl 返"Objce!"，注意null 是Javascript 保留关键字。
（6）Object类型。除了上面提到的各种常用类型外，对象类型也是JavaSpe中的重要的组成部分。

子主题

子主题

赋值运算符是JavaScript中使用频率最高的运算符之一。赋值运算符要求其左操作数是个变量、数组元素或对象属性，右操作数是一个任意类型的值，可以为常量、变量、数组元家或对象属性。赋值运算符的作用就是将右操作数的值赋给左操作数。用赋值运算符和操作数迩接起来符合规则的式子，称为赋值表达式。

条件运算符是一个三元运算符，条件表达式由条件运算符和三个操作数构成。
语法：

变量=表达式1？表达式2：表达式3
说明：
该条件表达式表示，如果表达式1的结果为真（true)，则将表达式2的值赋给变量，
否则将表达式3的值赋给变量。例如，变量 mumber 1、number2比较大小，将较大的数赋值
给变量max，代码如下：
var max=(numberl>number2)? numberl :number2;

逗号运算符是一个二元运算符，逗号运算符的优先级最低，由逗号运算符和操作数连接
起来符合规则的式子，称为逗号表达式，其运算规则是先计算第一个表达式的值，再计算第
二个表达式的值，依次类推，计算完所有表达式的值，运算结果为最后一个表达式的值。
例如：
var rs=(3+5，10*6)；/*先计算第一个表达式3+5的值为8，再计算第二个表达式10*6的值为60、
最后将第二个表达式的值60赋给变量rs*/

{
        /*条件为真执行的语句*/
}
else
{
        /*条件为假执行的语句*/
}

switch(表达式)
{
case case1:执行语句1;break;
case case2:执行语句2;break;
case case3:执行语句3;break;
default:默认执行语句;

for(变量=开始值；变量<=结束值；变量=变量+步进值）
{
/ *循环体语句 */
}

white（条件）{

/*循环体语句*/
}

do
{
/*循环体语句*/
}

function 函数名(varl，var2，var3)
{
/*函数代码*/
}

需要返回某个值的函数必须使用 retum语句。                                                                                  例如：

function sum(a,b)
{
    x=a+b；
    return x；
}

函数的调用很简单，可以通过其名字加上括号中的参数进行调用。如调用上面的sum函数，可以这样写：sum（5，8）。

JavaScript 编程是使用“面向对象”的概念，也称为“对象化编程”。JavaScript“面向对象编程”的意思就是把 JavaScript能涉及的范围划分成大大小小的对象，对象下面还继续划分对象，所有的编程都以对象为出发点，基于对象，小到一个变量，大到网页文档、窗口甚至屏幕，都是对象。
        在JavaScript里面可以创建自己的对象，但在创建用户自定义对象前，需要先学习创建的JavaScript对象，以及如何使用它们。本节后续开始将具体地依次讲解JavaScript的内建对象。
        在JavaScript里面创建一个新的空对象，例如：
var o= new object();

JavaScript 内建对象的属性可以参阅相关的技术文档，当然在Visual Studio平台中由于有智能感应功能，就可以很方便地访问对象的属性。

方法指对象可以执行的行为（或可以完成的功能），与属性相同，JavaScript内建对象本就自带了很多功能强大的方法，可以直接调用来完成某些特定的功能

window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript中，window对象是全
局对象，所有的表达式都在当前的环境中计算。

document本身是一个对象，但又是JavaScript中 window对象和 frames 对象的一个属性，
其描述当前窗口或指定窗口对象的文档。它包含文档从<head>标签到</body>标签的全部内容。
用法为document或<窗口对象>.document，其中 document表示当前窗口的文档，<窗口对象>.document表示指定窗口的文档。

location 对象用于获取或设置窗体的URL，并且可以用于解析URL，是JavaScript中最重
要的对象之一，location 的中文意思是“位置”。location既是 window对象的属性又是
document 对象的属性，即“window.location== document. location;”。

navigator对象的中文意思为“导航器”，通常用于检测浏览器与操作系统的版本，也是
window 对象的属性。

screen 对象用于获取用户的屏幕信息，是window对象的属性。
每个window 对象的screen属性都引用一个screen对象。可以通过 screen对象获取一些
屏幕的信息，如宽度、高度、像素等，而这些信息对于设置图片和页面在浏览器中显示
肤小都是非常有用的。screen对象的属性应用和浏览器的关系比较密切，所以在应用这些
胜时，一定要注意浏览器之间的兼容性。