实例051 使用progress标记元素实现进度条效果_HTML5程序开发范例宝典-QQ阅读男生武侠网

书名：HTML5程序开发范例宝典
作者名：韩旭高飞孙桂杰编著
本章字数：496字
更新时间：2024-12-21 21:58:10

3.1 新增和改良的页面元素

实例043 使用details标记元素实现交互

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\03\043

实例说明

details元素是HTML5的新增页面元素，该元素提供了一种替代JavaScript的方法，它主要提供了一个展开/收缩区域。本实例将使用details元素实现与页面的交互，在Chrome浏览器中运行本实例的初始效果如图 3.1 所示。单击“详细信息”文本，将会展开定义的详细信息，结果如图3.2所示。

图3.1 页面运行初始效果

图3.2 使用details元素实现与页面的交互

技术要点

本实例主要应用HTML5的新增页面元素details，details元素的示例代码如下所示：

</details>

运行上述代码，浏览器将输出自己默认的控件文本，例如“details”或一个本地化版本。浏览器还可能添加某种图标来表示该文本是“可扩展的”，例如一个向下的箭头。当单击该文本时，将会在页面中显示details元素中定义的详细信息。

details可以可选地接受open属性，来确保页面载入的时候该元素是可打开的，代码如下：

说明：目前，只有Chrome浏览器支持details元素。

实现过程

（1）创建index.html文件，定义details元素，在该元素内部定义一个<img>标签，用于显示公司图片；再定义一个<div>，标签用于显示公司简介。代码如下：

<div>

<h3>吉林省明日科技有限公司</h3>

<p>    吉林省明日科技有限公司是一家以计算机软件技术为核心的高科技型企业，公司创建于2000年12月，是专业的应用软件开发商和服务提供商。多年来始终致力于行业管理软件开发、数字化出版物开发制作、计算机网络系统综合应用、行业电子商务网站开发等领域，涉及生产、管理、控制、仓贮、物流、营销、服务等行业。公司拥有软件开发和项目实施方面的资深专家和学习型技术团队，公司的开发团队不仅是开拓进取的技术实践者，更致力于成为技术的普及和传播者，并以软件工程为指导思想建立了软件研发和销售服务体系。公司基于长期研发投入和丰富的行业经验，本着“让客户轻松工作，同客户共同成功”的奋斗目标，努力发挥“专业、易用、高效”的产品优势，竭诚为广大用户提供优质的产品和服务。

</p>

</div>

</details>

（2）定义details元素以及该元素内部文本的CSS样式，代码如下：

<styletype="text/css">

<!-

details{

overflow: hidden;

background: #e3e3e3;

margin-bottom: 10px;

display: block;

}

details div {

float: left;

width: 75%;

}

details div h3 {

margin-top:0;

}

details img {

float: left;

width: 200px;

padding: 0 30px 10px 10px;

}

-->

</style>

举一反三

根据本实例，读者可以进行以下操作。

使用<details>标记实现文章内容的展开与收缩。

通过<details>标记实现图片的显示与隐藏。

实例044 应用output元素拖动滑竿改变数值

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\03\044

实例说明

本实例将介绍一种HTML5中新增的元素——output元素。在这个实例中，output元素被绑定到了一个range类型的input元素上，当拖动range元素的滑竿时，output元素的父表单会接收到消息，同时通知output元素，将它被绑定元素range的值显示出来。本实例在Opera浏览器中的运行效果如图3.3所示。

图3.3 output元素显示range 的值

技术要点

本实例主要应用HTML5中的表单新增元素output元素，output元素显示出一些计算的结果或者脚本的其他结果。output元素必须从属于某个表单，也就是说，必须将它书写在表单内部，或对它添加form属性。

说明：目前，只有Opera10浏览器支持output元素。

实现过程

创建index.html文件，在文件中创建一个表单，在表单中定义一个range类型的input元素，然后应用output元素输出input元素的值，代码如下：

<html>

<head>

<title>output元素示例</title>

</head>

<formid="testform">

请选择一个数值：

</form>

举一反三

根据本实例，读者可以进行以下操作。

使用output元素定义脚本的输出。

使用output元素显示年龄数值。

实例045 实现下拉弹出效果

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\03\045

实例说明

本实例将使用HTML5中为单行文本框新增的list属性实现下拉弹出效果。在Opera浏览器中运行实例，当单击文本框使其获得焦点时将弹出输入提示，运行结果如图3.4所示。

图3.4 弹出输入提示

技术要点

本实例主要应用HTML5中为单行文本框新增的list属性，该属性的值为某个datalist元素的id。datalist元素也是HTML5中新增元素，该元素类似于选择框（select），但是当用户想要设置的值不在选择列表之内时，允许其自行输入。该元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。为了避免在没有支持该元素的浏览器上出现显示错误，可以用CSS等将它设定为不显示。

说明：目前，只有Opera10浏览器支持list属性。

实现过程

创建index.html文件，在文件中定义一个input元素，并设置该元素的list属性值为mr，然后定义datalist元素，并设置其id属性值为mr，在该元素内部定义option元素作为弹出输入提示的选项，具体代码如下：

<html>

<head>

<title>list属性示例</title>

</head>

请选择：<input type="text"name="mr"list="mr">

<option value="JavaScript">JavaScript</option>

</datalist>

举一反三

根据本实例，读者可以进行以下操作。

应用list属性引用数据列表。

应用list属性弹出电子邮箱地址。

实例046 无刷新弹出图片和文字

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\03\046

实例说明

本实例和实例043有异曲同工之妙。在Chrome浏览器中运行实例，在网页中显示文本“明日科技”，效果如图3.5所示。当单击该文本后，将在下方无刷新弹出一个下拉区域，并在里面显示出图片和文字，结果如图3.6所示。

图3.5 页面运行初始效果

图3.6 弹出图片和文字

技术要点

本实例主要应用summary元素，该元素通常是details元素的第一个子元素。该元素用来包含details元素的标题。标题是可见的，当用户单击标题时会显示details元素中的其他所有从属元素的详细信息。

实现过程

（1）创建index.html文件，定义details元素，在该元素内部定义summary元素，在summary元素中输入文本“明日科技”，然后定义一个<img>标签用于显示公司图片，再定义一个<div>标签用于显示公司简介，代码如下：

<div>

<h3>吉林省明日科技有限公司</h3>

</p>

</div>

</details>

（2）定义details元素以及该元素内部文本的CSS样式，代码如下：

<styletype="text/css">

<!-

details{

overflow: hidden;

background: #e3e3e3;

margin-bottom: 10px;

display: block;

}

detailssummary{

cursor: pointer;

padding: 10px;

}

details div {

float: left;

width: 75%;

}

details div h3 {

margin-top:0;

}

details img {

float: left;

width: 200px;

padding: 0 30px 10px 10px;

}

-->

</style>

举一反三

根据本实例，读者可以进行以下操作。

使用details元素和summary元素实现手风琴效果。

实例047 使用summary标记元素实现交互

本实例可以美化界面

实例位置：光盘\mingrisoft\03\047

实例说明

本实例将使用summary标记元素实现交互。在Chrome浏览器中运行实例，如图3.7所示。当单击文字左侧的三角形符号后，所有文字将隐藏消失，效果如图3.8所示。

图3.7 使用summary元素实现与页面的交互

图3.8 文字隐藏消失

技术要点

在HTML5 中，<summary>标记用来包含 details元素的标题。<summary>标记是 HTML5中的新增标记，常包含在details元素中，配合details元素一起使用。<summary>标记的功能是说明文档的标题，而details元素的功能是说明文档的详细信息。summary元素是details元素中的第一个子元素，二者经常出现在同一页面中。

实现过程

（1）创建index.html文件，在文件中定义details元素，并设置其open属性，然后在details元素内部定义summary元素，在元素中输入文本“明日科技公司简介”，然后输入公司简介，代码如下：

<summary>明日科技公司简介</summary>

吉林省明日科技有限公司是一家以计算机软件技术为核心的高科技型企业，公司创建于2000年12月，是专业的应用软件开发商和服务提供商。

</details>

（2）定义details元素以及该元素内部文本的CSS样式，代码如下：

<styletype="text/css">

body{

padding:5px;

font-size:12px

}

summary{

font-weight:bold;

}

details{

overflow: hidden;

height: 0;

position:relative;

display: block;

}

details[open]{

height:auto;

}

</style>

举一反三

根据本实例，读者可以进行以下操作。

使用summary元素定义文章标题。

使用summary元素定义图片的名称。

实例048 使用menu标记元素实现菜单交互

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\03\048

实例说明

在HTML5中，除了常用的内容交互元素外，使用较多的还有菜单交互元素。本实例将介绍<menu>标记元素的基本用法。实例运行结果如图3.9所示。

图3.9 使用menu标记元素实现菜单交互

技术要点

<menu>标记是 HTML5 中的标记，在HTML5中为其赋予了全新的功能。该元素通常与<li>列表元素结合使用，用来定义一个列表式的菜单。

实现过程

创建 index.html文件，在文件中首先添加一个<menu>元素，在该元素中加入<li>列表元素；然后在列表元素中分别定义一个<img>和<span>元素，用于展示图片与图片说明；最后使用CSS样式，实现当用户将鼠标移到某个<li>元素时，展示选项被选中的效果。具体代码如下：

<html>

<head>

<title>使用menu标记元素实现菜单交互</title>

<styletype="text/css">

body{

padding:5px;

font-size:12px

}

menu{

padding:0;

margin:0;

display:block;

border: solid 1px #365167;

width:222px

}

menu li{

list-style-type:none;

padding:5px;

margin:5px;

height:28px;

width:200px

}

menu li:hover{

border: solid 1px #7DA2CE;

background-color:#CFE3FD

}

menuliimg{

clear:both;

float:left;

padding-right:8px;

margin-top:-2px

}

menu li span{

padding-top:5px;

float:left;

font-size:13px

}

</style>

</head>

<body>

<menu>

<li>

<span>Firefox</span>

</li>

<li>

<span>Internet Explorer</span>

</li>

<li>

<span>Opera</span>

</li>

</menu>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

设置menu元素的CSS样式。

实例049 实现右键菜单功能

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\03\049

实例说明

对于一个企业网站来说，充分利用鼠标右键、操作鼠标右键弹出菜单更简便、更快捷，只需轻击鼠标就可以制作出具有专业水准的动态菜单，其独特的菜单悬浮和任意定位的功能更是最大限度地节省了页面空间，而丝毫不影响页面布局。运行本实例，在页面任意位置单击鼠标右键，即会弹出如图 3.10 所示的快捷菜单，单击任意选项，即可登录到相关网站。

图3.10 鼠标右键菜单

技术要点

本实例主要通过JavaScript 中鼠标的右键单击事件 oncontextmenu 和鼠标的左键单击事件onclick调用相应的函数控制div层的显示、隐藏来实现菜单的显示或隐藏。

实现过程

（1）运用JavaScript脚本自定义隐藏和显示右键菜单的函数。代码如下：

function c(css){

menu.className=css;

}

function link(act,txt){

document.write("<div class=link onMouseOver=this.className='overlink'onMouseOut=this.className='link' style='padding-left:16;padding-top:1;padding-bottom:1' onclick="+act+">"+txt+"</div>")

}

functionshowmenu(){

var rightedge=document.body.clientWidth-event.clientX-100

var bottomedge=document.body.clientHeight-event.clientY-25

if (rightedge<menu.offsetWidth)

menu.style.left=document.body.scrollLeft+event.clientX-menu.offsetWidth;

else

menu.style.left=document.body.scrollLeft+event.clientX

if (bottomedge<menu.offsetHeight)

menu.style.top=document.body.scrollTop+event.clientY-menu.offsetHeight

else

menu.style.top=document.body.scrollTop+event.clientY

menu.style.visibility="visible"

return false

}

functionhidemenu(){

menu.style.visibility="hidden"

}

functionpop(win){

window.open(win,'','')

}

</script>

（2）在页面中编写CSS样式的代码如下：

<styletype="text/css">

<!--

.style1{

font-size: 14pt;

color:#FF0000;

}

-->

</style>

（3）运用div层设计快捷菜单的链接名称及网址。代码如下：

link('pop("http://www.mingrisoft.com")','明日科技图书网');

link('pop("http://www.ptpress.com")','人民邮电出版社');

link('pop("http://www.mingrisoft.com")','明日科技软件网');

link('pop("http://www.cccxy.com")','长春程序员网站');

link('pop("http://www.cccxy.com")','明日编程词典网');

</script>

</div>

if (document.all&&window.print){

document.oncontextmenu=showmenu

document.body.onclick=hidemenu

}

</script>

<tablewidth="825" height="409" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<tr>

</tr>

<tr>

<td height="122" align="center"><span class="style1">请单击鼠标右键！</span></td>

</tr>

</table></td>

</tr>

</table>

举一反三

根据本实例，读者可以进行以下操作。

为导航菜单制作右键菜单。

实现链接的右键菜单功能。

实例050 使用command标记元素实现动态对话框效果

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\03\050

实例说明

command是HTML5中新增的标记元素，该元素功能是定义各种类型的命令按钮。本实例将使用command标记元素实现动态对话框效果。运行本实例，当单击“文件”或“打开”文本时，页面中会出现对话框的效果，如图3.11所示。

图3.11 实现动态对话框效果

技术要点

本实例主要应用了HTML5中新增的command标记元素。command元素包含的属性及其描述信息如表3.1所示。

表3.1 command元素属性及描述信息

command元素能够定义各种类型的按钮，例如命令按钮、单选按钮、复选框按钮等。如果command元素和menu元素结合使用，可以在网页中实现弹出式的下拉菜单。当单击菜单中的某个选项时，将执行相应的操作。

说明：目前只有InternetExplorer浏览器支持<command>标签。

实现过程

（1）创建index.html文件，编写页面的CSS样式，CSS代码如下：

<styletype="text/css">

body{

padding:5px;

font-size:12px

}

menu{

padding-left:10px;

padding-bottom:10px;

display:block;

border: solid 1px #365167;

width:40px;

height:50px

}

command{

float:left;

margin:5px;

width:30px;

cursor:pointer;

}

#dialog{

display:none;

position:absolute;

left:25%;

top:9%;

font-size:13px;

width:320px;

height:150px;

border:#666 solid 3px

}

#dialog .title{

padding:5px;

background-color:#eee;

height:21px;

line-height:21px

}

#dialog.title.fleft{

float:left

}

#dialog.title.fright{

float:right

}

#dialog .content{

padding:50px

}

</style>

（2）在文件中定义一个menu元素，在该元素内部定义两个command元素。当单击其中一个command元素时会弹出一个对话框，并且显示对应操作的内容。关键代码如下：

function command_click(str){

document.getElementById("dialog").style.display="block";

var strContent="您正在操作<font color=red>"+str+"</font>选项";

document.getElementById("divTip").innerHTML=strContent;

}

</script>

<menu>

</menu>

<divclass="title">

</div>

</div>

举一反三

根据本实例，读者可以进行以下操作。

使用command标记元素实现图片按钮效果。

使用command标记元素定义复选框按钮效果。

实例051 使用progress标记元素实现进度条效果

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\03\051

实例说明

progress元素是HTML5 标准草案中新增的元素之一。它表示一个任务的完成进度，这进度可以是不确定的，只是表示进度正在进行。本实例将使用progress标记元素实现进度条效果。在Chrome浏览器中运行本实例，如图3.12所示。当单击页面上的“请点击”按钮时，会发现进度条由0%变成了100%的效果，如图3.13所示。

图3.12 单击按钮之前的进度条效果

图3.13 单击按钮之后的进度条效果

技术要点

实现本实例主要应用HTML5新增的页面元素progress。该元素主要有两个属性：value属性表示已经完成了多少工作量，max属性表示总共有多少工作量。工作量的单位是随意的，不用指定。

注意：value和max属性的值必须大于0，value的值小于或等于max属性的值。

实现过程

（1）创建index.html文件，定义progress元素，并设置其max属性值为100，然后定义一个按钮，当单击该按钮时执行JavaScript脚本中的相应函数。关键代码如下：

<h2>progress元素的使用实例</h2>

<p>完成百分比:<progressid="p" max=100><span>0</span>%</progress></p>

</section>

（2）在页面中编写JavaScript脚本，实现进度条由0%变成100%的效果，主要代码如下：

var progressBar =document.getElementById('p');

functionbutton_onclick(){

var progressBar =document.getElementById('p');

progressBar.getElementsByTagName('span')[0].textContent ="0";

for(var i=0;i<=100;i++)

updateProgress(i);

}

functionupdateProgress(newValue){

var progressBar =document.getElementById('p');

progressBar.value=newValue;

progressBar.getElementsByTagName('span')[0].textContent =newValue;

}

</script>

举一反三

根据本实例，读者可以进行以下操作。

使用progress标记元素实现上传文件时的进度条效果。

使用progress标记元素实现载入文件时的进度条效果。

实例052 使用meter标记元素实现百分比效果

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\03\052

实例说明

在HTML5新增页面元素中，meter元素标签用来表示规定范围内的数量值，如磁盘使用量比例、投票人数占总投票人数的比例等。本实例将使用meter标记元素来实现规定范围内数量值的百分比效果，其在Chrome浏览器中的运行结果如图3.14所示。

图3.14 使用meter元素实现百分比效果

技术要点

本实例主要应用HTML5的新增页面元素meter元素，该元素共有6个属性。

● Value：表示当前标量的实际值；如果不作指定，那么<meter>标签中的第一个数字就会被认为是其当前实际值，例如<meter>2outof10</meter>中的“2”；如果标签内没有数字，那么标量的实际值就是0。

● Min：当前标量的最小值；如不作指定则为0。

● Max：当前标量的最大值；如不作指定则为 1；如果指定的最大值小于最小值，那么最小值会被认为是最大值。

● Low：当前标量的低值区；必须小于或等于标量的高值区数字；如果低值区数字小于标量最小值，那么它会被认为是最小值。

● High：当前标量的高值区。

● Optimum：最佳值；其范围在最小值与最大值区间当中，并且可以处于高值区。

实现过程

创建 index.html 文件，在文件中定义 meter元素，将磁盘使用量以及得分情况通过百分比的形式显示在页面中，代码如下：

<!DOCTYPEhtml>

<title>使用meter标记元素实现百分比效果</title>

<p>磁盘使用量：<meter value="50" min="0" max="160">50/160</meter>GB</p>

<p>你的得分是：<meter value="91" min="0" max="100" low="10" high="90" optimum="100">A+</meter>分

举一反三

根据本实例，读者可以进行以下操作。

使用meter标记元素显示投票率。

使用meter标记元素显示关键词匹配程度。

实例053 设置progress 进度条的样式

本实例可以美化界面、简化操作

实例位置：光盘\mingrisoft\03\053

实例说明

在实例051中，我们通过使用progress标记元素实现了进度条效果。本实例在它的基础上为进度条增加自定义样式。其在Chrome浏览器中的运行效果如图3.15、图3.16所示。

图3.15 单击按钮之前的进度条效果

图3.16 单击按钮之后的进度条效果

技术要点

要想设置progress进度条的样式，只需为progress元素定义CSS样式即可。progress元素的CSS样式代码如下：

<styletype="text/css">

progress {

width: 160px;

border: 1px solid #0064B4;

background-color:#e6e6e6;

}

progress::-moz-progress-bar { background:#0064B4;}

progress::-webkit-progress-bar { background:#e6e6e6;}

progress::-webkit-progress-value { background: #0064B4;}

</style>

实现过程

<h2>progress元素的使用实例</h2>

<p>完成百分比:<progressid="p" max=100><span>0</span>%</progress></p>

</section>

（2）在页面中编写 JavaScript 脚本，实现进度条由 0%变成 100%的效果，主要代码如下：

var progressBar =document.getElementById('p');

functionbutton_onclick(){

var progressBar =document.getElementById('p');

progressBar.getElementsByTagName('span')[0].textContent ="0";

for(var i=0;i<=100;i++)

updateProgress(i);

}

functionupdateProgress(newValue){

var progressBar =document.getElementById('p');

progressBar.value=newValue;

progressBar.getElementsByTagName('span')[0].textContent =newValue;

}

</script>

（3）在页面中为progress元素定义CSS样式，代码如下：

<styletype="text/css">

progress {

width: 160px;

border: 1px solid #0064B4;

background-color:#e6e6e6;

}

progress::-moz-progress-bar { background:#0064B4;}

progress::-webkit-progress-bar { background:#e6e6e6;}

progress::-webkit-progress-value { background: #0064B4;}

</style>

举一反三

根据本实例，读者可以进行以下操作。

自定义上传文件时的进度条样式。

自定义载入图片时的进度条样式。

实例054 使用html根元素显示文字

本实例是一个提高效率、人性化的程序

实例位置：光盘\mingrisoft\03\054

实例说明

在HTML5中，html元素用于告知浏览器这是一个HTML文档。html元素也被称为根元素，是HTML文档中最外层的元素。本实例主要实现应用html根元素显示一段文字。运行本实例，结果如图3.17所示。

图3.17 使用html 根元素显示文字

技术要点

在任何的一个HTML文件里，最先出现的HTML标签就是<html>，它用于表示该文件是以超文本标识语言（HTML）编写的。<html>是成对出现的，首标签<html>和尾标签</html>分别位于文件的开始和末尾，文件中的所有内容和HTML标签都包含在其中。例如：

<html>

文件的所有内容

</html>

实现过程

本实例的具体代码如下：

<!DOCTYPEhtml>

<html>

<head>

<title>使用html根元素显示文字</title>

<styletype="text/css">

body{

font-size:12pt;

}

</style>

</head>

<body>

飞雪连天射白鹿

笑书神侠倚碧鸳

......

</body>

</html>

在上述代码中，<html>元素是最外层元素，它包括两个主要部分：头部元素<head>和主体元素<body>。头部又包含 3 个元素，其中，<meta>元素中的 charset属性设置了网页的字符集的类型，<title>元素设置了页面的标题，<style>元素设置了页面中<body>元素的字体样式。在主体元素<body>中输入页面中要显示的文字。

举一反三

根据本实例，读者可以进行以下操作。

使用html根元素显示图片。

使用html根元素显示网页文本内容。

实例055 通过标签设置目标链接

本实例是一个提高效率、人性化的程序

实例位置：光盘\mingrisoft\03\055

实例说明

本实例将实现通过标签设置目标链接。运行该程序，如图3.18所示。当鼠标移动到链接文字上面时，可以看到在IE的状态栏中显示出其完整的链接地址，它是由代码中设置的基底网址加上设置的相对地址组成的。单击链接文字后，将在新窗口打开链接的目标地址，如图3.19所示。

图3.18 显示链接文字

图3.19 进入明日图书网首页

技术要点

本实例主要应用基底网址标记<base>设置目标链接的绝对路径。在HTML页面中只能设置一个基底标记，而且要将其放置在头部以及任何包含URL地址的语句之前。

语法如下：

<basehref="链接地址"target="新窗口的打开方式">

在该语法中，“链接地址”就是要设置的页面的基底网址，而“新窗口的打开方式”可以设置为不同的效果，其属性值及含义如表3.2所示。

表3.2 链接窗口的打开方式

实现过程

创建index.html文件，在文件中首先定义文字链接；然后在<head>元素中定义<base>标记，并设置链接地址为明日图书网的网址http://www.mingribook.com/，同时设置其在新窗口中打开；最后设置文字链接的样式，具体代码如下：

<html>

<head>

<title>基底网址标记的使用</title>

<basehref="http://www.mingribook.com/" target="_blank"/>

<styletype="text/css">

padding:8px;

font-size:13px;

text-decoration:none;

}

a:hover{

border:solid 1px #ccc;

background-color:#eee;

}

</style>

</head>

<body>

<ahref="index.php">点击进入明日图书网</a>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

通过<link>标签链接外部样式表。

通过<base>标签设置图像的绝对路径。

实例056 通过JavaScript脚本获取并显示文本框的内容

本实例是一个提高效率、人性化的程序

实例位置：光盘\mingrisoft\03\056

实例说明

本实例将以一个简单的注册页面为例，介绍如何通过JavaScript 脚本获取并显示文本框的内容。运行本实例，单击页面中的“提交”按钮，即可显示用户输入文本框的内容，如图3.20所示。

图3.20 获取并显示文本框的内容

技术要点

实现本实例的关键是如何通过JavaScript 脚本获取表单元素的值。每个表单都是一个表单元素的聚集，要想访问表单元素主要有3种方式。

● 通过elements[]进行访问，例如document.form1.elements[0]。

● 通过name属性按名称访问，例如document.form1.text1。

● 在支持 DOM 的浏览器中，使用document.getElementById("elementID")来定位要访问的表单元素。

技术要点

（1）创建index.html文件，首先在文件中创建一个简单的用户注册表单和一个提交按钮，当单击该按钮时将执行JavaScript函数getValue()，代码如下：

<formname="form1" method="post" action="">

用户名：<input type="text" name="username" size=15><br>

密  码：<input type="password"name="password" size=15><br>

</form>

（2）定义JavaScript函数getValue()，通过表单元素的name属性按名称访问来获取文本框的值，代码如下：

functiongetValue(){

document.write("您输入的用户名是："+document.form1.username.value+"<br>您输入的密码是："+document.form1.password.value);

}

</script>

举一反三

根据本实例，读者可以进行以下操作。

通过JavaScript脚本获取单选按钮的值。

通过JavaScript脚本获取文本域的内容。

通过JavaScript脚本获取下拉菜单的值。

实例057 实现树节点效果

本实例是一个提高效率、人性化的程序

实例位置：光盘\mingrisoft\03\057

实例说明

在HTML5 中新增了许多用于标志节点的元素，通过这些元素可以将页面内容实现分段或分区显示。本实例主要使用nav元素实现节点效果，其运行结果如图3.21所示。

图3.21 使用<nav>元素实现节点效果

技术要点

本实例主要应用HTML5中新增的nav元素。在HTML5中，nav元素用于定义导航链接的部分，它是页面的一个导航元素。该元素可以将具有导航性质的链接放置在一块区域中，使页面的元素更有语义性。该元素可以在一个文档中多次出现，作为页面或部分区域的导航。示例代码如下：

<nav>

<ahref="index.html">首页</a>

<ahref="bbs.html">论坛</a>

</nav>

通过上述代码创建了一个导航区域，在nav元素中包含了两个用于导航的超级链接。该导航可用于全局导航，也可以放在某个段落，作为区域导航。

实现过程

创建index.html文件，在文件中定义两个nav元素，第一个nav元素用于页面的导航；第二个nav元素放置在article元素中，用作页内的导航。具体代码如下：

<nav>

<ul>

<li><a href="/events">JavaScript</a></li>

...more...

</ul>

</nav>

</header>

<nav>

<ul>

...more...

</ul>

</nav>

<div>

<p>PHP图书分类</p>

</section>

<p>ASP图书分类</p>

</section>

...more...

</div>

</footer>

</article>

</footer>

举一反三

根据本实例，读者可以进行以下操作。

应用nav元素设置页面全局导航。

在<article>标签内应用nav元素。

实例058 使用mark元素高亮显示搜索关键词

本实例是一个提高效率、人性化的程序

实例位置：光盘\mingrisoft\03\058

实例说明

mark元素表示页面中需要突出显示或高亮显示的，对于当前用户具有参考作用的一段文字。它通常使用于引用原文的时候，目的是引起读者的注意。本实例将应用mark元素高亮显示对于“HTML5”关键词的搜索结果。其运行结果如图3.22 所示。

图3.22 mark元素应用在网页检索时的实例

技术要点

实现本实例主要是应用HTML5中新增的mark元素，该元素的主要功能是在文本中高亮显示某个或某几个字符，旨在引起用户的特别注意。其使用方法与<em>和<strong>有相似之处，但相比而言，HTML5中新增的mark元素在突出显示时，更加随意与灵活。

实现过程

在页面中应用HTML5 中新增的mark元素对搜索结果中的关键词“HTML 5”进行高亮显示，关键代码如下：

<h1>搜索"<mark>HTML5<mark>",找到相关网页约10,210,000篇，用时0.041秒</h1>

<h2>

<ahref="http://developer.51cto.com/art/200907/133407.htm">

专题：<mark>HTML5</mark>下一代Web开发标准详解_51CTO.COM-技术成就梦想 ...

</a>

</h2>

<p><mark>HTML5</mark>是近十年来Web开发标准最巨大的飞跃</p>

</article>

<h2>

<ahref="http://paranimage.com/list-of-html-5/">

<mark>HTML5</mark>一览 |帕兰映像

</a>

</h2>

<p><mark>html 5</mark>最近被讨论的越来越多，越来越烈...</p>

</article>

<h2>

<ahref="http://www.chinabyte.com/keyword/HTML+5/">

<mark>html 5</mark>_比特网

</a>

</h2>

<p><mark>HTML5</mark>提供了一些新的元素和属性，反映典型...</p>

</article>

<h2>

<ahref="http://www.slideshare.net/mienflying/html5-4921810">

<mark>HTML5</mark>表单

</a>

</h2>

<p>about <mark>HTML5</mark>Form,the web form2.0 tech</p>

</article>

</section>

举一反三

根据本实例，读者可以进行以下操作。

使用mark元素高亮显示文档的关键字。

使用mark元素高亮显示带有背景颜色的文字。

实例059 在网页中突出显示某些文字

本实例是一个提高效率、人性化的程序

实例位置：光盘\mingrisoft\03\059

实例说明

本实例是引用了一篇关于“明日科技”的介绍，在原文中并没有把“编程词典”标示出来，但在网页中为了强调“编程词典”，特意把这个词高亮显示出来。其运行结果如图3.23所示。

图3.23 在网页中突出显示某些文字

技术要点

本实例应用的是HTML5中新增的页面元素mark，关于该元素的介绍请参考实例058，这里不再赘述。

实现过程

创建index.html文件，在文件中对“编程词典”应用mark元素。关键代码如下：

<!DOCTYPEhtml>

<title>mark元素应用在文章引用时的示例</title>

明日科技：数字化出版的倡导者

<p>

明日科技成立于1998年，多年从事编程图书的开发以及网站和程序的制作。<mark>编程词典</mark>，明日科技是数字化出版的先锋，含有丰富的资源。

</p>

举一反三

根据本实例，读者可以进行以下操作。

使用<mark>标签标出文章重点。

使用<mark>标签标记文章出处。

实例060 使用cite元素引用文档

本实例是一个提高效率、人性化的程序

实例位置：光盘\mingrisoft\03\060

实例说明

cite元素可以创建一个引用标记，用于文档中参考文献的引用说明，如书名或文章名称等。本实例将介绍如何使用cite元素引用文档。运行本实例，结果如图3.24所示。

图3.24 使用cite元素引用文档

技术要点

本实例主要应用的是cite元素，该元素表示作品（例如一本书、一篇文章、一首歌曲等）的标题。该作品可以在页面中被详细引用，也可以只在页面中提一下。通过cite元素引用的内容在页面中显示为斜体。

实现过程

创建 index.html文件，在文件中，首先通过<p>标签显示一段文档；然后，在文档的下面使用<cite>标签标识这段文档所引用的文档名称。代码如下：

<p>

HTML语言（Hypertext MarkupLanguage，中文通常称为超文本置标语言或超文本标记语言）是一种文本类、解释执行的标记语言，它是Internet上用于编写网页的主要语言...</p>

<p>

---引自<<<cite>HTML语言简介</cite>>>---

</p>

举一反三

根据本实例，读者可以进行以下操作。

使用cite元素引用书名。

使用cite元素引用一部电影名称。

实例061 在网页中显示一幅图片

本实例是一个提高效率、人性化的程序

实例位置：光盘\mingrisoft\03\061

实例说明

figure元素是 HTML5 中的新增页面元素，该元素代表一个块级图像，还可以包含说明。本实例将通过figure元素在网页中显示一幅图片。运行本实例，结果如图3.25所示。

图3.25 通过figure元素显示一幅图片

技术要点

本实例主要使用HTML5中新增的figure元素。该元素用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生任何影响。

figcaption元素表示figure元素的标题。它从属于figure元素，所以其必须书写在figure元素内部，可以书写在figure元素内的其他从属元素的前面或后面。一个figure元素内最多只允许放置一个figcaption元素，但允许放置多个其他元素。

实现过程

创建index.html文件，在文件中定义figure元素，在该元素内部定义图像以及figure元素的标题，具体代码如下：

<!DOCTYPEhtml><head>

<title>通过figure元素显示图片</title>

</head>

<figcaption>明日科技logo</figcaption>

</figure>

举一反三

根据本实例，读者可以进行以下操作。

通过figure元素定义文档的插图。

通过figure元素定义图表。

实例062 在网页中显示一个文本框架

本实例是一个提高效率、人性化的程序

实例位置：光盘\mingrisoft\03\062

实例说明

在HTML5 中，iframe元素的功能是在页面中创建包含另一个文档的框架。本实例将使用iframe元素在网页中显示一个文本框架。运行本实例，结果如图3.26所示。

图3.26 在网页中显示一个文本框架

技术要点

本实例主要是通过<iframe>标签实现的。<iframe>标签是一种特殊的框架页面，在浏览器窗口中可以嵌套子窗口，在其中显示子页面的内容。

语法如下：

<iframesrc="文件" height="数值" width="数值"name="框架名称" scrolling="值" frameborder="值"></iframe>

表3.3 <iframe>标签的属性及其说明

续表

实现过程

创建 index.html 文件，在文件中应用<iframe>标签创建一个文本框架，在框架中显示明日图书网主页的内容。代码如下：

<!DOCTYPEhtml>

<html>

<head>

<title>在网页中显示一个文本框架</title>

</head>

<body>

<iframesrc="http://www.mingribook.com"></iframe>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

在需要重新组建的网页中应用iframe元素。

设置<iframe>框架的各种属性。

实例063 使用object元素在网页中显示一个Flash

本实例是一个提高效率、人性化的程序

实例位置：光盘\mingrisoft\03\063

实例说明

为了美化网站，使其有一个更好的视觉感受，可以将Flash技术引入到网页中，使网页更具有表现力。本实例将介绍如何使用object元素在网页中显示一个Flash。运行本实例，如图3.27所示。

图3.27 使用object元素显示Flash

技术要点

本实例主要应用object元素将Flash显示在网页中。object元素可支持多种不同的媒介类型，例如图片、音频、视频等。在本实例中，主要使用object元素的type、data属性来显示Flash。关键代码如下：

实现过程

创建 index.html 文件，定义一个<div>标签，并设置其在页面中的显示样式；然后在<div>标签内部定义object元素，并设置它的宽、高等属性。代码如下：

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>在网页中显示一个Flash</title>

</head>

<body>

</object>

</div>

</body>

</html>

举一反三

根据本实例，读者可以进行以下操作。

使用object元素在网页中播放视频文件。

使用object元素在网页中播放音频文件。