将每个单词的第一个 H1 字母放大并为单个 H1 着色

Question

我有一个包含 5 个单词的 h1 行，我只想增加第三个、第四个和第五个首字母的大小，给它们添加下划线，然后将它们设置为不同的颜色。

我已经完成了，但是 WC3 说我的代码对于大小、下划线和颜色的每种情况下的所有属性和元素都无效。

以下是在浏览器中有效但无法验证的内容：

欢迎使用
M< /u>y <字体大小=120% 颜色=红色>Fvourite Website

这是我唯一的错误（总共 15 个）在这个设计上。

请任何人协助使用 HTML 和/或 CSS 来修复此问题，以便其验证。

我尝试过尺寸和颜色的变化，虽然它们在浏览器中工作，但它们不会验证。

谢谢 ：）

Answer 1

它们不会验证，因为字体标签很久以前就被弃用了，因此它的所有参数都被弃用了，

您可以在CSS中使用它：

h1 {
margin:5px;
}
#title span {
font-size: 1.2em;
color: #c13636;
text-decoration: underline;
}

并将要突出显示的单词包装在span标签中：

<span>TEST</span>

应用于您的代码：

<h1 id="title">Welcome to <br /><span>M</span>y <span>F</span>avourite <span>W</span>ebsite</h1>

演示：

http://jsfiddle.net/Mutant_Tractor/SBbcu/

Answer 2

<font></font> and <u></u>

已弃用。使用应用了 CSS 的 。

Answer 3

使用带有 style 属性的 span 元素，如下所示：

<span style="font-size: 120%; color: red; text-decoration: underline;">M</span>

或者，为各种组合定义 CSS 类并使用它们。

Answer 4

因此，作为摘要

• 不能包含在

  中

• 不要使用 或
• HTML 用于标记，CSS 用于样式

使用“纯”HTML/CSS，您有多种可能性来实现您的目标正在追赶。这是几个变化。您可能应该将 class 属性添加到 span 元素，但为了简洁起见，我在这里省略了它们。

1°

HTML 文件：

<h1>Welcome to <span>M</span>y <span>F</span>vourite <span>W</span>ebsite</h1>

CSS 文件：

h1 span {
  font-size: 120%;
  color: red;
  text-decoration: underline;
}

---

2°

HTML 文件：

<h1>Welcome to <span>My</span> <span>Favourite</span> <span>Website</span></h1>

CSS 文件：

h1 span:first-letter {
  font-size: 1.2em;
  color: red;
  text-decoration: underline;
}

Answer 5

您有一些无效标签 和 。

我会做这样的事情来验证和清理你的代码：

<style>
    .big {
         font-size: 1.2em;
    }

    .red {
         color: red;
    }
</style>

<h2>Welcome to</h2>
<h1>
    <span class="big red">M</span>y 
    <span class="big red">F</span>avorite 
    <span class="big red">W</span>ebsite
</h1>

甚至：

<style>
    h1 span:first-letter {
        font-size: 1.2em;
        color: red;
    }
</style>

<h2>Welcome to</h2>
<h1>
    <span>My</span>
    <span>Favorite</span> 
    <span>Website</span>
</h1>