HTML和Javascript 网页面试技巧.docx

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