网页前端设计-作业四（HTML5）

参考教材：HTML5网页前端设计（第2版）作者：周文洁

1. 普通（2分）如何使用HTML5表单新增pattern属性限制用户只允许输入6位阿拉伯数字？

关于正则表达式有多种用法，这里选择其中一种参考答案列举如下： <input type="text" name="number" pattern="[0-9]{6}" title="请输入6位数字" />

2 . 普通（2分）HTML5表单新增width和height属性可以用于何种类型的<input>标签？

width和height属性只能用于类型为image的<input>标签。

3 . 普通（2分）HTML5表单新增multiple属性可以用于何种类型的<input>标签？

该属性只适用于2种类型的<input>标签：email（电子邮箱）和file（上传文件控件）。

4 . 普通（2分）<form>标签的method属性可以取哪些属性值？分别表示什么含义？

表单的method属性用于规定了发送表单数据的两种HTTP方法：GET和POST方法。其中表单标签默认的提交方式为GET方法。 GET方法：提交表单数据时，GET方法会将表单组件的数据名称和值转换为文本形式的参数并直接加原URL地址后面，点击提交按钮后可以直接从浏览器地址栏看到全部内容。这种方式适用于传递一些安全级别要求不高的数据，并且有传输大小限制，每次不能超过2KB。 POST方法：这种方法传递的表单数据会放在HTML的表头中，不会出现在浏览器地址栏里，用户无法直接看到参数内容，适用于安全级别相对较高的数据。并且对于客户端而言没有传递数据的容量限制，完全取决于服务器的限制要求，总体来说传输的数据量比GET方法大。

5 . 普通（2分）按钮标签<button>有哪些类型？分别表示什么含义？

有三种类型，分别是提交（submit）、重置（reset）或无动作按钮（button）类型。提交（submit）用于提交表单数据；重置（reset）用于重置表单填写的内容；无动作按钮（button）本身没有任何动作，需要配合JavaScript代码使用。

6 . 普通（2分）HTML5中新增了哪些<input>标签的常用类型？分别表示什么含义？

HTML5中新增的常用类型如下表所示。类型名称解释 tel 电话号码 email 电子邮箱地址 url URL网址 number 数值 range 包含数值范围的滚动条 datetime UTC日期（包含年、月、日）和时间（包含时、分） datetime-local 本地日期和时间 time 选择时间（包含时、分） date 选择日期（包含年、月、日） week 选择星期（包含年、第几周） month 选择月份（包含年、月） search 搜索栏目的文本输入域 color 颜色选择器

7 . 容易（2分）设置一个滑动条，最小值为0、最大值为100，并且数值间隔为10：<input type="range" step=" ___ " min=" ___" max=" ___" />。（区分大小写）

10、0、100

最小值是min、最大值是max、数值间隔是step。

8 . 容易（2分）设置一个日期选择器，使其只显示年份和月份：<input type=" ___" name="test" /> 。（区分大小写）

month

9 . 容易（2分）已知有<input type=" ___ " name="pwd" />，请填空使其成为不以明文显示内容的密码输入框。（区分大小写）

password

10 . 容易（2分）在HTML5表单中可以使用域标签___将同一个表单中的多个元素分组显示，使用 ___标签在每个分组区域显示独立的域标题。（区分大小写）

11 . 容易（2分）请填写<input type=" ___ " accept=" ___" />空白位置，使其只允许上传.gif格式的图像文件。（区分大小写）

file、image/gif

文件上传控件是file类型，image/gif表示只允许上传.gif格式的图像文件。

12 . 容易（2分）已知有<textarea、____ >文本框</textarea>，请填空使其成为禁用状态（无法输入内容）的多行文本框。（区分大小写）

disabled

13 . 容易（2分）在提交表单数据时，<form>标签的method取值为___时会将表单参数直接放在URL中；取值为___时将安全性更高，参数不会出现在URL中。（区分大小写）

get、post

14 . 普通（2分）在HTML5表单中，已知当前选中的下拉选项是<option value="apple" selected>苹果</option>，那么提交表单时后台收到的值是“苹果"。

错误

后台收到的是value属性值，因此应该是“apple”。

15 . 容易（2分）<input>标签的type属性取值为 ___时可以用于显示提交按钮；取值为___时可以用于显示重置按钮。（区分大小写）

submit、reset

16 . 普通（2分）在HTML5表单中已知有多选列表<select multiple>…内部选项代码略…</select>，无论内容有多少选项都可以同时显示出来，无需滚动查看。

错误

默认只显示4条选项，如果希望全部都显示出来得追加size属性。

17 . 普通（2分）在HTML5表单中已知有<input type="date" max="2020-10-15" min="2020-10-01" step="5" />，那么只有2020年10月的1、5、10、15日为可选状态。

错误

只有2020年10月的1、6、11日为可选状态。

18 . 普通（2分）在HTML5表单中类型为hidden的<input>标签不会显示在页面上。

正确

该类型会生成一个隐藏域，可以用于提交表单数据，但是不会影响网页显示的内容。

19 . 普通（2分）在HTML5表单中，width和height属性可以用于类型为text的<input>标签。

错误

width和height属性可以用于类型为image的<input>标签。

20 . 普通（2分）在HTML5表单中，<input type="radio" name="group01" />和<input type="radio" name="group02" />不能同时被选中。

错误

只有name属性值相同的单选按钮才属于同一组，且不能同时被选中。本题的name名称不同（分别是group01和group02）互相不影响。

21 . 普通（2分）HTML5表单新增的<datalist>元素可以与文本输入框配合使用来显示提示选项，在文本输入框中添加list属性值为<datalist>元素的class名称即可互相关联。

错误

在文本输入框中添加list属性值为<datalist>元素的id名称才可互相关联，而不是class名称。

22 . 普通（2分）在HTML5表单中，已知有<form>的method属性值为get，其内部有<input type="submit" value="提交" formmethod="post" />，那么点击该按钮时会以post方式提交而不是get。

正确

formmethod属性属于表单重写属性，它可以覆盖掉原先method的属性值，因此最后get失效而post有效。

23 . 普通（2分）<input>标签的type属性值为radio时表示复选框。

错误

radio表示的是单选框，checkbox才是复选框。

24 . 普通（2分）<form>标签的enctype属性值为text/plain主要用于通过表单发送邮件。

正确

正确，适用于表单的action属性值为mailto:URL的这种情况。

25 . 容易（2分）在HTML5表单中placeholder属性不能用于以下哪种<input>标签类型？（）。

A. text

B. checkbox

C. url

D. password

placeholder属性会在空白输入框中出现提示，输入框获得焦点时提示消失

26 . 容易（2分）关于HTML5表单新增form属性，以下哪个说法不正确？（）。

A. 同一个外部<input>标签只能在form属性中引用一个表单的id名称。

B. 放在表单<form>内部的<input>标签可以不用form属性引用表单的id名称。

C. 同一个表单<form>允许被多个外部<input>标签使用form属性引用。

D. 外部的<input>标签通过form属性引用表单<form>的id名称实现与该表单的关联。

同一个外部的<input>标签允许同时从属多个表单，只要在form属性值中用逗号隔开即可。

27 . 容易（2分）在HTML5表单中如何为类型为image的<input>标签自定义宽度为100像素、高度为50像素？（）。

A. <input type=”image” src=”test.png” h=”100” w=”50” />

B. <input type=”image” src=”test.png” w=”100” h=”50” />

C. <input type=”image” src=”test.png” height=”100” width=”50” />

D. <input type=”image” src=”test.png” width=”100” height=”50” />

width表示宽度、height表示高度。

28 . 容易（2分）在HTML5表单中已知有输入框<input type="text" name="username" required />用于输入用户名，且其所在表单元素<form>中有属性novalidate="true"，请问在提交表单信息时以下哪种描述正确？（）。

A. 用户名为空时也可以提交成功，不去验证。

B. 用户名是必填内容，为空无法提交成功。

C. required属性的优先级大于novalidate，因此novalidate失效。

D. novalidate=”true”表示需要验证数据有效性。

required属性的优先级小于novalidate，因此required失效。novalidate=”true”表示不验证数据有效性。

29 . 容易（2分）在HTML5表单中，如果希望上传文件的控件允许一次上传多个文件，需要用到以下哪个属性？（）。

A. many

B. multiple

C. multi

D. m

正确用法是<input type=”file” name=”test” multiple />

30 . 容易（2分）在HTML5表单新增属性中，以下哪个可以要求用户在提交之前必须填写内容，提交时输入框不能为空？（）。

A. autofocus

B. autocomplete

C. required

D. placeholder

required表示当前输入内容不允许为空。

31 . 容易（2分）在HTML5表单新增属性中，以下哪个可以为用户正在输入的<input>域中提示曾经填写过的内容选项？（）。

A. autofocus

B. autocomplete

C. required

D. placeholder

autocomplete表示自动补全。

32 . 容易（2分）在HTML5表单新增属性中，以下哪个可以使指定的输入框在页面加载时自动成为焦点？（）。

A. autofocus

B. autocomplete

C. required

D. placeholder

autofocus表示自动生成焦点。

33 . 容易（2分）已知有<input type="range" name="test" id="myRange" min="0" max="100">，以下哪种输出标签可以与之相关联？（）。

A. <output name=”myOutput” for=”test”></output>

B. <output name=”myOutput” for=”myRange”></output>

C. <output name=”myOutput” for=”range”></output>

D. <output name=”myOutput” for=”input”></output>

for属性值应该是关联元素的id名称。

34 . 容易（2分）以下哪个可以表示输入框内只允许填入英文小写字母，并且只能有6个字符？（）。

A. <input type=”text” pattern=”{a-z}[6]” />

B. <input type=”text” pattern=”[abc][6]” />

C. <input type=”text” pattern=”[a-z]{6}” />

D. <input type=”text” pattern=”[abc]{6}” />

在正则表达式中[a-z]表示小写字母a-z，是中括号；{6}表示6个字符，是大括号。

35 . 容易（2分）以下哪个不属于HTML5表单pattern属性支持的<input>标签类型？（）。

A. text

B. tel

C. password

D. radio

pattern属性支持的<input>标签类型有：text、search、url、tel、email和password。

36 . 容易（2分）在HTML5表单新增输入类型color组件选择需要的颜色后，该输入框的value值是？（）。

A. 英文单词表示的颜色。

B. 十六进制表示的颜色。

C. RGB表示的颜色。

D. 八进制表示的颜色。

37 . 容易（2分）在HTML5表单中声明一个数值输入类型，要求控制用户填写的数值在0-100之间，并且只能是5的整数倍。以下哪种写法正确？（）。

A. <input type=”number” max=”0” min=”100” step=”5” />

B. <input type=”digit” max=”0” min=”100” step=”5” />

C. <input type=”number” min=”0” max=”100” step=”5” />

D. <input type=”digit” min=”0” max=”100” step=”5” />

数值输入类型是number；最大值是max、最小值是min；间隔是step。

38 . 容易（2分）HTML5表单新增了一些输入类型，以下哪种可以用于输入UTC日期和时间？（）。

A. datetime

B. datetime-local

C. time

D. date

datetime-local是本地日期和时间；time只有时间；date只有日期。

39 . 容易（2分）关于<button>按钮元素以下说法不正确的是？（）。

A. 该标签之间可以包含普通纯文本。

B. 该标签之间可以包含图像。

C. 该标签之间可以包含文本格式化标签。

D. 该标签默认动作是提交表单。

该按钮只有放在表单内容并声明type=”submit”才是提交表单按钮，在表单之外是可以独立使用的，且可以配合脚本实现多样化的功能。

40 . 容易（2分）以下哪个不能放在表单中起到提交按钮的作用？（）。

A. <button type=”submit”>提交</button>

B. <input type=”submit” value=”提交” />

C. <input type=”image” src=”test.png” alt=”提交” />

D. <button value=”submit”>提交</button>

<button>按钮的type属性值submit表示提交按钮，如不规定则IE浏览器默认其type值为button。

41 . 容易（2分）<p>已知有下拉菜单相关代码如下：</p><p><br></p><p><br></p><p><select></p><p><br></p><p><option value="apple" selected>苹果</option></p><p><br></p><p><option value="banana">香蕉</option></p><p><br></p><p><option value="pear" selected>梨子</option></p><p><br></p><p></select></p><p><br></p><p><br></p><p><br></p><p><br></p><p>以下说法正确的是？（）。</p>

A. 苹果选项是默认选中状态。

B. 香蕉选项是默认选中状态。

C. 梨子选项是默认选中状态。

D. 空白选项是默认选中状态。

在不加任何selected属性的情况下，页面首次加载时第一个选项为默认选中状态；如果有一个selected属性，则对应<option>选项为选中状态；如果有多个选项都有selected属性，则默认只显示最后一个。

42 . 容易（2分）声明一个10行、每行20个字符的多行文本框区域，以下哪句代码正确？（）。

A. <textarea col=”10” row=”20”></textarea>

B. <textarea col=”20” row=”10”></textarea>

C. <textarea cols=”10” rows=”20”></textarea>

D. <textarea cols=”20” rows=”10”></textarea>

rows表示行、cols表示列（即每行多少字符）。

43 . 容易（2分）关于多行文本框<textarea>描述不正确的是？（）。

A. 该元素允许文本换行。

B. 文本的默认字体是Courier。

C. 文本框默认是只读状态，需要用属性控制修改才能变成可编辑状态。

D. 文本框的默认可见宽度是20个字符。

默认是可编辑状态，加上readonly属性后才会变成只读状态。

44 . 容易（2分）以下哪种方式可以允许上传图片格式文件？（）。

A. <input type=”file” accept=”image/*” />

B. <input type=”file” accept=”text/css” />

C. <input type=”file” accept=”application/rtf” />

D. <input type=”file” accept=”video/mpeg” />

image/*是所有图片格式文件；text/css是CSS样式文件；application/rtf是RTF格式文件；video/mpeg是MPEG格式视频文件。

45 . 容易（2分）关于<input>标签的maxlength属性，以下说法不正确的是？（）。

A. 该属性用于规定<input>元素中允许的最大字符数。

B. 如果该属性取值为4，那么最多只能显示4个汉字或英文字母。

C. 如果该属性取值为2，那么最多可以显示2个汉字或4个英文字母。

D. 如果该属性取值为3.5，最大能显示3个汉字。

无论该属性取值为多少，最大能显示同样多的汉字、英文字母或数字。但是尽量填入整数，如果填入了小数也只能去尾法取整来显示字符。

46 . 容易（2分）<input>标签的type属性取值为image时会显示成图片提交按钮，以下哪个描述是错误的？（）。

A. 该按钮的图片可以来源于自定义图片素材。

B. 该按钮可以使用src和alt属性同时显示背景图片和替代文本内容。

C. 该按钮和<input>标签type属性值为submit的按钮功能效果一样，用于提交表单数据。

D. 该按钮的图片素材来源可以是本地或网络地址。

只有src属性无效时才会显示alt属性中的替代文本内容，不会同时出现。

47 . 容易（2分）<input>标签的type属性取值为button时会显示成按钮，以下哪个描述是错误的？（）。

A. 该按钮是一个无动作按钮，被点击后无任何效果，需要与脚本配合才能使用。

B. 该按钮的默认样式与<input>标签生成的提交按钮、重置按钮都相同，也可以自定义。

C. 该按钮等同于提交按钮，可以将表单数据提交给服务器。

D. 可以为该按钮添加onclick事件来触发点击事件从而执行自定义函数内容。

该按钮是无动作按钮，不会直接有提交功能。

48 . 容易（2分）<input>标签的何种属性可以控制单选框或复选框为选中状态？（）。

A. checked

B. selected

C. include

D. import

checked属性完整写法为checked="checked"，也可简写为checked本身。如果没有使用该属性，则初始状态下所有选项均处于未被选中状态。

49 . 容易（1分）<input>标签的type属性取值为checkbox表示复选框，如何将多个复选框组合在同一组使用？（）。

A. 为它们添加相同的id属性值即可表示在同一组。

B. 为它们添加相同的class属性值即可表示在同一组。

C. 为它们添加相同的value属性值即可表示在同一组。

D. 为它们添加相同的name属性值即可表示在同一组。

50 . 容易（1分）<input>标签的type属性取值为以下哪种时可以用于显示密码输入框？（）。

A. text

B. password

C. hidden

D. reset

51 . 容易（1分）关于<form>标签的target取值，以下哪个表示打开一个新窗口来显示内容？（）。

A. _blank

B. _self

C. _parent

D. _top

_blank表示在新打开窗口；_self表示覆盖当前窗口内容打开；_parent通常用在iframe中，表示子页面访问父页面；_top表示最顶层的框架。

52 . 容易（1分）以下哪个不属于<form>标签的属性？（）。

A. method

B. action

C. target

D. src

<form>标签具有5种属性，分别是：action、method、name、enctype以及target。

网页前端设计-作业四（HTML5）相关推荐

网页前端设计-作业一（HTML5）
参考教材:HTML5网页前端设计(第2版 ) 作者:周文洁 1 . 普通 (2分)HTML5新增的格式标签有哪些? HTML5新增的格式标签如下: </p> <p> < ...
网页前端设计-作业三(JavaScript)
参考教材:HTML5网页前端设计(第2版 ) 作者:周文洁 1 . 普通 (2分)如何使用JavaScript对浮点数进行四舍五入获取最接近的整数值? 使用Math.round()方法. 2 . 普 ...
网页前端设计-作业二（CSS）
参考教材:HTML5网页前端设计(第2版 ) 作者:周文洁 1 . 普通 (4分)元素可以向哪些方向进行浮动?如何清除浮动效果? 在CSS中float属性可以用于令元素向左或向右浮动.常用clear ...
网页前端设计-作业六（CSS3）
参考教材:HTML5网页前端设计(第2版 ) 作者:周文洁 1 . 普通 (3分)CSS3的Transition动画中使用何种属性可以设置渐变的持续时间? 在CSS3中transition-dura ...
web前端网页设计作业_网页前端设计快速入门技巧
我最近收到部分在校学生的邮件,很多在临近毕业实习这段时间,面临着找工作,表示压力非常大,也不知道如何去选择,大多数都是处于迷茫期,问我怎么办?也有想学前端的,问我怎么才能够快速的入门? 先说我自己吧, ...
HTML5前端页面设计,HTML5网页前端设计
HTML5网页前端设计编辑锁定讨论上传视频 <HTML5网页前端设计>是2017年6月清华大学出版社出版的图书,作者是周文洁. 书名 HTML5网页前端设计作者 ...
html5网页前端设计当当,HTML5网页前端设计实战
本书是一本从零开始学习的Web前端开发教材,无需额外的基础.本书以项目驱动为宗旨,详细介绍了HTML5.CSS3与JavaScript的基础知识与使用技巧.本书包含例题228个,均在浏览器中调试通过. ...
web前端网页设计作业_如何学习网页前端设计培训？
学习网页的前端设计分为几个步骤或者说几个网页设计教程大类. 一个是熟练掌握各种网页设计需要的操作软件,然后就是WEB界面设计与项目设计,最后还有WEB整站设计实训. 如何学习网页的前端设计呢? 许多零 ...
html and css3 实现分屏设计-网页前端设计 id1086
html and css3 实现分屏设计-网页前端设计 id1086 源码下载地址在新演示地址 <!DOCTYPE html> <html lang="en"& ...

网页前端设计-作业四（HTML5）

网页前端设计-作业四（HTML5）相关推荐

最新文章

热门文章