HTML5与CSS3 web前端开发技术习题答案(2)

密码6~16个字符，区分大小写

（2）在HTML文档中插入图像使用什么标记？该标记有哪些常用属性？分别实现什么功能？

使用标记插入图像，语法格式如下。

该标记含有多个属性，具体的属性及功能如表所示。其中，width属性、height属性、border属性、align属性已经不建议使用，而是通过CSS来描述。

属性名 src title width/height border align 说明 图像地址 添加图像的替代文字 设置图像宽度/高度 设置图像边框 设置图像对齐方式

（3）绝对路径、相对路径和根路径的区别是什么？

绝对路径指文件的完整路径，包括文件传输的协议HTTP、FTP等，一般用于网站的外部链接，

相对路径是指相对于当前文件的路径，它包含了从当前文件指向目的文件的路径，适用于网站的内部链接。

根路径的设置以“/”开头，后面紧跟文件路径，例如：/download/index.html。根路径的设置也适用于内部链接的建立，一般情况下不使用根路径。根路径必须在配置好的服务器环境中才能使用。

（4）如何为网页添加超链接？定义超链接时如何指定打开链接文件的目标窗口？有几种目标窗口形式？

在HTML文件中，使用标记来定义超链接，具体链接对象通过标记中的href属性来设置。定义超链接的语法格式如下。

target属性指定用于打开链接的目标窗口，默认方式是原窗口，其属性值如表所示。

属性值 parent blank self top 说明 当前窗口的上级窗口，一般在框架中使用 在新窗口中打开 在同一窗口中打开，和默认值一致 在浏览器的整个窗口中打开，忽略任何框架

2．操作题

（1）使用无序列表标记和有序列表标记

定义如图3-23所示的嵌套列表，链接文件可自定义或输入“#”。

学生选课信息

必修课

公共必修课

专业必修课

选修课

公共选修课 专业选修课

图3-23 嵌套列表效果

（2）在网页中插入图像，并对图像做如下设置。

图像宽为浏览器窗口的一半，高为浏览器窗口的1/4；图像边框宽5像素；替代文字为“图片欣赏”；图像显示在文字左侧。

（3）使用表格及表格嵌套技术等，对网页做如图2-43所示的布局设计。 ① 表格宽度为600像素；

② 可以先后插入4个2×2的表格，将每个表格第一行第一个单元格设置为跨2竖列，也可以根据图示，自定义表格结构；

③ 标题单元格的背景颜色可自定义。

图3-24 表格示例

第四章

1．简答题

（1）表单中文本框和密码框在定义方法和实现效果上有什么区别？

将标记中的type属性值设置为text，就可以在表单中插入文本框。在此文本框中可以输入任何类型的数据，但输入的数据将以单行显示，不会换行。例如，使用标记输入姓名的代码如下。

姓名：

其中，name属性用于定义文本框的名称。maxlength和size属性用于指定文本框的宽度和允许用户输入最大的字符数，更多情况下，采用CSS设置。value指定文本框的默认值。

将标记中的type属性值设置为password，就可以在表单中插入密码框，涉及到各属性的含义与文本框相同。在此密码框中可以输入任何类型的数据，这些数据都将以实心圆点的形式显示，以保护密码的安全，例如：

密码：

复选框允许在一组选项中选择任意多个选项。将标记中的type属性值设置为checkbox，就可以在表单中插入复选框。通过复选框，用户可以在网页中实现多项选择。例如，

请选择：

其中，value属性指定的复选框被选中是该控件的值，checked用来设置复选框默认被选中。 单选按钮表示互相排斥的选项。在某单选按钮组（由两个或多个同名的按钮组成）中选择一个按钮时，就会取消对该组中其他所有按钮的选择。将标记中的type属性值设置为radio，就可以在表单中插入一个单选按钮。在选中状态时，按钮中心会有一个实心圆点。

（3）简述HTML5新增加的form属性、formmethod属性、placeholder属性、autocomplete属性的功能。

在HTML5中，可以将表单元素写在页面上的任何位置，然后给该元素指定一个form属性，属性值为该表单的id（id是表单的惟一属性标识），通过这种方式声明该元素属于哪个具体的表单。

HTML5中使用formmethod属性对每个表单元素分别指定不同的提交方法。

placeholder是指当文本框

autocomplete属性是辅助输入的自动完成功能，其值为“on”“off”与“”三类值。不指定时，使用浏览器的默认值（取决于各浏览器的设定）。该属性设置为on时，可以显式指定待输入的数据列表。如果使用datalist元素与list属性提供待输入的数据列表，自动完成时，可以将该 datalist元素中的数据作为待输入的数据在文本框中自动显示。

（4）HTML5中input标记的type属性增加的类型包括number、range、date、time等，说明其功能。

将input标记中的type属性设置为number，可以在表单中插入数值输入域，还可以限定输入数字的范围。

将input标记中的type属性设置为range，可以在表单中插入表示数值范围的滑动条，还可以限定可接受数值的范围。

只要将input标记中的type属性设置为date、time，可以完成网页中日期选择器的定义。

2．操作题

制作如图4-11所示的表单。