当前位置：文档之家 › html练习

html练习

  • 格式：doc
  • 大小：105.50 KB
  • 文档页数：12

1．根据页面访问时间，显示如下信息yyyy年mm月dd日星期w 节日如：2010.10.1,则显示：2010年10月1日星期五国庆节2. 设计一个函数，根据给定的上限值n，计算1—n之间满足下列条件的整数.该数+1 为一个完全平方数，它的一半+1 也是一个完全平方数。

例如：48该函数返回满足上述条件的整数个数。

3. 设计一个用数字图片显示计数值的页面。

图片名称与内容对照如下：4. 网上测试(单选题)：4.1.大熊猫是在哪里发现的？中国，日本，美国，韩国4.2.喜马拉雅山有多高？8900米以上，8800米－8900米，8700米－8800米，8600米－8700米4.3.中国哪个城市被誉为“北方香港”？北京，成都，大连，上海4.4. 2008奥运会在哪里举行？汉城，巴塞罗那，亚特兰大，北京说明：红色为正确答案当测试者交卷之后，给出每道题的结果。

如第XX题答对了，答错了，没有答，最后显示总分。

必要时可以显示整个测试所花的时间。

5. 个人所得税计算方法/** 个人所得税税率表** 级数全月应纳税所得额税率* 1 不超过500元的部分5%* 2 超过500元至2000元的部分10%* 3 超过2000元至5000元的部分15%* 4 超过5000元至20000元的部分20%* 5 超过20000元至40000元的部分25%* 6 超过40000元至60000元的部分30%* 7 超过60000元至80000元的部分35%* 8 超过80000元至100000元的部分40%* 9 超过100000元的部分45%** 从今年3月1日起，个人所得税起征点由1600元提高到2000元* 计算方法：9级累进税率* 摘自大连晚报2008.1.1.*/6.. 世界卫生组织提供的健康标准：体重指数公式：BMI=体重(kg)/(身高(m)* 身高(m))当BMI <18.5 时属于偏瘦。

加强锻炼，适当补充营养"当BMI在18.5—25 时属于正常范围，继续保持当BMI >25--<30 时属于超重。

当BMI >30 时属于较肥胖。

要加强锻炼,不吃零食和高热量、高脂肪食物！7．写一个方法，用以检查输入的字符串是否为合法的邮政编码，合法，返回true, 不合法，返回false8. 设计一个静态方法，实现对输入的邮政编码(String post)进行检查，返回值要求如下：如果长度不合法，则返回-1；如果字符非法，则返回非法字符的个数。

全部合法，返回09.根据出生日期，显示对应的属相出生日期(年份)与属相关系如下：2020=→鼠。

42019=→猪.。

32018=→狗.。

22017=→鸡.。

12016=→猴.。

02015=→羊。

112014=→马。

102013=→蛇。

92012=→龙。

82011=→兔。

72010=→虎。

62009=→牛.。

52008=→鼠.。

42007=→猪.。

32006=→狗.。

22005=→鸡.。

12004=→猴.。

010．下面是一个10位的社会保障号编码规则：10.1.长度为10位，下标为N1---N10(从左到右)+N2*8+N3*7+N4*6+N5*5+N6*4+N7*3+N8*2+N9*1+N10*1)/10如果余数为0,则身份证号合法，否则非法其中N2只能取1 (男)或 2 (女)10.4．N3---N10为数字；例如：身份证号F213454789为一个合法身份证号写一个函数IsValid，输入一个10位的身份证号，返回一个整数: 1 有效，0 无效要求将上述操作最终作为一个文件.jar 发布11.为一个4*3的表格用随机颜色填充12.设计颜色选择器13.任意输入一个月份，并用表格显示该月的每一天和星期的对应关系14. 出生日期与星座关系如下：1.20---2.18 水瓶座2.19----3.20 双鱼座3.21----4.19. 牧羊座4.20---5.20 金牛座5.21-----6.21双子座6.22.----7.22巨蟹座7.23----8.22 狮子座8.23----9.22 处女座9.23.----10.23天秤座10.24-----11.22天蝎座11.23---12.21 射手座12.22.----1.19 山羊座设计一个函数，根据给定的出生日期，返回对应的属性15. 写一个返回给定整数的所有因子的函数16..设计一个函数，实现检查输入字符串是否为”回文”.的功能Boolean IsPalindrome(String poem)17.输入出租车公里数，输出应付的车费数：收费标准如下：3000米以下为8元，每超过500米增加1.2元，不足500米按500米计算。

18．竹竿长10米，每天截取一半，过多少天后，竹竿长度会小于10厘米。

19．输入一个英文字符串，统计出其中各字符出现的次数，并以下列样式输出：a=?,b=?,c=?,d=?,e=?f=?,g=?,h=?,i=?,j=?20.用一张图片和若干文本设计一个页面，使其文本处于图片的右侧，且文本内容和图片的顶端对齐21.用有序列表显示数列{3N+1}的内容，直到其值大于777.22. 设计一个问卷调查：你对大连的第一印象：好还可以一般差23.写一个函数，实现下列功能：将给定的字符串左边填充若干个给定的字符，使其长度恰好给定的长度。

如：字符串s=”12”,最终长度size=5，左边用字符c=’@’填充，结果为”@@@12”. 同理，实现对字符串的右填充功能。

23. 随机产生100个5位数，并对其进行排序。

同时找出最大的数和最小的数。

24 写一方法，用于删除字符串中所有空格(不仅仅是两端的空格)，并返回没有空格的字25．设计一个方法。

当该方法连续调用时，依次产生下列元素输出,第一次调用输出：5 7 4 8 9 1第二次调用输出：1 5 7 4 8 9第三次调用输出：9 1 5 7 4 8第四次调用输出：8 9 1 5 7 4第五次调用输出：4 8 9 1 5 7第六次调用输出：7 4 8 9 1 5第一次调用输出：5 7 4 8 9 1每输出一行后延时5秒，再输出下一行。

18位身份证号编码或则：从左自右依次为N1,N2,N3,……N18N1~~N6 为行政区划编码N7~~N14 为出生日期N17 为性别编码。

偶数为“女”，奇数为“男”，即”男单女双”N18 为校验码19.设计三个select,分别用于年月日的选择。

要求如下：年份选择范围：1900年---当前年月份选择范围：一月，二月，。

十二月日期选择范围：根据所选的年份和月份计算：1,2,…28,29,30,31设置默认年份，如：1980年20.动态生成img标签元素，当点击按钮(下一张图片)时，在img标签中显示相应的图片内容。

21.根据随即函数产生n----m之间的随机整数22.设计一个函数，用于返回n位的数字字符和字母字符。

如：13A4B723.为页面上的所有<span>标签添加样式属性class24.动态生成单选题和多选题，测试者交卷后进行判分。

25.有52张扑克牌，编号为0--51,要求用一个table显示，每行显示n=7张。

当其点击某张牌时，用alert显示这张牌的内容，如：草花A26.在页面上放置一个超链接，当点击它时，弹出一个新窗口，并在其中加载一个页面文件。

27.为小学生随机出m道加减法算术题，交卷后，检查其正确性。

28.为页面上的所有无序列表项动态添加超链接。

29.动态生成h1---h6标记，并设置其class属性和innerText属性，同时为其绑定一个Onclick事件30. 动态生成h1---h6标记，使h1,h3,h5呈现一种背景色，h2,h4,h6呈现另一种背景色。

31.动态生成一个table标签元素，当鼠标移入某行时，改变背景色，鼠标移出该行时，恢复背景色。

31.动态生成一个table标签元素，奇数行为一种背景色，偶数行为另一种背景色。

32.动态添加<input type=”file”>标签(常用于添加上传附件)33.动态生成一个表格，并为其添加一个radio列，当点击每行的radio时，高亮显示该行。

34. 动态生成一个表格，并为其添加一个checkbox列，当选择checkbox后，获得所有的选择。

同时，在页面上放置一个复选框，用于全选/去选35.动态生成一个表格，当鼠标移到单元格时，鼠标光标变为手型，当点击单元格时，用随机颜色作为单元格背景色。

/////////////////////////////////////////////////////////////////////2009-03-20JavaScript html js颜色梯度和渐变效果,非常不错的js代码关键字: javascript html js 颜色梯度渐变效果非常不错代码Js代码1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">2.<html xmlns="http://www.w/1999/xhtml">3.<head>4.<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />5.<title>JavaScript 颜色梯度和渐变效果</title>6.<script type="text/javascript">7.var $ = function (id) {8. return "string" == typeof id ? document.getElementById(id): id;9.};10.11.var Extend = function(destination, source) {12. for (var property in source) {13. destination[property] = source[property];14. }15. return destination;16.}17.18.var Map = function(array, callback, thisObject){19. if(array.map){20. return array.map(callback, thisObject);21. }else{22. var res = [];23. for (var i = 0, len = array.length; i < len; i++) { res.push(callback.call(thisObject, array[i], i, array)); }24. return res;25. }26.}27.28.29.var ColorGrads = function(options){30. this.SetOptions(options);31. this.StartColor = this.options.StartColor;32. this.EndColor = this.options.EndColor;33. this.Step = Math.abs(this.options.Step);34.};35.ColorGrads.prototype = {36. //设置默认属性37. SetOptions: function(options) {38. this.options = {//默认值39. StartColor: "#fff",//开始颜色40. EndColor: "#000",//结束颜色41. Step: 20//渐变级数42. };43. Extend(this.options, options || {});44. },45. //获取渐变颜色集合46. Create: function() {47. var colors = [],48. startColor = this.GetColor(this.StartColor),49. endColor = this.GetColor(this.EndColor),50. stepR = (endColor[0] - startColor[0]) / this.Step,51. stepG = (endColor[1] - startColor[1]) / this.Step,52. stepB = (endColor[2] - startColor[2]) / this.Step;53. //生成颜色集合54. for(var i = 0, n = this.Step, r = startColor[0], g = startColor[1], b = startColor[2]; i < n; i++){55. colors.push([r, g, b]); r += stepR; g += stepG; b += stepB;56. }57. colors.push(endColor);58. //修正颜色值59. return Map(colors, function(x){ return Map(x, function(x){60. return Math.min(Math.max(0, Math.floor(x)), 255);61. });});62. },63. //获取颜色数据64. GetColor: function(color) {65. if(/^#[0-9a-f]{6}$/i.test(color))66. {//#rrggbb67. return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)],68. function(x){ return parseInt(x, 16); }69. )70. }71. else if(/^#[0-9a-f]{3}$/i.test(color))72. {//#rgb73. return Map([color.substr(1, 1), color.substr(2, 1), color.substr(3, 1)],74. function(x){ return parseInt(x + x, 16); }75. )76. }77. else if(/^rgb(.*)$/i.test(color))78. {//rgb(n,n,n) or rgb(n%,n%,n%)79. return Map(color.match(/\d+(\.\d+)?\%?/g),80. function(x){ return parseInt(x.indexOf("%") > 0 ? parseFloat(x, 10) * 2.55 : x, 10); }81. )82. }83. else84. {//color85. var mapping = {"red":"#FF0000"};//略86. color = mapping[color.toLowerCase()];87. if(color){88. return Map([color.substr(1, 2), color.substr(3, 2),color.substr(5, 2)],89. function(x){ return parseInt(x, 16); }90. )91. }92. }93. }94.};95.96.97.98.var CurrentStyle = function(element){99. return element.currentStyle || document.defaultView.getComputedStyle(element, null);100.}101.102.var Bind = function(object, fun) {103. var args = Array.prototype.slice.call(arguments).slice(2);104. return function() {105. return fun.apply(object, args.concat(Array.prototy pe.slice.call(arguments)));106. }107.}108.109.//渐变对象110.var ColorTrans = function(obj, options){111.112. this._obj = $(obj);113. this._timer = null;//定时器114. this._index = 0;//索引115. this._colors = [];//颜色集合116. this._grads = new ColorGrads();117.118. this.SetOptions(options);119.120. this.Speed = Math.abs(this.options.Speed);121. this.CssColor = this.options.CssColor;122.123. this._startColor = this.options.StartColor || CurrentS tyle(this._obj)[this.CssColor];124. this._endColor = this.options.EndColor;125. this._step = Math.abs(this.options.Step);126.127. this.Reset();128. this.SetColor();129.};130.ColorTrans.prototype = {131. //设置默认属性132. SetOptions: function(options) {133. this.options = {//默认值134. StartColor: "",//开始颜色135. EndColor: "#000",//结束颜色136. Step: 20,//渐变级数137. Speed: 20,//渐变速度138. CssColor: "color"//设置属性（Scripting属性）139. };140. Extend(this.options, options || {});141. },142. //重设颜色集合143. Reset: function(color) {144. //修改颜色后必须重新获取颜色集合145. color = Extend({ StartColor: this._startColor, EndColo r: this._endColor, Step: this._step }, color || {});146. //设置属性147. this._grads.StartColor = this._startColor = color.Star tColor;148. this._grads.EndColor = this._endColor = color.EndColor ;149. this._grads.Step = this._step = color.Step;150. //获取颜色集合151. this._colors = this._grads.Create();152. this._index = 0;153. },154. //颜色渐入155. FadeIn: function() {156. this.Stop(); this._index++; this.SetColor();157. if(this._index < this._colors.length - 1){158. this._timer = setTimeout(Bind(this, this.FadeIn), this.Speed);159. }160. },161. //颜色渐出162. FadeOut: function() {163. this.Stop(); this._index--; this.SetColor();164. if(this._index > 0){165. this._timer = setTimeout(Bind(this, this.FadeOut), this.Speed);166. }167. },168. //颜色设置169. SetColor: function() {170. var color = this._colors[Math.min(Math.max(0, this._in dex), this._colors.length - 1)];171. this._obj.style[this.CssColor] = "rgb(" + color[0] + "," + color[1] + "," + color[2] + ")";172. },173. //停止174. Stop: function() {175. clearTimeout(this._timer);176. }177.};178.179.</script>180.</head>181.<body>182.<style type="text/css">183.#idGrads{}184.#idGrads div{ font-size:0;height:1px;}185.</style>186.<div id="idGrads"> </div>187.<script>188.var forEach = function(array, callback, thisObject){ 189. if(array.forEach){190. array.forEach(callback, thisObject);191. }else{192. for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); }193. }194.}195.196.var colors = new ColorGrads({ StartColor: "#fff", EndColor : "rgb(20,127,0)" }).Create();197.198.forEach(colors.concat().concat(colors.reverse()), function (x){199. $("idGrads").innerHTML += "<div style=\"background-col or:"+"rgb(" + x[0] + "," + x[1] + "," + x[2] + ");\"></div>";200.})201.</script>202.<Br />203.<Br />204.<style type="text/css">205.#idMenu{ background:#DBDBDB;text-align:center;line-height: 25px; table-layout:fixed;}206.#idMenu td{ cursor:pointer;}207.</style>208.<table id="idMenu" width="600" border="0" cellspacing="5"cellpadding="0">209. <tr>210. <td onclick="location.href='http://heisetoufa.java '">黑色头发</td>211. <td onclick="location.href='http://heisetoufa.java '">紫色头发</td>212. <td onclick="location.href='http://heisetoufa.java '">黑色头发</td>213. <td onclick="location.href='http://heisetoufa.java '">紫色头发</td>214. <td onclick="location.href='http://heisetoufa.java '">黑色头发</td>215. </tr>216.</table>217.<script>218.forEach($("idMenu").getElementsByTagName("td"), function(x , i){219. var ct1 = new ColorTrans(x, { StartColor: "#666", EndC olor: "#fff" });220. var ct2 = new ColorTrans(x, { StartColor: "#f6f6f6", E ndColor: "rgb(20,150,0)", CssColor: "backgroundColor" }); 221.222. x.onmouseover = function(){ ct1.FadeIn(); ct2.FadeIn() ; }223. x.onmouseout = function(){ ct1.FadeOut(); ct2.FadeOut( ); }224.})225.</script>226.<Br />227.<Br />228.<div id="idRandom" style="padding:10px;color:#fff; backgro und-color:#CCC;">点击随机换颜色</div>229.<script>230.var ctRandom = new ColorTrans("idRandom", { EndColor: "#CC C", CssColor: "backgroundColor" })231.232.$("idRandom").onclick = function(){233. var rgb = Map([1,1,1], function(){ return Math.floor(( Math.random() * 255)); } );234. ctRandom.Reset({ StartColor: this.style.backgroundColo r, EndColor: "rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ") " })235. ctRandom.FadeIn();236.}237.</script>238.</body>239.</html>。

合集下载

HTML5网页设计与制作习题练习与答案

HTML5网页设计与制作习题练习与答案

练习1一、填空题1、网站由网页构成，并且根据功能的不同，网页又有静态网页和动态网页之分。

2、Web标准是一系列标准的集合，主要包括结构、表现和行为。

3、HTML中文译为超文本标记语言，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。

4、HTML语言主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。

5、在网站建设中，HTML用于搭建页面结构，CSS用于设置页面样式，JavaSCript用于为页面添加动态效果。

二、判断题1、因为静态网页的访问速度快，所以现在互联网上的大部分网站都是由静态网页组成的。

（X ）2、网页主要由文字、图像和超链接等元素构成，但是也可以包含音频、视频以及Flash等。

（√）3、“HTTP”是一种详细规定了浏览器和万维网服务器之间互相通信的规则。

（√）4、URL（英文Uniform Resource Locator的缩写）中文译为“统一资源定位符”。

URL其实就是Web地址，俗称“网址”。

（√）5、DNS（英文Domain Name System的缩写）是域名解析系统。

但是，在Internet上域名与IP地址之间并不是对应的。

（X）6、Firebug是IE浏览器中常用的一个插件，属于IE强力推荐的插件之一。

（X）7、在网站建设中，JavaScript用于搭建页面结构。

（X ）8、实际网页制作过程中，最常用的网页制作工具是Dreamweaver。

（√）9、在Dreamweaver中制作网页，在菜单栏中选择【文件】→【保存】选项，或使用快捷键Ctrl+S，即可完成文件的保存。

（√）10、所有的浏览器对同一个CSS样式的解析都相同，因此页面在不同浏览器下的显示效果完全一样。

（X）三、选择题1、在Dreamweaver中，使用主浏览器预览网页的快捷键是（B）A、Ctrl+SB、F12C、F5D、Ctrl+F122、使用内嵌式添加CSS样式，CSS样式需要写在（D）A、<title></title>标记之间B、<head></head>标记之间C、<body></body>标记之间D、<style></style>标记之间3、下面选项中，对JavaScript语言描述正确的是（ABD ）A、JavaScript是Web页面中的一种脚本语言文字。

HTML5 动效设计练习题及答案

HTML5 动效设计练习题及答案

HTML5 动效设计练习题及答案HTML5是一种常用的网页设计语言，不仅可以实现静态网页的展示，还可以通过动效设计增添页面的活力与吸引力。

下面是几道HTML5动效设计练习题及其答案，帮助大家提升动效设计能力。

练习题一：旋转动画请实现一个旋转动画效果，点击页面中的一个元素，该元素会以顺时针方向旋转180度，再次点击则恢复原来的状态。

```html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>旋转动画</title><style>.rotate {width: 100px;height: 100px;background-color: #f00;transition: transform 0.5s;}</style><script>function rotateElement() {const element = document.getElementById('rotate-element');if (element.style.transform === 'rotate(180deg)') {element.style.transform = 'rotate(0)';} else {element.style.transform = 'rotate(180deg)';}}</script></head><body><div id="rotate-element" class="rotate"onclick="rotateElement()"></div></body></html>```练习题二：透明度渐变请实现一个元素透明度渐变的动画效果，鼠标悬停在元素上时，元素的透明度从0渐变到1，鼠标移出时又逐渐恢复透明度为0。

HTML练习题

HTML练习题

HTML练习题一、选择题1.URL也称为（a）。

a.统一资源定位符b.客户机c.网络服务商d.远程访问2、通常网页的首页被称为（a）。

a.主页(index.html)b、网页C.网页D.网站3、网页的基本语言是（c）。

a.javascriptb、 vbscriptc.htmld、 xml4、网页中包含所谓的（a），通过已经定义好的关键字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其它文件，获得相应的信息.a.超链接b.热区c、图片D.多媒体5、通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做（b）。

a、主页B.网站C.静态网页D.动态网页动态网页和静态网页的区别：是否连接到后台服务器6。

网页文件的扩展名可以是（a）htmb。

docc。

Bat7和HTML参考（a）a.超文本标记语言（hypertextmarkuplanguage）b.家庭工具标记语言（hometoolmarkuplanguage）D幻灯片演示文件c.超链接和文本标记语言（hyperlinksandtextmarkuplanguage）d.以上均错误8.（d）是用于在互联网上编写网页的主要语言、A.C语言和b.vbc.vfd.html9.在HTML文件中，大多数标记都是对应的。

开始标签为＞且结束标签为（a）。

在两个标签之间添加内容。

a、 b.〈c.〈c〉d.〈d〉10、〈head〉与〈/head〉就是一对标记，称为文件的（a），用来记录文档的相关信息。

a、头部标记B.尾部标记C.身体标记D.总标记11、（a）标记是html文档的第1个标记，它通知客户端该文档是html文a.〈html〉b.〈body〉c、〈头〉d.〈html〉12、(c)标记是出现在文档的起始部分，标明文档的头部信息，一般包括标题和主题信息a、〈html〉b.〈正文〉c.〈头〉d.〈/html〉13.（b）标签用于指示文件的主要区域。

这部分通常包含其他字符串，如标题、段落、列表等b.〈body〉c.〈head〉d.〈/html〉14.\在网页源代码中，（b）标记是必不可少的。

html代码练习题

html代码练习题

1．（多选）网站首页默认的文件名一般有（）。

A．index.htm B．index.html C．index.asp D．default.htm2.下列关于HTML语言的描述不正确的是（）。

A．HTML文档是文本格式的文件B．HTML代码中可以嵌入多种网页特效代码C．不懂HTML语言的人无法制作网站D．HTML语言是通过一系列特定的标记来标识出相应的意义和作用的3．为了标识一个HTML 文件，应该使用的标签是（）。

A．<style></style> B．<body></body> C．<head></head> D．<html></html>4．在HTML语言中，表格中行的开始和结束的标签是（）。

A．<head></head> B．<tr></tr>C．<td></td> D．<table></table>5.超文本标记语言“<a href=‘http://www．cctv．com’>央视国际</a>”的作用是（）。

A．创建一个指向央视国际网站的超链接B．创建一个指向央视国际网站的电子邮件C．插入一幅央视国际网站的图片D．插入一段央视国际网站的文字6．在HTML语言中，头元素的的标记是（）。

A．<style></style> B．<body></body> C．<head></head>D．<html></html>7. 在网页中添加一个图片的HTML代码是（）。

A．<img src=″图片路径及文件名″>B．<a herf=″链接页面路径及文件名″><img src=″图片路径及文件名″></a>C．<bgcolor=″#FFFFFF″>D．<title>图片</title>8．绚丽多彩的网页是靠HTML语言来实现的，HTML语言是（）。