参考答案:
HTML 文档的开始需要版本声明,剩下的页面内容需要包含在开始标记<html>和结束标记</html>之间。在<html>元素中,包含两个主要的部分,文件头部分(<head>元素)和主体部分(<body>元素)。标准HTML文档的结构如下所示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> </body> </html>
参考答案
块级元素的前后都会自动换行,如同存在换行符一样。默认情况下,块级元素会独占一行。例如,<p>、<hn>、<div>都是块级元素。在显示这些元素中间的文本时,都将从新行中开始显示,其后的内容也将在新行中显示。
行内元素可以和其他行内元素位于同一行,在浏览器中显示时不会换行。例如,<a>、<span>等。
我们可以这样理解:如果元素是块级的,则总是在新行上显示,好比是书中的一个新段落;而元素如果是行内的,那么只能在当前行中显示,就像是段落中的一个单词。
因此,块级元素常用来构建网页上比较大的结构,用于包含其他块级元素、行内元素和文本;而行内元素一般只能包含其他行内元素和文本。
参考答案
锚点是文档中某行的一个记号,类似于书签,用于链接到文档中的某个位置。当定义了锚点后,我们可以创建直接跳至该锚点(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
在使用<a>元素创建锚点时,需要使用 name 属性为其命名,代码如下所示:
<a name=”anchorname1”>锚点一</a>
然后就可以创建链接,直接跳转到锚点,代码如下所示:
<a href=”#anchorname1”>回到锚点一</a>
图-1
参考答案
此案例主要练习不规则表格的定义和使用。分析图-1可以看出,表格一共有三行,其中:
第一行:有两个单元格,分别为 a(横向合并两列)和 b(纵向合并两行);
第二行:有两个单元格,分别为 c(纵向合并两行)和 d;
第三行:只有一个单元格,为 e(横向合并两列)。
由此可见,只需要按照行列结构创建表格即可。实现此案例需要按照如下步骤进行。
步骤一:创建文件
首先创建一个纯文本文件,并修改名称为 01_table.html;
步骤二:创建 html 文档的结构
使用文本编辑工具,打开上一步中所创建的文件。
在此文件中,添加 HTML 代码,以创建一个标准结构的 HTML 文档(使用过渡型文档类型声明)。代码如下所示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> </body> </html>
步骤三:设置头部内容
为<head>元素添加内容,为创建的 HTML 文档添加文档标题,并设置文档的编码格式。代码如下所示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>table</title> </head> <body> </body> </html>
步骤四:创建表格
为<body>元素添加内容,创建表格,并通过设置<td>元素的 colspan 或者 rowspan 属性设置单元格的横向合并或者纵向合并。
为了提高页面的美观性,设置了表格的边框,并适当设置表格的高度和宽度。代码如下所示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>table</title> </head> <body> <table width="200" height="200" border="1"> <tr> <td colspan="2">a</td> <td rowspan="2">b</td> </tr> <tr> <td rowspan="2">c</td> <td>d</td> </tr> <tr> <td colspan="2">e</td> </tr> </table> </body> </html>