版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
网页设计综述一、选择题1.HTML是指（）A.超文本标记语言（HyperTextMarkupLanguage）B.家庭工具标记语言（HomeToolsMarkupLanguage）C.超链接和文本标记语言（HyperlinkandTextMarkupLanguage）D.以上都不是2.Web标准是由（）制定的A.微软公司（Microsoft）B.英特尔公司（Intel）B.苹果公司（Apple） D.万维网联盟（W3C）3.（）不是开发网页的软件A.EditPlus B.DreamweaverC.WebStormD.VisualC++4.（）不是常用的浏览器A.ChromeB.NotePadC.InternetExplorerD.Firefox二、填空题1.HTTP的全称是，CSS的全称是，URL的全称是，WWW的全称是。答案：超文本传输协议（HyperTextTransferProtocol）层叠样式表（CascadingStyleSheets）统一资源定位符（UniformResourceLocator）万维网（WorldWideWeb）2.常用的主流浏览器有、、等。答案：Chrome（谷歌）、InternetExplorer（IE）、Firefox（火狐）3.网页文件的扩展名一般为或者。答案：htmlhtm三、简答题1.Web是如何工作的？答案：用户通过Web来访问网络资源是，用户所使用的电脑一般叫做客户端，而存放网络资源的电脑叫做服务器，客户端和服务器之间的访问是通过HTTP（HypertextTransferProtocol，超文本传输协议）来完成的。用户在客户端的浏览器地址栏中输入所要访问网站的统一资源定位符（UniformResourceLocator，URL），就会向指定的Web服务器发送一个HTTP请求，告诉Web服务所要访问的资源。Web服务器接收到客户端的请求后，通常还会调用部署在应用服务器上的应用来进行数据库访问等操作，最后会把客户端所请求的资源通过HTTP协议发送给客户端。2.静态网页和动态网页的区别与联系分别是什么？有哪些技术分别用于开发静态网页和动态网页？答案：静态网页：（1）浏览者所看到的每个页面是建站者上传到服务器上的一个html（htm）文件，这种网站每增加、删除、修改一个页面，都必须重新对服务器的文件进行一次下载上传。网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件；（2）静态网页的内容相对稳定，因此容易被搜索引擎检索；（3）静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难；（4）静态网页的交互性较差，在功能方面有较大的限制。动态网页：所谓“动态”，并不是指网页上简单的GIF动态图片或是Flash动画，动态网站的概念现在还没有统一标准，但都具备以下几个基本特征：（1）交互性：网页会根据用户的要求和选择而动态地改变和响应，浏览器作为客户端，成为一个动态交流的桥梁，动态网页的交互性也是今后Web发展的潮流。（2）自动更新：即无须手动更新HTML文档，便会自动生成新页面，可以大大节省工作量。（3）因时因人而变：即当不同时间、不同用户访问同一网址时会出现不同页面。动态网页在页面里嵌套了程序，这种网站对一些框架相同，更新较快的信息页面进行内容与形式的分离，将信息内容以记录的形式存入了网站的数据库中，以便于网站各处的调用。这样，我们看到的一个页面，可能在服务器上不一一对应某个html的文件了，网页框架里套了很多数据库里的记录中的内容。此外动态网页是与静态网页相对应的，也就是说，网页URL的后缀不是.htm、.html、.shtml、.xml等静态网页的常见形式，而是以.asp、.jsp、.php、.perl、.cgi等形式为后缀。这里说的动态网页，与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系，动态网页也可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网站技术生成的网页都称为动态网页。静态和动态网页的区别和联系：从网站浏览者的角度来看，无论是动态网页还是静态网页，都可以展示基本的文字和图片信息，但从网站开发、管理、维护的角度来看就有很大的差别。网络营销教学网站将动态网页的一般特点简要归纳如下:(1)动态网页以数据库技术为基础，可以大大降低网站维护的工作量;(2)采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等;(3)动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页;(4)动态网页中的“?”对搜索引擎检索存在一定的问题，搜索引擎一般不可能从一个网站的数据库中访问全部网页，或者出于技术方面的考虑，搜索蜘蛛不去抓取网址中“?”后面的内容，因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。动态网页开发所用的技术：Java、PHP、.Net、Python等四、实践题1.下载并安装EditPlus，使用EditPlus编写如下内容的网页，并在浏览器中显示该网页。答案：<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>第一章课后习题案例</title>
</head>
<body>
<h1align="center">web前端设计师</h1>
<imgsrc="./images/chapter01-1.jpg"align="left"/>
以前会Photoshop和Dreamweaver就可以制作网页。随着时代的发展，现在只掌握这些已经远远不够了。无论是开发zhidao难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端回设计师才能做好，这方面答的专业人才近两年来倍受青睐。Web前端开发是一项很特殊的工作，涵盖的知识非常广，既有具体技术，又有抽象的理念。简单地说，它的主要职能是把网站的界面更好的呈现给用户。
</body>
</html>第二章习题与实践选择题（）标签用于设置网页标题，其内容不显示在网页中。<caption>B.<HTML>C.<head>D.<title>答案：DHTML文件中，正确的注释格式是（）<!--注释-->B./*注释*/<!comment>D.<--注释/> 答案：A不属于<meta>标签属性的是（）name B.contentC.colorD.http-equiv答案：CHTML中<hr>标签的作用是（）插入一条水平分割线B.换行C.加粗D.插入一个空格答案：A5.在网页中要显示“<”这个特殊字符，应该使用（）A.>B.<C.ltD.<答案：B6.以下标签中，（）是单标签（没有结束标签）A.<body>B.<html>C.<br>D.<head>答案：C7.定义无序列表，使用的标签是（）A.<dl>B.<ul>C.<dt>D.<dd>答案：B8.在HTML中，（）不是<a>标签的target属性取值A._selfB._newC._blankD._top答案：B9.HTML语言中，定义一个书签链接应使用的语句是（）A.<ahref="#object-name">链接提示文字</a>B.<aname="#object-name">链接提示文字</a>C.<atarget="#object-name">链接提示文字</a>D.<alink="#object-name">链接提示文字</a>答案：A10.<img>标签的alt属性的作用是（）A.添加图像链接B.设置图像的对齐方式C.在浏览器完全读入图像时，在图像位置显示的文字D.在浏览器未完全读入图像，或浏览器不能显示图像时，替代显示的文字答案：D11.（）标签用于在网页中创建表单A.<input>B.<select>C.<form>D.<group>答案：C12.符合下面HTML代码的表单类型是（）<inputtype="text"name="textfield"><inputtype="radio"name="radio"value="male"><inputtype="checkbox"name="checkbox"><inputtype="file"name="file">文本框、单选按钮、复选框、文件域文本框、复选框、文本域、单选按钮密码框、单选按钮、复选框、文本域文本框、单选按钮、下拉列表、文本域答案：AHTML5中引入新的插入音频标签是（）<img> B.<embed> C.<audio> D.<video>
答案：CHTML5中引入新的插入视频标签是（）<img> B.<embed> C.<audio> D.<video>答案：D框架集中有一个这样的超链接：<ahref="news.html"target="mainFrame">news</a>，打开链接的方式是（）在名字为mainFrame的框架中打开在框架集的上一侧框架中打开链接在整个框架页面中打开链接在本窗口中打开链接答案：A填空题网页文件（HTML文件）的开始标签是，结束标签是是。答案：<html></html>HTML文档由和两部分组成。部分是在浏览器中可以看到的内容，而在浏览器中看不到，主要用来设置网页的标题、文档属性等内容。答案：headbodybodyhead<pre></pre>标签的功能是。答案：预格式化文本内容有序列表的属性可以改变表项编号的起始值，属性可以设置列表项前面的项目符号类型。答案：starttype热区<area>标签的shape属性取值为“rect”表示的热区形状为，shape属性取值为“circle”表示的热区形状为，shape属性取值为“poly”表示的热区形状为。答案：矩形圆形多边形网页中常用的图像格式有：、和。答案：jpgpnggif<form>标签的method属性取值可以为和。答案：getpost重置按钮的type属性值为，提交按钮的type属性值为，普通按钮的type属性值为。答案：resetsubmitbutton简答题简述什么是相对路径和绝对路径，以及这两种描述资源的方式优缺点。答案：（1）绝对路径指的是网页文件等资源在网站或者硬盘上的完整路径。使用绝对路径必须输入完整的描述路径，这种方法指向的链接目标地址清晰明确，但有个缺点就是一旦该文件被移动了会造成文件无法显示，就需要重新设置所有的相关链接。绝对路径通常用于引用当前网站之外的相关资源。（2）相对路径是指相对于当前文件所在的路径，跟其它资源文件（或文件夹）的路径关系。这种地址形式利用的是构建链接的两个文件之间的相对关系，不受站点文件夹所处服务器位置的影响，因此这种书写形式省略了绝对路径中的相同部分，这样做的优点可以在站点文件所在服务器地址发生改变时，文件夹的所有内部链接都不会出现问题。相对路径适合于引用网站内部的相关资源。相对位置的描述需要用到两个特殊的符号说明在网页中制定一个页面书签的步骤。答案：（1）先定义一个书签通过<a>标签的name属性来定义书签：<aname="锚点名称"></a>，即在<a>标签所在的位置定义一个锚点。（2）定义链接到书签的超链接使用<a>标签的href属性，定义一个超链接，指向书签的定义位置：<ahref="文件名#锚点名称"></a>，即该超链接指向文件名所指定网页文件中的锚点位置。如果是在同一个网页的不同部分跳转，文件名可以省略。简要说明表格与框架在页面布局中的区别是什么。答案：表格是在同一个网页中将页面划分为不同区域,然后进行网页布局的，在它的单元格中可以放置具体的内容。框架是在同一个浏览器窗口中显示多个网页；框架可以通过指定超链接的目标框架获得交互式的布局效果。使用框架结构的页面可以将一个浏览器窗口划分为多个相互独立又相互联系的小窗口，每个区域都可以显示不同的HTML文档，从度而实现将多个HTML文件组织到一个浏览器窗口中显示。使用框架的优点：访问者的浏览器不需为每个页面重新加载导航问条；每个框架都具有自己的滚动条，因此访答问者可以独立滚动这些框架进行浏览。使用框架的缺点：（1）并不是所有浏览器都提供良好的框架支持（2）难以实现在不同框架中精确的对齐各个页面元素使用表格布局页面的好处：网上绝大部分的回页面都是使用表格来美化的，因为表格有很好的兼容性，可被绝大部分的浏览答器所支持，而且使用表格会使页面结构清晰、布局整齐。实践题设计实现以下内容的表格答案：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>无标题文档</title></head><body><h1align="center">信息学院软件技术课程表</h1><tablewidth="503"border="1"align="center"cellspacing="1"rules="all"><tr><tdcolspan="5"><divalign="center">上午</div></td></tr><tr><tdwidth="94"rowspan="2"align="center">第一节</td><tdwidth="159"align="center">Web前端设计综合楼305</td><tdwidth="54"> </td><tdwidth="22"> </td><tdwidth="72"> </td></tr><tr><tdalign="center">孟宪宁</td><td> </td><td> </td><td> </td></tr><tr><tdcolspan="5"><divalign="center">下午</div></td></tr><tr><tdwidth="94"rowspan="2"align="center">第二节</td><tdwidth="159"align="center">Web前端设计综合楼306</td><tdwidth="54"> </td><tdwidth="22"> </td><tdwidth="72"> </td></tr><tr><tdalign="center">孟宪宁</td><td> </td><td> </td><td> </td><tr><tdwidth="94"rowspan="2"align="center">第三节</td><tdwidth="159"align="center">Web前端设计实训楼215</td><tdwidth="54"> </td><tdwidth="22"> </td><tdwidth="72"> </td></tr><tr><tdalign="center">孟宪宁</td><td> </td><td> </td><td> </td></tr></table></body></html>设计实现以下内容的表单
答案：<!doctypehtml><html><head><metacharset="utf-8"><title>个人信息注册表</title></head><body> <h1align="center">个人信息注册表</h1><form> 姓名：<inputtype="text"name="username"><br/>性别：<inputtype="radio"name="sex">男<inputtype="radio"name="sex">女<br/> 密码：<inputtype="password"name="pass"><br/><fieldset> <legend>个人爱好</legend><inputtype="checkbox">琴棋书画</br><inputtype="checkbox">唱歌跳舞</br><inputtype="checkbox">体育运动</br><inputtype="checkbox">旅游摄影</br><inputtype="checkbox">休闲养生</fieldset> 所在省市：<selectname="pro"> <option>山东</option><option>广东</option><option>北京</option><option>上海</option><option>深圳</option></select><br/><br/><br/>个人简介：<br/><textarearows="5"></textarea><br/><inputtype="submit"value="提交"> <inputtype="reset"value="重置"></form></body></html>3.根据美工提供的新加坡校友录设计图，使用HTML语言设计并实现如下的网页。答案：参见新加坡校友录压缩包 <!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>新加坡校友录</title>
<!--<style>-->
<!--table{-->
<!--collapse:none;-->
<!--}-->
<!--</style>-->
</head>
<body>
<tablealign="center"border="1"cellpadding="0"cellspacing="0"rules="all"width="0">
<!--<tablealign="center"style="border-collapse:separate;border-spacing:0px0px;">-->
<tralign="center">
<tdcolspan="4">
<imgsrc="images/index_01.jpg"height="81">
</td>
</tr>
<tr>
<tdheight="51"bgcolor="#E9CD94"><imgsrc="images/index_02.jpg"height="51"vspace="0"hspace="0"></td>
<tdcolspan="3"rowspan="6"bgcolor="#E6CA8D"><imgsrc="images/index_03.jpg"height="278"></td>
</tr>
<tr>
<tdheight="40"bgcolor="#ECD09C"><imgsrc="images/index_04.jpg"height="42"></td>
</tr>
<tr>
<tdheight="43"bgcolor="#F0D6A8"><imgsrc="images/index_05.jpg"height="43"></td>
</tr>
<tr>
<tdheight="41"bgcolor="#F3DDB2"><imgsrc="images/index_06.jpg"height="41"></td>
</tr>
<tr>
<tdheight="41"bgcolor="#F7E0BC"><imgsrc="images/index_07.jpg"height="41"></td>
</tr>
<tr>
<tdheight="60"bgcolor="#FBE5C6"><imgsrc="images/index_08.jpg"height="60"></td>
</tr>
<tr>
<td><imgsrc="images/index_09.jpg"></td>
<td><imgsrc="images/index_10.jpg"></td>
<td><imgsrc="images/index_11.jpg"></td>
<td><imgsrc="images/index_12.jpg"></td>
</tr>
<tr>
<td><imgsrc="images/index_13.jpg"></td>
<td><imgsrc="images/index_14.jpg"></td>
<td><imgsrc="images/index_15.jpg"></td>
<td><imgsrc="images/index_16.jpg"></td>
</tr>
<tr>
<tdcolspan="4">
<imgsrc="images/index_17.jpg">
</td>
</tr>
<tr>
<tdcolspan="4">
<imgsrc="images/index_18.jpg">
</td>
</tr>
</table>
</body>
</html> 第三章习题与实践选择题1.下列关于CSS规则的选项中，正确的是（）A.body:color=black B.{body;color:black;}C.body{color:black;} D.{bodycolor:black;}答案：C2.盒子模型中,表示四边的内边距的关键字是（）A.borderB.paddingC.marginD.decoration答案：B3.CSS盒子模型中，设置margin属性时，如果提供四个参数值，则所指的四边顺序是（）
A.上、下、左、右 B.上、左、下、右C.左、右、上、下 D.上、右、下、左答案：D4.要把超链接的显示方式修改为：块级元素，应使用代码（）
A.display:block； B.float:left;C.display:none； D.float:none;答案：A难度：2
5.使用十六进制方式表示红色的是（）
A.#00ff00B.#ff0000C.#0000ffD.#f0f0f0答案：B6.下列CSS代码中，可以把网页中已访问过的超链接的颜色设置为“#800000”的是（）。
A.A:link{color:#800000;text-decoration:none}
B.A:visited{color:#800000;text-decoration:none}
C.A:active{color:#800000;text-decoration:none}
D.A:hover{color:#800000;text-decoration:none}答案：B7.对<p>这是一段测试文字</p>这段文字，要将其文本对齐方式设置为靠右对齐，以下样式写法正确的是（）。A.p{text-align:center;} B.p{text-align:justify;}
C.p{text-align:right;} D.p{text-align:left;}答案：C8.下列选项中，能够将所有段落内的文字设置为标准粗体的CSS代码是（）A.<pstyle="font-size:bold;"></p>B.<pstyle="font-weight:bold;"></p>C.p{font-size:bold;}D.p{font-weight:bold;}答案：D9.下列选项中，优先级最高的样式是（）A.标签选择器样式 B.id选择器样式 C.class选择器样式 D.行内样式答案：D10.下列选项中，属于行内元素的是（）A.<p></p> B.<div></div> C.<span></span> D.<pre></pre>答案：C11.可以去掉文本超链接默认的下划线的是（）A.a{text-decoration:nounderline;} B.a{underline:none;}C.A{text-decoration:none;} D.a{underline:false;}答案：C12.盒子模型中，p{margin：20px10px}这个CSS规则的效果是（）A.仅设置了上边距为20px，右边距为10px。B.仅设置了上边距为20px，下边距为10px。C.设置了上、下边距为20px，左、右边距为10px。D.设置了上、右边距为20px，下、左边距为10px。答案：D13.在HTML文档中，引用外部样式表的正确位置在（）A.文档末尾 B.文档顶部 C.<head></head>D.<body>中答案：C14.以下CSS长度单位中，属于相对长度单位的是（）A.pt B.em C.inD.cm答案：B二、填空题CSS的全称是________________，单独的样式表文件扩展名一般为_________。答案：层叠样式表（CascadingStyleSheets）css2.如果某个样式将会应用到页面上的多个元素，则应该用_________来设置这个样式。答案：class（类）选择器使用样式表来设置网页元素的具体位置，可以通过left、________、________、________等四个属性来实现。答案：top、bottom、right设置背景图像在水平方向平铺的样式是_________；设置背景图像位置的属性是_________。答案：background-repeat:repeat-xbackground-position5.有以下CSS样式代码：<html><head><styletype="text/css">p{color:blue}p.stop{color:red}p#warning{color:yellow}p.normal{color:green}</style></head><body><p>①第一种样式</p><pclass="stop">②第二种样式</p><pid="warning">③第三种样式</p><pclass="normal">④第四种样式</p><pid="exception">⑤第五种样式</p></body></html>在上面的程序中使用了CSS的嵌入样式。①处文字显示的颜色为_________，②处文字显示的颜色为_________，③处文字显示的颜色为_________，④处文字显示的颜色为_________，⑤处文字显示的颜色为_________。答案：blue（蓝色）red（红色）yellow（黄色）green（绿色）blue（蓝色）三、实践题1.使用DIV+CSS实现一个三栏的页面布局，即将页面分隔为左、中、右三栏排版布局，如下图所示。图1左中右版式答案：<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>div+css三栏布局</title>
<styletype="text/css">
#div1{
width:906px;
height:503px;
border:1pxsolidblack;
}
#leftDiv{
width:265px;
border:1pxsolidgreen;
height:500px;
float:left;
margin-top:0px;
}
#centerDiv{
width:420px;
border:1pxsolidblue;
height:500px;
float:left;
}
#rightDiv{
width:215px;
border:1pxsolidred;
height:500px;
float:left;
}
</style>
</head>
<body>
<divid="div1">
<divid="leftDiv"></div>
<divid="centerDiv"></div>
<divid="rightDiv"></div>
</div>
</body>
</html>2.使用DIV+CSS实现新加坡校友录网页答案：参加新加坡校友录压缩包第四章习题与实践选择题1.下列说法正确的是：（）A.JavaScript是一种解释型的语言。B.JavaScript是一种强类型的语言。C.必须安装JAVA虚拟机才能运行JavaScriptD.JavaScript可以读写到客户端硬盘上的文件。答案：A2.JavaScript原文件扩展名的一般是()A.HTMLB.BODYC.jsD.DIV答案：C3.JavaScript语法中，不正确的变量定义是()A.vara;B.var_a;C.vara11D.var2a答案：D4.JavaScript中，window.alert命令是()A.是关闭文件命令B.是弹出信息的命令C.是打开文件命令D.是输出命令答案：B5.有关JavaScript语句，下列说法错误的是（）A.单行注释语句是在需要注释的行前面用//B.多行注释语句是在需要注释的文字两端加/*注释文字*/C.with语句的功能是为一段程序建立默认对象D.JavaScript中没有if...else语句答案：D二、填空题1．程序填空：下图中的三个按钮分别用于设置文本域textarea的清空、将字体设为20px、加粗等功能。请将代码填写完整，以实现相应的功能。<styletype="text/css">textarea{ width:400px; height:200px; font-size:12px;}input{ width:100px; height:30px; font-size:14px;}</style><scripttype="text/javascript"> functionclearContent(){/*1.清空文本域#resume的内容*/ } functionbigFont(){ /*2.设置文本域#resume的字体为20px*/ }functionboldFont(){ ele.style.fontWeight="bold";/*设置文本域#resume的文本加粗显示*/ }</script></head><body><formaction="#"method="post"><textareaid="resume">个人简历</textarea><br/><br/><inputtype="button"value="清空"onclick="clearContent();"/><inputtype="button"value="大字体显示"onclick="bigFont()"/><inputtype="button"value="加粗"onclick="boldFont()"/></form><scripttype="text/javascript">varele=/*3.获取文本域textarea元素*/</script></body>答案：<scripttype="text/javascript">
functionclearContent(){
/*1.清空文本域#resume的内容*/
ele.innerHTML="";
}
functionbigFont(){
/*2.设置文本域#resume的字体为20px*/
ele.style.fontSize="24px";
}
functionboldFont(){
ele.style.fontWeight="bold";/*设置文本域#resume的文本加粗显示*/
}
</script></head>
</head>
<body>
<formaction="#"method="post">
<textareaid="resume">个人简历</textarea>
<br/><br/>
<inputtype="button"value="清空"onclick="clearContent();"/>
<inputtype="button"value="大字体显示"onclick="bigFont()"/>
<inputtype="button"value="加粗"onclick="boldFont()"/>
</form>
<scripttype="text/javascript">
varele=document.getElementById("resume")/*3.获取文本域textarea元素*/
</script>三、编程实践1．编写一个函数，在页面上输出1～1000之间所有能同时被2、5、9整除的整数，并要求每行显示5个这样的数。答案：<!DOCTYPEhtml>
<head>
<metacharset="UTF-8">
<title>编程题-1</title>
</head>
<body>
<scripttype="text/javascript">
/*
编写一个函数，在页面上输出1～1000之间所有能同时被2、5、9整除的整数，并要求每行显示5个这样的数。
*/
functionnumber(){
vari;
varm=0;
for(i=1;i<1000;i++){
if((i%2==0)&&(i%5==0)&&(i%9==0)){
document.write(i+",")
m=m+1;
if(m==5){
document.write("<br/>")
m=0;
}
}
}
}
</script>
</body>
<inputtype="button"value='运行'onclick="number();"/>
</html>2．编写JavaScript程序，在页面中显示系统的当前日期，并且能够动态显示时间（时、分、秒动态显示）。例如，显示2019年3月20日，19：45：26。答案：<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>
<title>一个简单的数字时钟</title>
<scripttype="text/javascript"charset="utf-8">
//定义一个函数用以显示当前时间
functiondisplayTime(){
varelt=document.getElementById("clock");//通过id="clock"找到元素
varnow=newDate();//得到当前时间
elt.innerHTML=now.toLocaleTimeString();//让elt来显示它
setTimeout(displayTime,1000);//在1秒后再次执行
}
window.onload=displayTime;//当onload事件发生时开始显示时间
</script>
<styletype="text/css"media="all">
#clock{
font:bold24ptsans;
background:#ddf;
padding:10px;
border:2pxsolidblack;
border-radius:10px;
}
</style>
</head>
<body>
<h1>一个简单的数字时钟</h1>
<spanid="clock"></span>
</body>
</html>3.编写一个实现用户登录验证的网页，用JavaScript对用户输入数据的合法性进行检测。（1）网页的初始界面如下图所示：（2）离开用户名输入框，如果输入内容不合法（含有非数字、字母之外的字符），显示界面变为如下图所示：（3）如果确认密码和密码框中的内容不一致时，显示界面变为如下图所示：（4）当用户输入的信息完全符合要求时，则显示界面变为如下图所示：答案：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>用户注册实例</title>
<style>
span{
color:blue;
font-size:12px;
}
</style>
<script>
functioncheckusername(){
//alert("checkusername!");
varreg=/^[[a-zA-Z0-9_]{6,20}$/;
varusername=document.getElementById("username").value;
varusernameinfo=document.getElementById("usernameinfo");
if(reg.test(username)){
usernameinfo.innerHTML="*该用户名可以注册";
usernameinfo.style.color="blue";
}
else{
usernameinfo.innerHTML="*你输入的用户名非法，请确认！";
usernameinfo.style.color="red";
}
}
functioncheckpassword1(){
//alert("checkpassword1");
varreg=/^[[a-zA-Z0-9]{6,20}$/;
varpassword1=document.getElementById("password1").value;
varpassword1info=document.getElementById("password1info");
if(reg.test(password1)){
password1info.innerHTML="*密码合法";
password1info.style.color="blue";
}
else{
password1info.innerHTML="*密码非法！";
password1info.style.color="red";
}
}
functioncheckpassword2(){
//alert("checkpassword2");
varreg=/^[[a-zA-Z0-9]{6,20}$/;
varpassword1=document.getElementById("password1").value;
varpassword2=document.getElementById("password2").value;
varpassword2info=document.getElementById("password2info");
if(reg.test(password2)&&(password1==password2)){
password2info.innerHTML="*密码一致";
password2info.style.color="blue";
}
else{
password2info.innerHTML="*两次密码不一致，请确认！";
password2info.style.color="red";
}
}
</script>
</head>
<body>
<tableborder="0">
<tr>
<td>用 户 名</td>
<td><inputtype="text"maxlength="20"id="username"onblur="checkusername();"/></td>
<td><spanid="usernameinfo">*由6-20个英文字母、数字或—组成，注册完毕后不能修改</span></td>
</tr>
<tr>
<td>密 码</td>
<td><inputtype="password"maxlength="20"id="password1"onblur="checkpassword1();"/></td>
<td><spanid="password1info">*密码由6-20个英文字母（区分大小写）、数字或符号组成</span></td>
</tr>
<tr>
<td>确认密码</td>
<td><inputtype="password"maxlength="20"id="password2"onblur="checkpassword2();"/></td>
<td><spanid="password2info">*请再输入一遍密码，以免输错</span></td>
</tr>
</table>
</body>
</html> 第五章习题与实践使用列表标签完成腾讯首页中视觉焦点部分的布局，如图5-33所示，具体要求如下：图5-33腾讯网视觉焦点样图从网站上获取相关的图片和文字使用div+css技术实现，层的布局和样式分离编写JavaScript代码，实现当单击右侧的圆形箭头图片时，显示下一组图片和文字编写JavaScript代码，实现两组图片每3秒钟自动切换一次答案：参加第5章源码网页源码：<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>视觉焦点</title>
<linktype="text/css"rel="stylesheet"href="css/focus.css"></link>
<scriptlanguage="JavaScript"src="js/focus.js"></script>
</head>
<body>
<divclass="layout">
<divclass="title">
<aclass="txt"href="/ch/photo/"target="_blank">视觉焦点</a>
</div>
<divclass="mainbody">
<divid="picDirection">
<ahref="javascript:;"class="previcon"></a>
<ahref="javascript:;"class="nexticon"></a>
</div>
<divclass="wrapul"id="wrapu1">
<ulid="picUl1"class="ul1">
<liclass="item">
<ahref="/omn/20200425/20200425A0E47Q00.html"class="p1t"target="_blank">
<imgsrc="images/8.png"alt="他37天跨3国穿40城为患癌父亲圆梦：父与子在笑容里告别"style="display:inline;">
<p>他37天跨3国穿40城为患癌父亲圆梦：父与子在笑容里告别</p>
</a>
</li>
<liclass="item">
<ahref="/omn/20200428/20200428A09AZT00.html"class="p1t"target="_blank">
<imgsrc="images/9.png"alt="他考上高中却被拒入学，无奈拄双拐修家电，23年后让人刮目相看"style="display:inline;">
<p>他考上高中却被拒入学，无奈拄双拐修家电，23年后让人刮目相看</p>
</a>
</li>
<liclass="item">
<ahref="/omn/20200428/20200428A053QT00.html"class="p1t"target="_blank">
<imgsrc="images/10.png"style="display:inline;">
<p>河南7旬老人每天走村串巷送服务被村民称作科技大蓬车</p>
</a>
</li>
<liclass="item">
<ahref="/omn/20200428/20200428A066PT00.html"class="p1t"target="_blank">
<imgsrc="images/11.png"alt="湖南永州：抗洪抢险演练备战汛期"style="display:inline;">
<p>湖南永州：抗洪抢险演练备战汛期</p>
</a>
</li>
<liclass="item">
<ahref="/omn/20200427/20200427A08H9F00.html"class="p1t"target="_blank">
<imgsrc="images/12.png"alt="揭秘机场内飞禽猛兽叫声真相：实拍机场驱鸟员与鸟“斗智斗勇”"style="display:inline;">
<p>揭秘机场内飞禽猛兽叫声真相：实拍机场驱鸟员与鸟“斗智斗勇”</p>
</a>
</li>
<liclass="item">
<ahref="/omn/20200428/20200428A0L8HK00.html#p=1"class="p1t"target="_blank">
<imgsrc="images/13.jpg"alt="这些杯子和瓶子不是做出来的，而是直接种出来的">
<p>这些杯子和瓶子不是做出来的，而是直接种出来的</p>
</a>
</li>
</ul>
<ulid="picUl2"class="ul2">
<liclass="item">
<ahref="/omn/20200428/20200428A09AZT00.html#p=1"class="p1t"target="_blank">
<imgsrc="images/0.jpg"alt="他考上高中却被拒入学，无奈拄双拐修家电，23年后让人刮目相看"style="display:inline;">
<p>他考上高中却被拒入学，无奈拄双拐修家电，23年后让人刮目相看</p>
</a>
</li>
<liclass="item">
<ahref="/omn/20200428/20200428A09AZT00.html"class="p1t"target="_blank">
<imgsrc="images/1.jpg"alt="山东这座县级市，因一个人影响中国几千年历史，如今却十分低调"style="display:inline;">
<p>山东这座县级市，因一个人影响中国几千年历史，如今却十分低调</p>
</a>
</li>
<liclass="item">
<ahref="/omn/20200428/20200428A053QT00.html#p=1"class="p1t"target="_blank">
<imgsrc="images/2.jpg"alt="河南7旬老人每天走村串巷送服务被村民称作科技大蓬车">
<p>河南7旬老人每天走村串巷送服务被村民称作科技大蓬车</p>
</a>
</li>
<liclass="item">
<ahref="/omn/20200427/20200427A044LM00.html#p=1"class="p1t"target="_blank">
<imgsrc="images/3.jpg"alt="拼完是一块破碎的玻璃：透明的拼图，你敢挑战吗？"style="display:inline;">
<p>拼完是一块破碎的玻璃：透明的拼图，你敢挑战吗？</p>
</a>
</li>
<liclass="item">
<ahref="/omn/20200408/20200408A0U37600.html#p=1"class="p1t"target="_blank">
<imgsrc="images/4.jpg"alt="十五的月亮十六圆，“超级月亮”来了，看看啥样子"style="display:inline;">
<p>十五的月亮十六圆，“超级月亮”来了，看看啥样子</p>
</a>
</li>
<liclass="item">
<ahref="/omn/20200419/20200419A06GCX00.html"class="p1t"target="_blank">
<imgsrc="images/5.jpg"alt="湖北武汉：吉庆街渐渐恢复活力">
<p>湖北武汉：吉庆街渐渐恢复活力</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>JavaScript代码：window.onload=function(){
//手动轮播
//获取按钮
varnext=document.getElementsByClassName("next")[0];
varprev=document.getElementsByClassName("prev")[0];
//获取UL
varpic_div1=document.getElementsByClassName("ul1")[0];
varpic_div2=document.getElementsByClassName("ul2")[0];
//添加鼠标单击事件
next.onclick=function(){
if(timer){
clearInterval(timer);//清除定时器
}
pic
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 空调控制电路课程设计
- 课程设计给水排水系统
- 煤矿综采机械化课程设计
- 课程设计个人总结冲压
- 课程设计最少拍控制系统
- 课题八 车蜗杆
- 计数器课程设计仿真图
- 课程设计及matlab的时钟制作
- 课程设计迷宫流程图模板
- DB35T 2198-2024 工业园区低零碳创建评估准则 福建省市监局
- 期中试卷（试题）-2024-2025学年三年级上册数学青岛版
- 期中押题卷（试题）-2024-2025学年数学六年级上册北师大版
- 少儿美术课件国家宝藏系列《云肩》
- 教师业务考试试题
- 5.1 延续文化血脉 课件-2024-2025学年统编版道德与法治九年级上册-2
- 2024年环磷酰胺原料药项目发展计划
- 2024-2030年中国CCUS技术行业现状调查与前景策略分析研究报告
- 2024-2025形势与政策：七十五载砥砺奋进创辉煌 中国式现代化继往开来兴伟业
- 国开（河北）2024年《商务谈判实务》形成性考核1-4答案
- 二年级数学上册教案 4、除法的初步认识 苏教版
- 国风漫画人物课程设计
评论
0/150
提交评论