HTML和Javascript 网页面试技巧.docx
《HTML和Javascript 网页面试技巧.docx》由会员分享，可在线阅读，更多相关《HTML和Javascript 网页面试技巧.docx（26页珍藏版）》请在冰豆网上搜索。
HTML和Javascript网页面试技巧
第7章HTML和Javascript
本章主要介绍HTML语言和Javascript语言。
HTML是HyperTextMarkupLanguage的缩写，即超文本标记语言。
它是用标记标签来描述网页的一种语言。
Javascript是由数行可执行计算机代码组成，它被直接嵌入HTML页面，用来向HTML页面添加交互行为的一种脚本语言。
Javascript被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
相信本章HTML和Javascript的实例会给你提供面试帮助。
面试题101：
在浏览器地址栏前添加自定义的图标
在浏览器的地址栏中显示自定义的个性化图标，如图7-1所示。
图7-1个性化小图标
出现频率：
★★★
关键考点：
浏览器调用favicon.ico图标；link标签的使用；rel属性的设置；
考点分析：
favicon图标可以让浏览器的收藏夹既可以显示标题，也可以显示一个网站的图标，同时这个图标也可以出现在地址栏中，网站的图标代表了一个网站的理念。
浏览器调用favicon一般是先在网页所在的目录下寻找favicon.ico文件，如果没有，就到网站的根目录下寻找。
如果希望让不同的网页显示不同的favicon，那就要多放几个favicon.ico了。
下面来分析一下如何在浏览器的地址栏中添加个性化图标：
代码清单101.1
01
02//图片的地址"type="image/x-icon"/>
03//图片的地址"type="image/x-icon"/>
04
使用link标签可以定义当前文档与其它文件之间的关系，rel指定当前文档与href文本框中的文档之间的关系，href指出了定义被链接文档的位置，Type指定了目标文件的类型。
问题解答：
（1）在PS中设计出网站的个性化图片。
（2）下载AxialisIconWorkshop软件，制作一个图标文件，大小为16*16像素。
文件扩展名为ico，保存为favicon.ico，存放到网站的根目录下。
（3）新建HTML文档。
（4）在“head”标记内添加代码，代码如“代码101—图标”所示：
代码101—图标
01
02
03//localhost/favicon.ico"type="image/x-icon"/>//IE地址栏换成自定义的图标
04//localhost/favicon.ico"type="image/x-icon"/>
//在收藏夹中显示自定义的图标
05
测试小图标
06
（5）保存文档，并在IE上运行。
面试题102：
改动网页显示时的顶部提示信息
改变网页的顶部提示信息，如图7-2所示。
图7-2网页顶部提示信息
出现频率：
★★★
关键考点：
head标签中的title属性；HTML的标题栏；
考点分析：
title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。
Head标签中的title属性，可以改变网页顶部提示信息，一个好的网页顶部提示信息可以清楚地显示出网页的主题。
在Dreamweaver中，有三种方法可以改变网页的顶部提示信息即网页的标题：
在浏览器左上角的“标题”栏进行设置；对“设计”视图中的页面属性进行设置；“代码”视图中对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标签的
与之间添加代码，代码如“代码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属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的，并且在上下文中有意义。
图片文件不能正常显示时，浏览时会直接出现提示信息。
问题解答：
1、添加图片的提示信息
（1）新建HTML文档，将鼠标在“body”部分单击。
（2）在菜单栏中选择“插入”|“图片”，在“选择图像源文件”窗口中选择所需要的图片文件，单击“确定”按钮，弹出“图像标签辅助功能属性”对话框。
（3）在“图像标签辅助功能属性”对话框的“替换文本”域中输入要显示的文字“夜空下的仰望”，如图7-8所示。
图7-8图像替换文本
（4）保存文档，按F12键预览制作的效果。
2、添加链接文字的提示信息
（1）新建HTML文档。
（2）在“body”部分添加代码，代码如“代码103-链接文字提示信息”。
代码103-链接文字提示信息
01//localhost/wj.html"title="皖江文化">皖江印象
//为超链接的文字添加提示信息
（3）保存文档，并在IE上运行。
面试题104：
让网页载入时弹出一个广告窗口
实现在一个HTML网页中打开时弹出一个广告窗口，如图7-9所示。
图7-9页面弹出广告窗口
出现频率：
★★★
关键考点：
行为面板
考点分析：
行为是响应某一事件而采取的一个动作。
例如，当用户把鼠标移动至对象上（称：
事件），这个对象会发生预定义的变化（称：
动作）。
事件是为大多数浏览器理解的通用代码，浏览器通过释译来执行动作。
一个事件也可以触发许多动作，你可以定义它们执行的顺序。
利用Dreamweaver的行为，无需书写代码，就可以实现丰富的动态页面效果，达到用户与页面的交互的目的。
行为面板有以下几个功能，如图7-10所示。
图7-10行为面板
1、显示设置事件
仅显示附加到当前文档的那些事件。
事件被分别划归到客户端或服务器端类别中。
每个类别的事件都包含在可折叠的列表中。
显示设置事件是默认的视图。
2、显示所有事件
按字母顺序显示属于特定类别的所有事件。
3、添加行为（＋）
显示特定菜单，其中包含可以附加到当前选定元素的动作。
当从该列表中选择一个动作时，将出现一个对话框，您可以在此对话框中指定该动作的参数。
如果菜单上的所有动作都处于灰显状态，则表示选定的元素无法生成任何事件。
4、删除事件（—）
从行为列表中删除所选的事件和动作。
5、向上箭头和向下箭头按钮
在行为列表中上下移动特定事件的选定动作。
只能更改特定事件的动作顺序，例如，可以更改onLoad事件中发生的几个动作的顺序，但是所有onLoad动作在行为列表中都会放置在一起。
对于不能在列表中上下移动的动作，箭头按钮将处于禁用状态。
行为面板应用很广，本例设置状态栏文本就是其中的应用之一，其基本步骤如下：
（1）选中要附加行为的对象,用鼠标单击选中。
（2）打开动作菜单,在“行为”面板上单击“＋”号钮，弹出动作菜单。
（3）选择设置文本里的设置状态条文本,单击“设置状态条文本”动作项目，弹出对话框。
（4）输入状态条信息,在“信息”处，输入字符。
在弹出的事件菜单中选择。
问题解答：
（1）新建一个名为“page.html”的文档。
（2）在文档的标题栏中输入“新消息”。
（3）在“body”部分输入文本“学校首届多媒体大赛报名开始，截止时间6月1日！
”。
（4）选中该文本，在属性栏中为其设置颜色，颜色为“#FF0000”，如图7-11所示。
图7-11设置颜色
（5）保存文档。
（6）新建一个文档，将其
中内容改为“载入一个广告窗口”。
（7）在“设计”视图中右击鼠标，在弹出的“页面属性”对话框中，将背景颜色设置为“#CCCCFF”。
（8）在“代码”视图的“body”部分单击。
（9）选择“窗口”｜“行为”命令，进入行为面板。
（10）在行为面板中单击添加行为按钮“+”，选择“打开浏览器窗口”，如图7-12所示。
图7-12添加行为
（11）在“打开浏览器窗口”对话框中进行相关设置，如图7-13所示。
图7-13打开浏览器窗口
（12）保存文档，并在IE上运行。
面试题105：
设置可以定时自动关闭的窗口的功能
在Dreamweaver中实现当前网页的自动关闭功能，如图7-16和图7-17所示。
图7-141秒后的页面
图7-15关闭的页面
出现频率：
★★
关键考点：
setTimeout定义；setTimeout用法
考点分析：
setTimeout（）方法用于在指定的延迟时间后调用一次表达式，如果要多次调用，就要使用表达式再次调用setTimeout（）。
setTimeout有两种形式：
（1）setTimeout（code,interval）；
（2）setTimeout（func,interval,args），其中code是一个字符串，func是一个函数，interval的单位是毫秒。
问题解答：
（1）新建一个HTMLr文档，保存为107.html
（2）在“body”中书写实现窗口自动关闭的代码，代码如“代码107-窗口关闭”所示：
代码107-窗口关闭
01
02
--
03functionclock（）//实现窗口关闭功能的函数
04{
05i=i-1
06document.title="本窗口将在"+i+"秒后自动关闭!
";//页面的标题的设置
07if（i>0）setTimeout（"clock（）;",1000）;
08elseself.close（）;}
09vari=20//设置倒计时的初始值为20秒
10clock（）;//调用函数
11//-->
12
（3）保存文档，并按F12键预览制作效果。
面试题106：
建立网页中可以随便拖动的对象
利用DIV层来实现HTML网页中随便拖动对象，以图片为例。
（加入实例图，如果不好截图，可以指明见附件。
）
出现频率：
★★★
关键考点：
层的创建；层的属性
考点分析：
层（DIV）是用于准确确定元素在浏览器中的位置，层可以放在页面的任何位置，相当于一个容器，其内部可以包含文本、图像、动画等，也可以嵌套其他层。
层的创建有三种方法：
（1）插入层，在菜单栏选择“插入”|“布局对象”|“层命令”即可；
（2）拖放层，进入“设计”视图，在“布局”快捷栏中拖拽“绘制层”按钮到设计视图中
（3）绘制层，进入“设计”视图，单击“绘制层”按钮，在文档内按住鼠标左键拖动一个矩形。
层的属性设置：
在“设计”视图中，单击选中需要设置属性的层，右击选择“属性”，对属性进行相关设置。
层的属性设置如下：
（1）层编号：
层的名字；
（2）左、上：
设置该层相对于上层的左上角的位置；
（3）宽、高：
设置层的宽度和高度；
（4）Z轴：
设置层的叠放顺序，值越大层越在前面；
（5）可见性：
default不指明层的可见性，inherit继承父层的可见性，visible显示层及其内容，hidden隐藏层及其内容；
（6）背景颜色：
设置层的背景色；
（7）背景图像：
设置层的背景图；
（8）溢出：
visible表示内容超出层的范围时自动扩展，hidden表示隐藏超出部分内容，scroll表示自动添加滚动条，auto表示只有当内容超出时添加滚动条；
（9）剪辑：
设置图层的可视部分；
（10）类：
可以添加CSS样式或新建CSS样式。
同时，我们可以再“行为”面板中给层添加一些“行为”，如拖动层。
问题解答：
（1）新建HTML文档，保存为“116.html”。
（2）在“body”部分单击，在菜单栏中选择“插入”|“布局对象”|“层”命令，创建了一个层“Layer1”。
（3）对层“Layer1”进行设置，如图7-16所示。
图7-16图层属性设置
（4）在页面中层“Layer1”之外点击鼠标。
（5）在菜单栏中选择“窗口”|“行为”命令，在“行为”面板单击“添加行为”按钮，选择“拖动层”命令，进行设置，注意要点击“获取目前位置”，如图7-17所示。
图7-17拖动层
（6）点击确定，保存文档，按F12键浏览并用鼠标拖动页面中图片查看效果。
面试题107：
定制可自由在页面内跳转的链接
利用DrHTMLr中的来实现在页面内自由跳转的链接，如下图所示。
图7-18页面内跳转
出现频率：
★★★
关键考点：
锚点链接
考点分析：
锚点主要用于内容庞大的网页，通过设置锚点和锚点链接，可以直接转到要浏览的页面内容，方便了用户浏览信息，这样用户在浏览页面时，单击某个小标题即可跳转到页面的相应文章内容处。
创建到命名锚记的链接的过程分为两步:
创建命名锚记和链接到命名锚记。
命名锚点简称锚点，标记了页面中跳转的目标位置，方法有两种，一种是选择“插入”|“命名锚点”命令，另一种方法是在“插入”工具栏中选择“常用”，单击“命名锚点”图标
。
在弹出的“命名锚记”对话框中设置锚点名称，如图7-19所示，这个标记是用于记住锚点的，用户浏览时是看不见此标记的。
图7-19命名锚点
链接锚点是将文本链接到所设置的锚点处，选中文本，在属性栏的“链接”中输入“#”和锚点名称，如“#白羊座”，也可以拖拽链接后“指向文件”图标
到目标锚点，链接锚点属性设置如下图7-20所示。
图7-20链接锚点
问题解答：
（1）新建一个HTML文档。
（2）单击文档的“body”部分，在“设计”视图张输入一段文字，部分文字如图7-21所示。
图7-21文本部分
（3）在“白羊座——《邂逅》”左侧单击，在“插入”工具栏中选择“常用”，单击“命名锚点”图标
，在弹出的“命名锚点”对话框中，将“锚记名称”设置为“白羊座”，同样的在每首诗词标题的左侧添加命名锚点，在“金牛座——《暮色》”左侧添加锚点，名称设置为“金牛座”，在“双子座——《莲的心事》”左侧添加锚点，名称设置为“双子座”。
（4）选中页面头部的“白羊座”文本，在链接中输入“#白羊座”，同样的，选中“金牛座”，在“链接”中输入“#金牛座”，选中“双子座”，在“链接”中输入“#双子座”。
（5）在每首诗的底部输入“返回”，选中此文本，在“链接”中输入“#top”
（6）在“设计”视图中查看，如图7-22所示：
图7-22锚点链接的使用
（7）保存文档，并浏览效果。
面试题108：
用javascript实现网页中的进度条
用Javascript实现网页中的进度条，如图7-23所示。
图7-23Javascript实现进度条
出现频率：
★★★
关键考点：
document对象的方法getElementById（）；setTimeout（）；
考点分析：
Javascript是使用“对象化编程”的，即把javascript能涉及的范围划分成大大小小的对象，所有的编程都是基于编程出发的。
document对象是javascript对象中的一个。
document.getElementById（ID）是获取指定ID值的对象
setTimeout（）表示指定的时间到了，执行某个指定的函数，这时候它的使命即告完成，只执行一次。
问题解答：
（1）新建一个名为“111.html”的文档。
（2）在文档的标题栏中输入“进度条”。
（3）在“代码”视图中的“body”部分，书写以下代码。
如“代码112—进度条”所示。
01
进度条02
03
04
05
06
11
升级会员 