XML - 管理数据交换/XHTML/答案

XHTML 章节 => XHTML

XHTML 练习 => 练习

答案

1. 将下面的 HTML 文档更改为符合 W3C 过渡标准的 XHTML 文档。使用可从 http://validator.w3.org/ 获取的验证器验证您的页面。

练习 1

下面是一个包含多个已弃用功能的无效 HTML 文档示例。它的结构也不好。该文档需要转换为 XHTML，并将内容与演示分离。

练习 1.a.

a. 将 HTML 文档更改为有效的 XHTML 1.0 过渡文档。使用可从 http://validator.w3.org/ 获取的验证器验证您的页面。

XHTML 1.0 过渡文档

<?xml version="1.0" encoding="UTF-8"?>
<!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>
    <title>Convert HTML to XHTML</title>
  </head>
  <body text="blue">
    <h1>XHTML page</h1>
    <p><b>It is important for your site to be current with the
        most recent W3C standards.</b>
    </p>
    <u>Welcome</u> to my <b>page</b>.<br />
    I hope that you <i>enjoy</i> your stay.
    <p>
      <font color="#9900FF" face="Arial" size="+2">
        XHTML is similar to HTML
      </font>
    </p>
    <a href="http://validator.w3.org">Validator</a>
  </body>
</html>

练习 1.b.

b. 从问题 1.a. 的模型答案开始，识别文档中的所有已弃用元素和属性，并在链接的外部样式表中用 CSS 替换它们。有关已弃用元素的详细信息，请参见超文本标记语言/标签列表。

已弃用的功能是

body 元素的 text 属性；
u 元素；和
font。

可能的样式表是

body {
  color:blue
}

span#welcome {
  text-decoration:underline
 /* It is generally a bad idea to underline anything other than hyperlinks. */
}

p.highlight {
  color:#9900FF;
  font-size:150%;
  font-family:Arial,sans-serif
  /* It is good practice to include one as the CSS generic font families,
     e.g. sans-serif, as an alternative.
  */
}

删除了已弃用功能的文档——请注意使用 id 和 class 属性来为 CSS 选择器提供挂钩。

<?xml version="1.0" encoding="UTF-8"?>
<!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>
    <title>Convert HTML to XHTML</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <h1>XHTML page</h1>
    <p><b>It is important for your site to be current with the
        most recent W3C standards.</b>
    </p>
    <span id="welcome">Welcome</span> to my <b>page</b>.<br />
    I hope that you <i>enjoy</i> your stay.
    <p class="highlight">XHTML is similar to HTML</p>
    <a href="http://validator.w3.org">Validator</a>
  </body>
</html>

练习 1.c.

c. 从问题 1.b. 的模型答案开始，用语义标记替换所有存在的演示标记，并确保所有内联元素都包含在块级元素中。将 DOCTYPE 更改为 XHTML 1.0 严格，并使用 W3C 标记验证服务验证页面。

演示元素是

b
i
br

以 span 元素开头的“段落”是内联元素和文本的混合，因此应包含在块级元素中，例如 p（段落）。

a（锚）元素是内联的，需要包含在块级元素中。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Convert HTML to XHTML</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <h1>XHTML page</h1>
    <p><strong>It is important for your site to be current
        with the most recent W3C standards.</strong>
    </p>
    <p><span id="welcome">Welcome</span> to my <strong>page</strong>.</p>
    <p>I hope that you <em>enjoy</em> your stay.</p>
    <p class="highlight">XHTML is similar to HTML</p>
    <p><a href="http://validator.w3.org">Validator</a></p>
  </body>
</html>

XHTML 章节 => XHTML

XHTML 练习 => 练习