JavaWeb程序设计（项目式）（微课版）课件项目一网页开发基础

上传人：q*** IP属地：山东上传时间：2025-12-19 格式：PPTX 页数：70 大小：11.84MB 积分：20 举报 版权申诉

已阅读5页，还剩65页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

项目一网页开发基础1.1

HTML基础HTML（HypertextMarkupLanguage，超文本标记语言）是由WWW（WorldWideWeb，万维网）的发明者蒂姆·伯纳斯-李（TimBerners-Lee）和丹尼尔·W.康诺利（DanielW.Connolly）于1990年共同开发的一种标记语言，它是SGML（StandardGeneralMarkupLanguage，标准通用标记语言）的应用。使用HTML编写的文件称为HTML文件，这类文件具有跨平台特性，适用于各种操作系统（如UNIX、Windows等）。浏览器的主要功能是读取HTML文件中的标记代码，并将这些HTML文件“翻译”成用户可交互的可视化网页内‍容。1.1

HTML基础万维网上的一个HTML文件称为一个网页（Page）。组织或者个人在万维网上放置的网页面称为主页（Homepage）或首页，主页中通常包括指向其他相关页面或其他节点的超链接，超链接本质上是一种统一资源定位符（UniformResourceLocator，URL），通过激活（单击）超链接，可使浏览器访问并显示新的网页。这种便捷的网页跳转机制是HTML被广泛应用的最重要的原因之‍一。HTTP（HypertextTransferProtocol，超文本传送协议）为浏览器在访问超文本时提供了统一的标准规‍范。HTML文件本质上是文本文件，通过在其中嵌入特定的标记（也称为标签），开发者能够指示浏览器渲染和展示HTML文件的内容，包括文字样式、页面布局及多媒体元素的展示方式‍等。1.1.1

HTML简介1.1

HTML基础1．HTML的发展历程1.1.1

HTML简介HTML4.0：1997年12月18日发布，属于W3C推荐标‍准。HTML2.0：1995年11月，作为RFC1866发布，在RFC2854于2000年6月发布之后，HTML2.0被宣布已经过‍时。HTML5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被誉为改变移动互联网的重要推手。HTML1.0：1993年6月，作为互联网工程任务组（InternetEngineeringTaskForce，IETF）工作草案发‍布。HTML3.2：1997年1月14日发布，属于W3C（WorldWideWebConsortium，万维网联盟）推荐标‍准。HTML4.01（是对HTML4.0的微小改进）：1999年12月24日发布，属于W3C推荐标‍准。1.1

HTML基础2．HTML的特点1.1.1

HTML简介HTML的版本升级采用超集方式，更加灵活方便。HTML采取子类元素的方式，实现功能的扩展，满足标识符增加等需‍求。可以Windows、macOS等多种操作上使‍用。HTML是网络的通用标记语言。它允许网页开发者创建包含文本与图片相结合的复杂页面，这些页面可以被任何设备或浏览器访‍问。01020304简易性可扩展性跨平台性通用性1.1

HTML基础3．HTML的基本格式1.1.1

HTML简介<!DOCTYPE>声明：声明必须是HTML文件的第一行，位于<html>标签之前。<!DOCTYPE>声明和浏览器的兼容性相关。<html>标签：位于<!DOCTYPE>声明之后，被称为根标签。根标签的主要作用是告知浏览器该文档是一个HTML文件。<head>标签：用于定义HTML文件的头部内容，也被称为头部标签。<body>标签：用于定义HTML文件所要显示的主体内容，也被称为主体标签。网页中的所有文本、图像、音频和视频等信息都必须位于<body>标签内，才能最终展示给用‍户。案例

HTML文件（资源位置：项目1\源文件\htmlDemo01.html）<!DOCTYPE><html><head><title>htmlDemo01</title></head></html>1.1

HTML基础3．HTML的基本格式1.1.1

HTML简介htmlDemo02.html介绍完案例中的HTML标签后，下面以htmlDemo02.html文件为例讲解HTML文件的创建和运‍行。创建一个空白文件夹，然后在该文件夹中新建一个文本文件（扩展名为.txt），将htmlDemo01.html的内容写入该文件中并保存，最后将文件的名称更改为htmlDemo02，扩展名更改为.html。更改之后该文件便是一个HTML文件，如图所‍示。1.1

HTML基础3．HTML的基本格式1.1.1

HTML简介案例第一个HTML文件（资源位置：…项目1\源文件\htmlDemo02.html）<!DOCTYPE><html><head><title>htmlDemo02</title></head><body>这是我的第一个HTML</body></html>添加完成后，保存文件，使用浏览器再次打开htmlDemo02.html文件，浏览器中的显示结果如图所‍示。第一个HTML文件1.1

HTML基础1．单标签1.1.2

HTML标签分类单标签也被称为“空标签”，是指用一个“<>”符号就可以完整地描述某个功能的标签。单标签的基本语法格式如下：<标签名/>2．双标签双标签也被称为体标签，是指由开始标签和结束标签组成的标签对。双标签的基本语法格式如下：<标签名>内容</标签名>3．注释标签在HTML中还有一种特殊的标签—注释标签，如果需要在HTML文件中添加一些便于阅读和理解，但又不需要显示在页面中的注释文字，就需要使用注释标签。注释标签的基本语法格式如下：1.1

HTML基础1．文本标签1.1.3

HTML常用标签在HTML中，文本的显示格式（如字体、字号、颜色）可通过<font>标签控制，<font>标签的基本语法格式如下：<font属性="属性值">文本内容</font>下面通过一个案例演示<font>标签的使用，在文件夹中创建名称为htmlDemo03.html的HTML文件，其<body>标签代码如下所‍示。<body>我是默认样式的文本<br/><fontface="微软雅黑"size="6"color="green"><br/>我是6号绿色文本，我的字体是微软雅黑哦</font></body>案例

<font>标签的使用（资源位置：项目1\源文件\htmlDemo03.html）<font>标签的使用1.1

HTML基础2．图像标签1.1.3

HTML常用标签图像标签<img>用于在HTML网页中显示图像。<img>标签的基本语法格式如下：<imgsrc="图像URL"/>下面通过一个案例演示<img>标签的使用，在文件夹中添加一个名称为demoImg01.png的图像文件，然后创建一个名称为htmlDemo04.html的HTML文件，其<body>标签代码如下所‍示。<body>

显示图片：<imgsrc="demoImg01.png"width="160px"

height="130px"border="0"/></body>案例

<img>标签的使用（资源位置：项目1\源文件\htmlDemo04.html）<img>标签的使用1.1

HTML基础3．表格标签1.1.3

HTML常用标签在HTML网页中创建表格的基本语法格式如下所‍示。<table><tr><td>单元格内的文字</td></tr></table>上述语法格式包含3对HTML标签，分别是<table></table>、<tr></tr>和<td></td>，它们是创建表格的基本标签，缺一不可。下面通过一个案例演示表格标签的使用。在文件夹中创建一个名称为htmlDemo05.html的HTML文件，其<body>标签代码如下所‍示。1.1

HTML基础<body><tableborder="1px"><tr><td>姓名</td><td>语文</td><td>数学</td><td>英语</td></tr><tr><td>小明</td><td>95</td><td>80</td><td>90</td></tr></table></body>案例

表格标签的使用（资源位置：项目1\源文件\htmlDemo05.html）表格标签的使用无边框的表格1.1

HTML基础4．表单标签1.1.3

HTML常用标签表单就是在网页上用于输入信息的区域，它的主要功能是收集信息，并将这些信息传递给后台的信息处理模块。表单主要由3部分构成：表单域相当于一个容器，用来容纳所有的表单控件和提示信‍息。表单控件包含具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮‍等。提示信息表单通常还需要包含一些说明性的文字，即表单控件前的文字说明，用于提示用户进行操‍作。1.1

HTML基础1.1.3

HTML常用标签<form>标签在HTML中，<form>标签用于定义表单域，即创建一个表单。<form>标签的基本语法格式如下所‍示。<formaction="URL"method="提交方式"name="表单名称">各种表单控件</form><input>标签<input>标签的基本语法格式：<inputtype="控件类型">案例

<input>标签的使用（资源位置：项目1\源文件\htmlDemo06.html）<body><fieldset><legend>注册新用户</legend><formaction="#"method="post"><tablecellpadding="2"align="center"><tr><tdalign="right">用户名:</td><td><inputtype="text"name="username"></td></tr>1.1

HTML基础<tr><tdalign="right">密码:</td><td><inputtype="password"name="password"></td></tr><tr><tdalign="right">性别:</td><td><inputtype="radio"name="gender"value="male">男

<inputtype="radio"name="gender"value="female">女

</td></tr><tr><tdalign="right">喜爱的运动:</td><td><inputtype="checkbox"name="interest"value="swimming">游泳<inputtype="checkbox"name="interest"value="fitness">健身<inputtype="checkbox"name="interest"value="hiking">爬山</td></tr><tr><tdalign="right">头像:</td><td><inputtype="file"name="photo"/></td></tr><tr><tdcolspan="2"align="center"><inputtype="submit"value="注册"/><inputtype="reset"value="重填"/></td></tr></table></form></fieldset></body>1.1

HTML基础使用浏览器打开htmlDemo06.html，显示结果如图所‍示。下面通过一个案例演示<textarea>标签的使用。在文件夹中创建一个名称为htmlDemo07.html的HTML文件，其<body>标签代码如下所‍示。<input>标签的使用填写表单数据<textarea>标签的基本语法格式如下：<textareacols="每行的字符数"rows="显示的行数">文本内容</textarea>1.1

HTML基础<body><formaction="#"method="post">

评论：<br/><textareacols="60"rows="5">

评论时，请注意文明用语，友善交‍友。</textarea>

<br/><br/><inputtype="submit"value="提交"/></form></body>案例

<textarea>标签

的使用（资源位置：项目1\源文件\htmlDemo07.html）使用浏览器打开文件htmlDemo07.html，显示结果如图所‍示。<textarea>标签的使用1.1

HTML基础5．列表标签1.1.3

HTML常用标签无序列表无序列表是一种不排序的列表，各个列表项之间没有顺序或级别之分，通常是并列的。语法格式如下：有序列表有序列表是一种强调列表项之间顺序的列表，使用<ol>标签定义，内部可以嵌套多个<li>标签。语法格式如下：定义列表定义列表与有序列表、无序列表不同，它包含3个标签，即<dl>、<dt>、<dd>。语法格式如下：<d1><dt>名词1</dt><dd>名词1的描述信息1</dd><dd>名词1的描述信息2</dd><dt>名词2</dt><dd>名词2的描述信息1</dd><dd>名词2的描述信息2</dd></dl><ol><li>列表项1</li><li>列表项2</li>...</ol><ul><li>列表项1</li><li>列表项2</li>...</ul>1.1

HTML基础<body> <fontsize="5">大学专业</font><br/> <ul> <li>计算机科学与技术</li>

<litype="disc">软件工程</li>

<litype="square">网络工程</li>

<litype="circle">信息安全</li> </ul></body>案例

无序列表标签的使用（资源位置：项目1\源文件\htmlDemo08.html）使用浏览器打开文件htmlDemo08.html，显示结果如图所‍示。下面通过一个案例演示无序列表标签的使用。在文件夹中创建一个名称为htmlDemo08.html的HTML文件，其<body>标签代码如下所‍示。无序列表标签1.1

HTML基础<body><dl><dt>五颜六色</dt><dd>联合式成语，作谓语、定‍语。

形容色彩繁多。引申为各式各样。</dd><dd>五颜六色的近义词有五光十色</dd><dt>五彩缤纷</dt><dd>形容色彩繁多而艳丽。</dd><dd>五彩缤纷的近义词有五颜六色</dd></dl></body>案例

定义列表标签的使用（资源位置：项目1\源文件\htmlDemo09.html）使用浏览器打开文件htmlDemo09.html，显示结果如图所‍示。下面通过一个案例演示定义列表标签的使用。在文件夹中创建一个名称为htmlDemo09.html的HTML文件，其<body>标签代码如下所‍示。定义列表标签的使用1.1

HTML基础6．超链接标签1.1.3

HTML常用标签使用<a></a>标签创建超链接的基本语法格式如下所‍示。<ahref="跳转目标"target="目标窗口的弹出方式">文本或图像</a>href属性：用于指定链接指向的页面的URL，当<a>标签在用href属性时，该标签就具有了链接的功‍能。target属性：用于指定链接的打开方式，其值有_self、_blank、_parent和_top。<body>在新窗口打开：<ahref="/"target="_blank">必应</a><br/>

在原窗口打开：<ahref="/"target="_self">百度</a></body>案例

<a>标签的使用（资源位置：项目1\源文件\htmlDemo10.html）1.1

HTML基础使用浏览器打开文件htmlDemo10.html，显示结果如图所‍示。<a>标签的使用单击“必应”链接后的页面跳转结果单击“百度”链接后的页面跳转结果1.1

HTML基础7．<div>标签1.1.3

HTML常用标签<div>标签也称为区隔标记，是HTML中用于定义文档区块的块级元素，主要功能是为网页内容提供结构和布局框架。该标签可以将文字、图像、表格等内容组织到独立的区块中，便于通过CSS进行样式控制和而已调‍整。<div>标签的基本语法格式如下：<div>内容区块</div>作为容器元素，<div>标签用于组织HTML文件中的大块内容。起始标签<div>和结束标签<div>之间所有的内容构成一个独立区‍块。1.2

CSS基础1.2.1

CSS简介CSS是网页设计的重要组成部分，它允许开发者将样式信息与网页内容分离，使得网页的样式更易于维护和修改。CSS提供了强大的格式化功能，可以控制网页中的字体、颜色、背景、布局等各个方‍面。如果希望页面美观大方、代码维护方便，就需要使用CSS实现结构与表现的分离。结构与表现的分离是指在页面设计中，只使用HTML标签搭建网页的基础结构，不使用标签的属性设置网页的样式，所有的样式交由CSS来设‍置。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言（如JavaScript）动态地对网页元素进行格式化。这使得网页的样式可以根据用户的交互行为或其他条件进行动态调整，增强了网页的交互性和灵活‍性。1.2

CSS基础CSS是一种用于控制网页样式并允许将样式信息与网页内容分离的样式表语‍言。CSS能够精确控制网页中元素的排版，支持几乎所有的字体样式，并且拥有对网页对象和模型样式进行编辑的能‍力。CSS决定浏览器如何呈现HTML元素。换言之，CSS就是描述HTML元素样式设置的规则，可以控制网页内容的外观。使用CSS设置页面格式时，可以将内容与表现形式分开。1.2.2

CSS概述1.2

CSS基础CSS规则具体如下：1.2.3

CSS规则及引用方式选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;…}选择器用于指定CSS样式作用的HTML元素，花括号内的属性是对该对象设置的具体样式。属性和属性值之间用“:”连接，多个“键值对”之间用“;”进行分‍隔。为了让网页的色彩表现更出色，我们很有必要系统梳理CSS中颜色的表示方式，具体有以下3种。如red、green、blue等如#FF0000、#FF6600、#29D794等。[CT)]如红色可以用rgb(255,0,0)或rgb(100%,0%,0%)来表示。预定义的颜色值十六进制颜色值[CT(]RGB代码1.2

CSS基础CSS样式有4种引入方式：1.2.3

CSS规则及引用方式行内式也被称为内联式，它通过标签的style属性设置标签的样式。行内式的基本语法格式如下：

<标签名style="属性1:属性值1;属性2:属性值2;属性3:属性值3;"…>内容</标签名>行内式01内嵌式是将CSS代码集中写在HTML文件的<head>标签中，并用<style>标签定义。内嵌式的基本语法格式如下：内嵌式02<head><styletype="text/css">选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;…}</style></head>1.2

CSS基础<h1style="font-size:20px;color:red;">使用CSS行内式修饰一级标题的字体大小和颜色

</h1>案例

行内式的使用（资源位置：项目1\源文件\cssDemo01.html）使用浏览器打开文件cssDemo01.html，显示结果如图所‍示。<head><title>内嵌式</title> <styletype="text/css"> h2{text-align:center;} div{border:1pxsolid#CCC;width:300px;height:80px;color:purple;text-align:center;} </style></head><body> <h2>内嵌式CSS样式</h2> <div>使用style标签可定义内嵌式CSS样式表，style标签一般位于head头部标签中，title标签之‍后。</div></body>案例

内嵌式的使用（资源位置：项目1\源文件\cssDemo02.html）行内式的使用1.2

CSS基础使用浏览器打开文件cssDemo02.html，显示结果如图所‍示。内嵌式的使用链入式也叫外链式，它将所有的样式放在一个或多个以.css为扩展名的外部样式文件中，通过<link>标签将外部CSS文件链接到HTML文件中。链入式的基本语法格式如下：链入式03<head><linkhref="CSS文件的路径"type="text/css"rel="stylesheet"/></head>下面通过一个案例演示链入式的使‍用。1.2

CSS基础创建CSS文件。在文件夹中创建一个名称为cssDemo03.css的样式文件，使用记事本打开该文件后，在文件中编写如下代‍码。<styletype="text/css">/*定义<h2>标签居中对齐*/h2{text-align:center;}/*定义<div>标签样式*/div{border:1pxsolid#CCC;width:300px;height:80px;color:purple;text-align:center;}</style>创建HTML文件<head><title>使用链入式</title><linkhref="cssDemo03.css"type="text/css"rel="stylesheet"/></head><body><h2>链入式CSS样式</h2><div>链入式也叫外链式，外链式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件‍中。</div></body>链入式的使用1.2

CSS基础导入式与链入式相同，都是针对外部CSS文件的引入方式。在HTML文件的<head>标签中添加<style>标签，并在<style>标签内的开头处使用@import语句，即可导入外部CSS文件。导入式的基本语法格式如下：导入式04<styletype="text/css">@import"CSS文件路径";或@importurl(CSS文件路径);/*在此还可以存放其他CSS样式*/</style>如果想在上个案例中使用导入式，只需要把HTML文件的<link>标签替换‍成。<styletype="text/css">@import"cssDemo03.css";</style><styletype="text/css">@importurl(cssDemo03.css);</style>或者1.2

CSS基础1.2.4CSS选择器标签选择器将HTML标签名作为选择依据，按标签名分类，为页面中某一类标签指定统一的样式。标签选择器的基本语法格式：标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;…}标签选择器01类选择器使用“.”进行标识，后面紧跟类名。类选择器的基本语法格式：

.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;…}类选择器02id选择器使用“#”进行标识，后面紧跟id名。id选择器的基本语法格式：

#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;…}id选择器031.2

CSS基础通配符选择器使用“*”进行标识，它是4种选择器中作用范围最广的，能匹配页面中所有的元素。通配符选择器的基本语法格式如下：*{属性1:属性值1;属性2:属性值2;属性3:属性值3;…}通配符选择器04下面通过一个案例演示选择器的使用。在文件夹中创建一个名称为cssDemo04.html的HTML文件，其<head>、<body>标签代码如下所‍示。<head> <title>选择器</title> <styletype="text/css"> /*类选择器*/ .red{color:red;} .green{color:green;} .font18{font-size:18px;} /*id选择器*/ #bold{font-weight:bold;} #font24{font-size:24px;} </style></head>案例

选择器的使用（资源位置：项目1\源文件\cssDemo04.html）<body>  <h1class="red">标题一：class="red"，设置文字为红色。</h1> <pclass="greenfont18">段落一:class="greenfont18",设置文字为绿色，字号为18px。</p> <pclass="redfont18">段落二:class="redfont18",设置文字为红色，字号为18px。</p>  <pid="bold">段落1：id="bold"，设置粗体文字。</p> <pid="font24">段落2：id="font24"，设置字号为24px。</p> <pid="font24">段落3：id="font24"，设置字号为24px。</p> <pid="boldfont24">段落4：id="boldfont24"，同时设置粗体文字和字号为24px。</p></body>1.2

CSS基础使用浏览器打开文件cssDemo04.html，显示结果如图所示。可以发现“段落4”的文字内容并没有被加粗，字号也没有调整为24px。这是因为id不支持多个值，代码中的boldfont24会被视为一个整体id。选择器的使用属性功能描述margin用于指定元素的外边距，也就是元素与元素之间的距离。该属性可指定1~4个属性值，各属性值之间以空格分隔padding用于指定元素的内边距，也就是元素的内容与元素之间的边框之间的距离。该属性可指定1~4个属性值，各属性值之间以空格分隔background用于指定背景颜色、背景图片、背景图片的排列方式、是否固定背景图片和背景图片的位置。该属性可指定多个属性值，各属性值之间以空格分隔，没有先后顺序font-family用于指定字体border用于指定边框的宽度、边框的样式和边框的颜色。该属性可以指定多个属性值，各属性值之间以空格分隔，没有先后顺序font用于指定字体样式、小型的大写字体、字体粗细、文字的大小、行间距和文字的字体表CSS常用属性1.2

CSS基础属性功能描述height用于指定对象的高度line-height用于指定行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，也称为行高color用于指定文本的颜色text-align用于指定文本的对齐方式text-decoration用于指定文本的装饰样式，其属性值包括line-through（删除线）、overline（上画线）、underline（下画线）、blink（闪烁效果，使用Firefox和Opera浏览器可以看到效果）和none（无效果）等vertical-align用于指定元素的垂直对齐方式。仅适用于行内元素和表格单元格display用于指定元素的显示形式续表1.3JavaScript基础1．JavaScript的组成1.3.1JavaScript概述JavaScript由ECMAScript、DOM（DocumentObjectModel，文档对象模型）、BOM（BrowserObjectModel，浏览器对象模型）3部分组成。下面对这3个部分进行简单讲‍解。ECMAScriptECMAScript规定了JavaScript的编程语法和核心内容，是所有浏览器厂商共同遵守的一套JavaScript语法标‍准。DOM是W3C推荐的处理可扩展标签语言的标准编程接口，通过DOM接口，可以对页面中的各种元素进行操作（如调整元素的大小、位置、颜色等）。BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

通过BOM可以对浏览器窗口进行操作（如弹出对话框、控制浏览器页面跳转等）。1.3JavaScript基础2．JavaScript代码的引入方式1.3.1JavaScript概述行内式是指将单行或少量的JavaScript代码写在HTML标签的事件属性中。行内式01内嵌式是指在HTML文件中，可以通过<script>标签以及其相关属性引入JavaScript代码。当浏览器读取到<script>标签时，就会去解释并执行其中的JavaScript代码。内嵌式02外链式是指将JavaScript代码写在一个单独的文件中，一般使用“.js”作为文件的扩展名，在HTML文件中使用<script>标签引入该文件。<scripttype="text/javascript"src="JavaScript文件的路径"></script>外链式031.3JavaScript基础案例JavaScript行内式的使用（资源位置：项目1\源文件\JavaScriptDemo01.html）<head><title>JavaScript行内式</title></head><body><inputtype="button"value="点我"onclick="alert('行内式')"/></body>使用浏览器打开文件JavaScriptDemo01.html，显示结果如图所‍示。单击“点我”按钮后会弹出一个提示框，如图所‍示。JavaScript行内式的使用单击“点我”按钮后弹出的对话框1.3JavaScript基础案例JavaScript内嵌式的使用（资源位置：项目1\源文件\JavaScriptDemo02.html）<head><title>JavaScript内嵌式</title><scripttype="text/javascript">alert('内嵌式');</script></head><body></body>下面通过一个案例演示JavaScript外链式的使‍用。JavaScript内嵌式的使用

在文件夹中创建一个名称为JavaScriptDemo03.js的JavaScript文件，其代码如下所‍示。alert('外链式');案例JavaScript外链式的使用（资源位置：项目1\源文件\JavaScriptDemo03.js）在文件夹中创建一个名称为JavaScriptDemo03.html的HTML文件，其代码如下所‍示。1.3JavaScript基础<head><title>JavaScript外链式</title><scripttype="text/javascript"src="JavaScriptDemo03.js"></script></head><body></body>JavaScript外链式的使用3．JavaScript数据类型类型含义说明Number数值型数值型数据不区分整型数据和浮点型数据，数值型数据不用引号标识String字符串类型字符串是用单引号或双引号标识的一个或多个字符Boolean布尔类型只有true或false两个值Object对象类型一组数据和功能的键值对集合Null空类型没有任何值Undefined未定义类型指变量被创建，但未赋值时所具有的类型1.3JavaScript基础4．JavaScript变量声明变量的语法格式如下所‍示。varnumber=30;varstr="百度一下";5．JavaScript运算符在JavaScript中，运算符也称为操作符，是用于实现赋值、比较和执行算术运算等操作的符号。算术运算符算术运算符描述+加运算符，实现加法运算-减运算符，实现减法运算*乘运算符，实现乘法运算/除运算符，实现除法运算++自增运算符，该运算符有i++（在使用i之后，使i的值加1）和++i（在使用i之前，先使i的值加1）两种使用方式--自减运算符，该运算符有i--（在使用i之后，使i的值减1）和--i（在使用i之前，先使i的值减1）两种使用方式1.3JavaScript基础比较运算符比较运算符描述示例结果<小于3<3false>大于3>3false<=小于或等于3<=3true>=大于或等于3>=3true==等于，只根据表面值进行判断，不涉及数据类型3==2false!=不等于，只根据表面值进行判断，不涉及数据类型3!=2true逻辑运算符逻辑运算符描述&&逻辑与，只有当数a、b的值都为true时，a&&b的值才为true；否则为false||逻辑或，只有当数a、b的值都为false时，a||b的值才为false；否则为true!逻辑非，!true的值为false，而!false的值为true1.3JavaScript基础赋值运算符赋值运算符描述=实现赋值运算，例如，username="name"+=实现加等于运算，例如，a+=b相当于a=a+b-=实现减等于运算，例如，a-=b相当于a=a-b*=实现乘等于运算，例如，a*=b相当于a=a*b/=实现除等于运算，例如，a/=b相当于a=a/b%=实现余等于运算，例如，a%=b相当于a=a%b三元运算符三元运算符又叫三目运算符。三元运算符的语法格式：条件表达式?表达式1:表达式2下面通过一个案例演示JavaScript三元运算符的使用。在文件夹中创建一个名称为JavaScriptDemo04.html的HTML文件，其代码如下所‍示。<scripttype="text/javascript">vara=5;varb=5;alert((a==b)?true:false);</script>1.3JavaScript基础6．if条件语句条件语句是对语句中不同的条件进行判断，进而执行不同的操作的语句。条件语句中较为常用的是if判断语句，它与Java语言中的if判断语句相似，通过判断条件表达式的值为true或者false来确定是否执行某一条语句。单向判断语句是结构最简单的if条件语句，如果程序中存在绝对不执行某些指令的情况，就可以使用单向判断语句，其语法格式如下：（1）单向判断语句双向判断语句是if条件语句的基础形式，其语法格式如下：（2）双向判断语句多向判断语句是根据不同条件表达式的结果执行相应的语句，其语法格式如下：（3）多向判断语句if(条件表达示){执行语句}if(条件表达式1){执行语句1}else{执行语句2}if(条件表达式1){执行语句1}elseif(条件表达式2){执行语句2}elseif(条件表达式3){执行语句3}...1.3JavaScript基础1.3.2JavaScript主要特点JavaScript在客户端运行，这意味着它是在用户的计算机上运行的，而不是在服务器上运行的。这使得网页可以快速响应用户的操作，而不需要等待服务器响‍应。JavaScript是动态类型的语言，这意味着我们不需要提前声明变量的类型。例如，可以将字符串赋给变量，然后程序运行的过程，将该变量更改为数值型变‍量。JavaScript是一种面向对象的语言，这意味着我们可以使用面向对象编程技术（如继承和封装）。JavaScript是事件驱动的语言，这意味着它能对用户的操作（如单击或移动鼠标指针）等事件做出响应，从而使得网页可以根据用户的操作进行动态更‍改。JavaScript是一种解释型语言，它在运行时解释代码，不需要预先编译。这意味着我们可以方便地更改和运行代‍码。JavaScript不仅用能于Web开发，还能用于创建复杂的单页应用程序、游戏等。它与HTML、CSS并称Web开发的三大核心技‍术。JavaScript可以与多种技术集成，如HTML、CSS、DOM、XML（ExtensibleMarkupLanguage，可扩展标记语言）、Ajax（AsynchronousJavaScriptandXML，异步JavaScript和XML）等，这使得它成为Web开发中最常用的语言之‍一。1.3JavaScript基础1.3.3DOM相关知识W3C将DOM标准分为3`个部分：核心DOM、XMLDOM和HTMLDOM。其中，核心DOM是针对任何结构化文件的标准模型，XMLDOM是针对XML文件的标准模型，而HTMLDOM是针对HTML文件的标准模‍型。HTMLDOM以树形结构呈现树的根节点是文件（Document）对象，该对象通过名为documentElement的属性引用，表示文件根元素的Element对象。在HTML文件中，文件根元素的Element对象对应html元素，head和body元素可以看作树的枝‍干。HTMLDOM树结构1.3JavaScript基础1.3.3DOM相关知识文档节点之间的关系分为3种，具体如‍下。直接位于某一个节点之下的节点被称为该节点的子节点（childNode）。例如，元素title位于元素head之下，所以元素head就是元素title的子节‍点。01直接位于某一个节点之上的节点被称为该节点的父节点（parentNode）。例如，元素head位于元素title之上，所以元素head就是元素title的父节‍点。02具有相同父节点的两个节点被称为兄弟节点（siblingNode）。例如，元素h1和元素a就是兄弟节‍点。031.3JavaScript基础访问节点在DOM中，HTML文件的各个节点被视为各种类型的Node对‍象。属性返回值的类型描述parentNodeNode返回节点的父节点，没有父节点则返回nullchildNodesNodeList返回节点的所有子节点的集合firstChildNode返回节点的首个子节点，没有则返回nulllastChildNode返回节点的最后一个子节点，没有则返回null获取文档中的指定元素可以通过元素的id属性获取元素。Document的getElementById()方法可以通过元素的id属性获取元素。例如，获取id属性值为memberId的元素的代码如下所‍示。document.getElementById("memberId");1.3JavaScript基础1.3.4

BOM相关知识BOM的核心对象为Window对象。Window对象有很多内置对象，这些对象用于访问浏览器。常用的BOM对象包含以下几‍个。Window对象：顶层对象，表示浏览器窗‍口。Navigator对象：包含浏览器的信‍息。History对象：包含访问过的

URL信‍息。Location对象：包含当前

URL

的信‍息。Screen对象：包含客户端显示屏的信‍息。1.3JavaScript基础Window对象的常用属性属性名称描述Closed返回窗口是否已被关闭document对

Document

对象的只读引用history对

History

对象的只读引用innerHeight返回窗口的文档显示区的高度innerWidth返回窗口的文档显示区的宽度length返回窗口中的框架数量location控制URL导航的对象onload加载事件有两种注册方式，分别如下所‍示。//方式1window.onload=function(){};//方式2window.addEventListener('load',function(){});1.4

Bootstrap基础1.4.1

Bootstrap框架简介Bootstrap是由Twitter（现已更名为X）公司的设计师马克·奥托（MarkOtto）和雅各布·

桑顿（JacobThornton）等人合作开发的开源框架，该框架基于HTML、CSS和JavaScript语言编写，于2011年8月在GitHub上发布，一经推出就颇受欢迎，并成为GitHub上的热门开源项目。Bootstrap具有简单、灵活的特性，能够帮助开发人员快速搭建前端页面，常用于开发响应式布局和移动设备优先的Web项目。Bootstrap框架与HTML、CSS和JavaScript技术结合，可以构建出非常优雅的前端页面，而且占用的资源较少。1.4

Bootstrap基础1.4.2

Bootstrap优点易于使用：Bootstrap提供了简洁明了的API（ApplicationProgramInterface，应用程序接口），使开发人员可以快速地构建响应式布局和移动设备优先的网站。响应式布局：Bootstrap的响应式布局设计使得网站能够自适应不同设备的屏幕尺寸，为用户提供良好的体‍验。丰富的组件：Bootstrap提供了许多内置的组件（如导航、下拉菜单、警告框、弹出框等），这些组件易于使用，并且具有一致的样式，使得开发人员可以快速构建出美观的界‍面。完善的官方文档：Bootstrap的官方文档非常完善，提供了详细的示例和教程，旨在帮助开发人员快速上‍手。高度定制性：虽然Bootstrap提供了许多内置的组件和样式，但它也允许开发人员进行高度定制，以满足项目的特定需‍求。社区支持：Bootstrap拥有庞大的社区，开发人员可以在社区中寻求帮助，或者分享自己的开发经验和技‍巧。兼容性：采用Bootstrap编写的代码兼容性好，能在多种浏览器中良好地运‍行。1.4

Bootstrap基础1.4.3

Bootstrap框架下载与引入要使用Bootstrap框架进行开发，需要先对Bootstrap进行下载与引入，下面介绍Bootstrap框架的下载步骤以及引入方‍式。step01打开浏览器，访问Bootstrap的官网，如图所‍示。step02单击“下载Bootstrap”按钮，进入下载页面，如图所‍示。Bootstrap框架官网Bootstrap框架下载页面1.4

Bootstrap基础1.4.3

Bootstrap框架下载与引入下载完成后，解压文件，将图所示的两个文件放到项目所在的目录‍中。Bootstrap源码位置（资源位置：项目1\源文件\bootstrap.min.css；项目1\源文件\bootstrap.min.js）Bootstrap源代码step03引入Bootstrap的实例代码如‍下。<linkrel="stylesheet"href="bootstrap.min.css"><linkhref="bootstrap.min.js">1.4

Bootstrap基础1.4.4

Bootstrap常用组件1．按钮下面通过一个案例演示Bootstrap按钮的使用。在文件夹中创建一个名称为BootstrapDemo01.html的HTML文件，其<head>、<body>代码如下所‍示。案例

Bootstrap按钮的使用（资源位置：项目1\源文件\BootstrapDemo01.html）<head> <title>Bootstrap按钮</title>  <linkrel="stylesheet"href="bootstrap.min.css">  <linkhref="bootstrap.min.js"></head><body> <buttontype="button"class="btnbtn-primary">主按钮</button></body>Bootstrap按钮1.4

Bootstrap基础实现Bootstrap按钮中的文本内容不换行（资源位置：项目

1\源文件\BootstrapDemo02.html）<head><style>button{width:120px;}</style><title>Bootstrap按钮中的文本内容不换行</title><linkrel="stylesheet"href="bootstrap.min.css"></head><body><button

type="button"

class="btn

btn-primarytext-nowrap">

主按钮主按钮主按钮</button></body>Bootstrap按钮中的文本内容不换行

1.4

Bootstrap基础调节Bootstrap按钮的大小（资源位置：项目1\源文件\BootstrapDemo03.html）<head><style>button{width:120px;}</style><title>调节Bootstrap按钮的大小</title><linkrel="stylesheet"href="bootstrap.min.css"></head><body><buttontype="button"class="btnbtn-primarybtn-lg">主按钮</button><buttontype="button"class="btnbtn-primarybtn-sm">主按钮</button></body>调节Bootstrap按钮的大小1.4

Bootstrap基础1.4.4

Bootstrap常用组件2．导航普通导航案例

Bootstrap普通导航的使用（资源位置：项目1\源文件\BootstrapDemo04.html）<head><title>Bootstrap普通导航</title><linkrel="stylesheet"href="bootstrap.min.css"></head><body><ulclass="nav"><liclass="nav-item"><aclass="nav-link"href="#">首页</a></li><liclass="nav-item"><aclass="nav-link"href="#">简介</a></li><liclass="nav-item"><aclass="nav-link"href="#">商务</a></li><liclass="nav-item"><aclass="nav-link"href="#">关于我们</a></li></ul></body>Bootstrap普通导航在文件夹中创建一个名称为BootstrapDemo04.html的HTML文件，其<head>、<body>标签代码如下所‍示。1.4

Bootstrap基础面包屑导航案例

Bootstrap面包屑导航的使用（资源位置：项目1\源文件\BootstrapDemo05.html）<head><title>Bootstrap面包屑导航</title><linkrel="stylesheet"href="bootstrap.min.css"></head><body><navaria-label="breadcrumb"><olclass="breadcrumb"><liclass="breadcrumb-item"><ahref="#">首页</a></li><liclass="breadcrumb-item"><ahref="#">简介</a></li><liclass="breadcrumb-item"><ahref="#">商务</a></li><liclass="breadcrumb-item"><ahref="#">关于我们</a></li></ol></nav></body>Bootstrap面包屑导航下面通过一个案例演示Bootstrap面包屑导航的使用。在文件夹中创建一个名称为BootstrapDemo05.html的HTML文件，其<head>、<body>标签代码如下所‍示。1.4

Bootstrap基础1.4.4

Bootstrap常用组件3．列表下面通过一个案例演示Bootstrap列表的使用。在文件夹中创建一个名称为BootstrapDemo06.html的HTML文件，其<head>、<body>标签代码如下所‍示。案例

Bootstrap列表的使用（资源位置：项目1\源文件\BootstrapDemo06.html）<head><title>Bootstrap列表</title><linkrel="stylesheet"href="bootstrap.min.css"></head><body><ulclass="list-group"><liclass="list-group-itemactive">列表1</li><liclass="list-group-item">列表2</li><liclass="list-group-item">列表3</li><liclass="list-group-item">列表4</li><liclass="list-group-item">列表5</li></ul></body>Bootstrap列表1.4

Bootstrap基础1.4.4

Bootstrap常用组件4．表单下面通过一个案例演示Bootstrap表单的使用。在文件夹中创建一个名称为BootstrapDemo07.html的HTML文件，其<head>、<body>标签代码如下所‍示。案例

Bootstrap表单的使用（资源位置：项目1\源文件\BootstrapDemo07.html）<head><title>Bootstrap表单

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

JavaWeb程序设计（项目式）（微课版）课件 项目一 网页开发基础

文档简介

温馨提示

最新文档

评论

相关文档

JavaWeb程序设计（项目式）（微课版）课件项目一网页开发基础