HTML和Javascript 网页面试技巧.docx

1、HTML和Javascript 网页面试技巧第7章 HTML和Javascript本章主要介绍HTML语言和Javascript语言。HTML 是Hyper Text Markup Language的缩写，即超文本标记语言。它是用标记标签来描述网页的一种语言。Javascript是由数行可执行计算机代码组成，它被直接嵌入HTML页面，用来向HTML页面添加交互行为的一种脚本语言。Javascript被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。相信本章HTML和Javascript的实例会给你提供面试帮助。面试题101：在浏览器地址栏前添加自定义的图标

2、在浏览器的地址栏中显示自定义的个性化图标，如图7-1所示。图7- 1 个性化小图标出现频率：关键考点：浏览器调用favicon.ico图标；link标签的使用；rel属性的设置；考点分析：favicon图标可以让浏览器的收藏夹既可以显示标题，也可以显示一个网站的图标，同时这个图标也可以出现在地址栏中，网站的图标代表了一个网站的理念。浏览器调用favicon一般是先在网页所在的目录下寻找favicon.ico文件，如果没有，就到网站的根目录下寻找。如果希望让不同的网页显示不同的favicon，那就要多放几个favicon.ico了。下面来分析一下如何在浏览器的地址栏中添加个性化图标：代码清单10

3、1.1010203 04使用 link 标签可以定义当前文档与其它文件之间的关系，rel 指定当前文档与 href 文本框中的文档之间的关系，href指出了定义被链接文档的位置，Type指定了目标文件的类型。问题解答：（1）在PS中设计出网站的个性化图片。（2）下载Axialis IconWorkshop软件，制作一个图标文件，大小为16*16像素。文件扩展名为ico，保存为favicon.ico，存放到网站的根目录下。（3）新建HTML文档。（4）在“head”标记内添加代码，代码如“代码101图标”所示：代码101图标01 02 03 /IE地址栏换成自定义的图标04 /在收藏夹中显示自定

4、义的图标05 测试小图标06 （5）保存文档，并在IE上运行。面试题102：改动网页显示时的顶部提示信息改变网页的顶部提示信息，如图7-2所示。图7- 2 网页顶部提示信息出现频率：关键考点：head标签中的title属性；HTML的标题栏；考点分析：title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。Head标签中的title属性，可以改变网页顶部提示信息，一个好的网页顶部提示信息可以清楚地显示出网页的主题。在Dreamweaver中，有三种方法可以改变网页的顶部提示信息即网页的标题：在浏览器左上角的“标题”

5、栏进行设置；对“设计”视图中的页面属性进行设置；“代码”视图中对title标签进行设置。问题解答：方法一（1）新建一个HTML文档。（2）在“标题”栏中输入“大学英语论坛”，如图7-3所示。图7- 3 标题栏文本（3）保存文档并浏览最终效果。方法二（1）新建一个HTML文档。（2）在“设计”视图，右击鼠标，选择“页面属性（T）”，弹出页面属性对话框，如图7-4所示。图7- 4 页面属性对话框（3）单击“标题/编码”选项，在“标题”中输入“大学英语论坛”，如图7-5所示，单击“确定”按钮。图7- 5 标题设置（4）保存文档并浏览最终效果。方法三（1）新建HTML文档。（2）在head标签的与之间

6、添加代码，代码如“代码102-顶部提示信息”所示。代码102-顶部提示信息01 网页顶部提示信息 /设置title的属性（3）保存文档，并在IE上运行。面试题103：添加图片的提示信息为HTML页面的图片添加说明文字，当鼠标移上去时，会有如图7-6和图7-7所示的提示信息图7- 6 图片提示信息图7- 7 文字提示信息出现频率：关键考点：alt属性的使用；在浏览器无法载入图像时，alt属性告诉读者们失去的信息考点分析：alt属性只能用在img、area和input元素中，alt属性用在img元素中，对图片起到一个解释的作用，使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的，

7、并且在上下文中有意义。图片文件不能正常显示时，浏览时会直接出现提示信息。问题解答：1、添加图片的提示信息（1） 新建HTML文档，将鼠标在“body”部分单击。（2） 在菜单栏中选择“插入”|“ 图片”，在“选择图像源文件”窗口中选择所需要的图片文件，单击“确定”按钮，弹出“图像标签辅助功能属性”对话框。（3） 在“图像标签辅助功能属性”对话框的“替换文本”域中输入要显示的文字“夜空下的仰望”，如图7-8所示。图7- 8 图像替换文本（4） 保存文档，按F12键预览制作的效果。2、添加链接文字的提示信息（1）新建HTML文档。（2）在“body”部分添加代码，代码如“代码103-链接文字提示信

8、息”。代码103-链接文字提示信息01 皖江印象 /为超链接的文字添加提示信息（3）保存文档，并在IE上运行。面试题104：让网页载入时弹出一个广告窗口实现在一个HTML网页中打开时弹出一个广告窗口，如图7-9所示。图7- 9 页面弹出广告窗口出现频率：关键考点：行为面板考点分析：行为是响应某一事件而采取的一个动作。例如，当用户把鼠标移动至对象上（称：事件），这个对象会发生预定义的变化（称：动作）。事件是为大多数浏览器理解的通用代码，浏览器通过释译来执行动作。 一个事件也可以触发许多动作，你可以定义它们执行的顺序。利用Dreamweaver的行为，无需书写代码，就可以实现丰富的动态页面效果，达

9、到用户与页面的交互的目的。行为面板有以下几个功能，如图7-10所示。图7- 10 行为面板1、显示设置事件仅显示附加到当前文档的那些事件。事件被分别划归到客户端或服务器端类别中。每个类别的事件都包含在可折叠的列表中。显示设置事件是默认的视图。2、显示所有事件按字母顺序显示属于特定类别的所有事件。3、添加行为（）显示特定菜单，其中包含可以附加到当前选定元素的动作。当从该列表中选择一个动作时，将出现一个对话框，您可以在此对话框中指定该动作的参数。如果菜单上的所有动作都处于灰显状态，则表示选定的元素无法生成任何事件。4、删除事件（）从行为列表中删除所选的事件和动作。5、向上箭头和向下箭头按钮在行为列

10、表中上下移动特定事件的选定动作。只能更改特定事件的动作顺序，例如，可以更改 onLoad 事件中发生的几个动作的顺序，但是所有 onLoad 动作在行为列表中都会放置在一起。对于不能在列表中上下移动的动作，箭头按钮将处于禁用状态。行为面板应用很广，本例设置状态栏文本就是其中的应用之一，其基本步骤如下：（1）选中要附加行为的对象,用鼠标单击选中。（2）打开动作菜单,在“行为”面板上单击“”号钮，弹出动作菜单。（3）选择设置文本里的设置状态条文本,单击“设置状态条文本”动作项目，弹出对话框。（4）输入状态条信息,在“信息”处，输入字符。在弹出的事件菜单中选择。问题解答：（1）新建一个名为“page

11、.html”的文档。（2）在文档的标题栏中输入“新消息”。（3）在“body”部分输入文本“学校首届多媒体大赛报名开始，截止时间6月1日！”。（4）选中该文本，在属性栏中为其设置颜色，颜色为“#FF0000”，如图7-11所示。图7- 11 设置颜色（5）保存文档。（6）新建一个文档，将其中内容改为“载入一个广告窗口”。（7）在“设计”视图中右击鼠标，在弹出的“页面属性”对话框中，将背景颜色设置为“#CCCCFF”。（8）在“代码”视图的“body”部分单击。（9）选择“窗口” “行为”命令，进入行为面板。（10）在行为面板中单击添加行为按钮“+”，选择“打开浏览器窗口”，如图7-12所示。图

12、7- 12 添加行为（11）在“打开浏览器窗口”对话框中进行相关设置，如图7-13所示。图7- 13 打开浏览器窗口（12）保存文档，并在IE上运行。面试题105：设置可以定时自动关闭的窗口的功能在Dreamweaver中实现当前网页的自动关闭功能，如图7-16和图7-17所示。图7- 14 1秒后的页面图7- 15 关闭的页面出现频率：关键考点：setTimeout定义；setTimeout用法考点分析：setTimeout（）方法用于在指定的延迟时间后调用一次表达式，如果要多次调用，就要使用表达式再次调用 setTimeout()。setTimeout有两种形式：（1）setTimeout

13、 (code, interval)；（2）setTimeout(func, interval, args)，其中 code是一个字符串，func是一个函数，interval的单位是毫秒。问题解答：（1） 新建一个HTMLr文档，保存为107.html（2） 在“body”中书写实现窗口自动关闭的代码，代码如“代码107-窗口关闭”所示：代码107-窗口关闭01 02 0)setTimeout(clock();,1000);08 else self.close () ;09 var i=20 /设置倒计时的初始值为20秒10 clock(); /调用函数11 /-12 （3）保存文档，并按F12

14、键预览制作效果。面试题106：建立网页中可以随便拖动的对象利用DIV层来实现HTML网页中随便拖动对象，以图片为例。（加入实例图，如果不好截图，可以指明见附件。）出现频率：关键考点：层的创建；层的属性考点分析：层（DIV）是用于准确确定元素在浏览器中的位置，层可以放在页面的任何位置，相当于一个容器，其内部可以包含文本、图像、动画等，也可以嵌套其他层。层的创建有三种方法：（1） 插入层，在菜单栏选择“插入”|“布局对象”|“层命令”即可；（2） 拖放层，进入“设计”视图，在“布局”快捷栏中拖拽“绘制层”按钮到设计视图中（3） 绘制层，进入“设计”视图，单击“绘制层”按钮，在文档内按住鼠标左键拖动

15、一个矩形。层的属性设置：在“设计”视图中，单击选中需要设置属性的层，右击选择“属性”，对属性进行相关设置。层的属性设置如下：（1）层编号：层的名字；（2）左、上：设置该层相对于上层的左上角的位置；（3）宽、高：设置层的宽度和高度；（4）Z轴：设置层的叠放顺序，值越大层越在前面；（5）可见性：default不指明层的可见性，inherit继承父层的可见性，visible显示层及其内容，hidden隐藏层及其内容；（6）背景颜色：设置层的背景色；（7）背景图像：设置层的背景图；（8）溢出：visible 表示内容超出层的范围时自动扩展，hidden表示隐藏超出部分内容，scroll表示自动添加滚动

16、条，auto表示只有当内容超出时添加滚动条；（9）剪辑：设置图层的可视部分；（10）类：可以添加CSS样式或新建CSS样式。同时，我们可以再“行为”面板中给层添加一些“行为”，如拖动层。问题解答：（1） 新建HTML文档，保存为“116.html”。（2） 在“body”部分单击，在菜单栏中选择“插入”|“布局对象”|“层”命令，创建了一个层“Layer1”。（3） 对层“Layer1”进行设置，如图7-16所示。图7- 16 图层属性设置（4） 在页面中层“Layer1”之外点击鼠标。（5） 在菜单栏中选择“窗口”|“行为”命令，在“行为”面板单击“添加行为”按钮，选择“拖动层”命令，进行设

17、置，注意要点击“获取目前位置”，如图7-17所示。图7-17拖动层（6） 点击确定，保存文档，按F12键浏览并用鼠标拖动页面中图片查看效果。面试题107：定制可自由在页面内跳转的链接利用DrHTMLr中的来实现在页面内自由跳转的链接，如下图所示。图7- 18 页面内跳转出现频率：关键考点：锚点链接考点分析：锚点主要用于内容庞大的网页，通过设置锚点和锚点链接，可以直接转到要浏览的页面内容，方便了用户浏览信息，这样用户在浏览页面时，单击某个小标题即可跳转到页面的相应文章内容处。创建到命名锚记的链接的过程分为两步: 创建命名锚记和链接到命名锚记。命名锚点简称锚点，标记了页面中跳转的目标位置，方法有两

18、种，一种是选择“插入”|“命名锚点”命令，另一种方法是在“插入”工具栏中选择“常用”，单击“命名锚点”图标。在弹出的“命名锚记”对话框中设置锚点名称，如图7-19所示，这个标记是用于记住锚点的，用户浏览时是看不见此标记的。图7- 19 命名锚点链接锚点是将文本链接到所设置的锚点处，选中文本，在属性栏的“链接”中输入“#”和锚点名称，如“#白羊座”，也可以拖拽链接后“指向文件”图标到目标锚点，链接锚点属性设置如下图7-20所示。图7- 20链接锚点问题解答：（1） 新建一个HTML文档。（2） 单击文档的“body”部分，在“设计”视图张输入一段文字，部分文字如图7-21所示。图7- 21文本部

19、分（3） 在“白羊座邂逅”左侧单击，在“插入”工具栏中选择“常用”，单击“命名锚点”图标，在弹出的“命名锚点”对话框中，将“锚记名称”设置为“白羊座”，同样的在每首诗词标题的左侧添加命名锚点，在“金牛座暮色”左侧添加锚点，名称设置为“金牛座”，在“双子座莲的心事”左侧添加锚点，名称设置为“双子座”。（4） 选中页面头部的“白羊座”文本，在链接中输入“#白羊座”，同样的，选中“金牛座”，在“链接”中输入“#金牛座”， 选中“双子座”，在“链接”中输入“#双子座”。（5） 在每首诗的底部输入“返回”，选中此文本，在“链接”中输入“#top”（6） 在“设计”视图中查看，如图7-22所示：图7- 2

20、2 锚点链接的使用（7） 保存文档，并浏览效果。面试题108：用javascript实现网页中的进度条用Javascript实现网页中的进度条，如图7-23所示。图7- 23 Javascript实现进度条出现频率：关键考点：document对象的方法getElementById（）；setTimeout()；考点分析：Javascript是使用“对象化编程”的，即把javascript能涉及的范围划分成大大小小的对象，所有的编程都是基于编程出发的。document对象是javascript对象中的一个。document.getElementById(ID)是获取指定ID值的对象setTime

21、out（）表示指定的时间到了，执行某个指定的函数，这时候它的使命即告完成，只执行一次。问题解答：（1）新建一个名为“111.html”的文档。（2）在文档的标题栏中输入“进度条”。（3）在“代码”视图中的“body”部分，书写以下代码。如 “代码112进度条”所示。01 进度条02 03 04 05 06 07 #loadwidth:500px;height:20px;border:1px #000 solid;08 #loadingposition:absolute;z-index:2;height:25;filter:09 progid:DXImageTransform.microsoft

22、.gradient(gradienttype=1,startColorStr=white,endColorStr=#39867b);10 #loadtextposition:absolute;z-index:2;width:100%;height:100%;line-height:25px;text-align:center;11 1%12 13 var i=0;14 function test()i+;15 document.getElementById(loading).style.width = i + %;16 document.getElementById(loadtext).inn

23、erText = i + %;17 if(i100)setTimeout(test(),200);18 setTimeout(test(),200);(4) 保存文档，并在IE上运行。如图所示图7- 24 Javascript进度条图7- 25 Javascript进度条面试题109：用javascript实现网页时钟用Javascript实现网页时钟，如图7-26所示。图7- 26 Javascript实现网页时钟出现频率：关键考点：function函数；if条件句；setTimeout()；考点分析：用function函数来初始化用if（）条件句实现函数的循环。setTimeout（）表示

24、指定的时间到了，执行某个指定的函数，这时候它的使命即告完成，只执行一次。问题解答：（1）新建一个名为“112.html”的文档。（2）在文档的标题栏中输入“网页时钟”。（3）在“代码”视图中的“body”部分，书写以下代码。如 “代码113时钟”所示。01 02 font-size : 14pt;font-weight : bold;color: #00008D;-03 04 font-family : Comic Sans Ms;font-size : 14pt;05 font-weight : bold;color: #00008D;-06 07 08 var ctimer;09 func

25、tion init() /初始化10 if (document.all) /将第二个时间得左侧与第一个时间的左侧对齐11 tim2.style.left=tim1.style.posLeft; /第二个时间在第一个时间的下方12 tim2.style.top=tim1.style.posTop+tim1.offsetHeight-6; /调用settimes()函数 13 settimes();14 function settimes()15 var time= new Date(); /-获取当前日期16 hours= time.getHours();/ 获取当前时间-小时-17 mins=

26、 time.getMinutes(); /获取当前时间-分钟-18 secs= time.getSeconds(); /-获取当前时间-秒-19 if (hours20 hours=0+hours;21 if(mins22 mins=0+mins;23 if (secs24 secs=0+secs;/设置tim1和tim2的格式-25 tim1.innerHTML=hours+:+mins+:+secs26 tim2.innerHTML=hours+:+mins+:+secs /每0.96秒更新一次时间-27 ctimer=setTimeout(settimes(),960); 28 网页时钟实例29 33 (4) 保存文档，并在IE上运行。如图所示面试题110：用javascript实现网页中带链接的滚动字幕用Javascript实现网页中带连接的滚动字幕，如