Question

我保持“获取未打开的元素“ EM”的结束标签” 验证器中元素“ STRONG”（未打开）的结束标记，我似乎无法弄清楚如何正确实现此目标。

我尝试过移动标签，也检查过标签，每个标签有1个开盘和1个闭盘，所以我有点困惑。 34和35行。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>  Restaurant Information </title>
<style type="text/css">

    p{font-family: Georgia, "Times New Roman",
    Times, serif;
    font-size: 0.95em;
    color: #333333;
    line-height: 20px;}
    h1{font-family: Georgia, "Times New Roman",
    Times, serif;
    font-size: 1.4em;
    color: #000033;}
    h2{font-family: Georgia, "Times New Roman",
    Times, serif;
    font-size: 1.2em;
    color: #000033;}
    h3{font-family: Georgia, "Times New Roman",
    Times, serif;
    font-size: 1.2em;
    color: #000033;}
    .boldit {font-family: Arial, Helvetica, sans-serif;
    font-size: 0.95em;
    font-weight: bold;
    color: #990000;
    letter-spacing: .1em;}
    .style1 {font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #000066; }
    a:link {color: #006666; }
    a:visited{color: #FF6633; }
    <strong><em>stuff typed </em> </strong>
    strong em {font-size: .9em 
    color: #336666;}

</style>
</head>

<body>
<h1>Restaurant Information</h1>

<!-- Resturant infomation section -->
<p> <span class="boldit">TYPE OF CUISINE:</span> Italian and Continental</p>
<p><span class ="boldit">PRICE RANGE:</span> Lunch Entrees $9 to $14, Dinner $12 to $21</p>
<p><span class = "boldit">ATMOSPHERE:</span> Elegant but casual, Cozy, Romantic, Fun & Festive, Like your second home.</p>
<p><span class="boldit">APPEALS TO:</span> Appeals to everyone, from Tourists to Couples and especially to Business Groups</p>
<p><span class = "boldit">DRESS CODE:</span> Elegant but casual</p>
<p><span class = "boldit">MEALS SERVED:</span> Lunch, Dinner</p>

<!-- END OF RESTURANT INFO -->

<!-- START OF CONTACT US -->
<h3>Contact Us:
</h3>
<br>                      
</br>
<p><span class = "boldit"> ADDRESS:</span> </p>
<p class = "style1"> Cafe Townsend </p>
<p class = "style1"> 600 Townsend </p>
<p class = "style1"> San Francisco, CA 94103 </p>
<p>
<span class ="boldit">PHONE: (415) 555-1234</span>
</p>
<p>
<span class = "boldit">FAX: (415) 555-1235</span>
</p>
<p><a href = "mailto: info@cafetownsend.com">Email Us</a> </p>
<p>
<span class = "boldit">DIRECTIONS:</span> Directions Via <a href="https://www.google.com/maps/place/600+Townsend+St,+San+Francisco,+CA+94103/@37.771696,-122.4047585,17z/data=!3m1!4b1!4m5!3m4!1s0x808f7e2cbdae8fcf:0xb43116e96526b6df!8m2!3d37.771696!4d-122.4025698?hl=en">Link to Google Map</a>. </p>
<p>
<span class = "boldit">HOURS:</span> Cafe Townsend is open seven days a week for dinner and Monday thru Friday for lunch.</p> 
<p>
<span class = "boldit"> LUNCH: </span> Monday thru Friday 11:30am - 2:00pm </p>
<p><span class = "boldit">DINNER:</span>Sunday thru Thursday 5:30pm - 10:00pm</p>
<p>Friday and Saturday 5:30pm - 11:00pm</p>

<p><span class = "boldit">CREDIT CARDS ACCEPTED:</span> Visa, Mastercard, American Express, Discover, Diners Club</p>

<!-- END OF RESTURANT INFO -->

<!-- START OF AWARDS AND RECONIZATION -->


<h2>Awards and Recognition: </h2>

<p>Best New Restaurant <br>
<strong><em>Restaurant News, 1994</strong></em></p>
</br>
<p>Best Veal in California <br>
<strong><em>California Magazine, February 2002</strong></em>
<p><span class = "boldit">SPECIAL FEATURE:</span> Cafe Townsend serves only the very highest quality meats, authentically prepared for your dining pleasure. A specialty at Cafe Townsend is the signature dishes that are presented tableside. Dine in our elegantly casual atmosphere at our convenient San Francisco location.</p>



<!-- END OF AWARDS -->


<!-- START OF CAFE TOWNSEND IS PROUD.... -->

<h2>Cafe Townsend Is Proud To Offer The Following Services:</h2>

<p><span class = "boldit">BANQUET FACILITIES / PRIVATE ROOM:</span> We can accommodate your party of up to 34 (50 for standing receptions) in our private dining room with Roman motif and gold and peach accents. This room offers soundproof doors and lighting that will adjust from candlelight to reading luminance. In addition, we have semi-private accommodations, seating up to 50, in one section of our main dining room that can be separated by curtains. For groups of 100 to 120 our main dining room is available. Cafe Townsend will also consider closing the restaurant for a minimum charge to provide the space you need to accommodate your largest parties. <a href="specialevents.html">Read about our Special Events</a>.</p>

<p><span class = "boldit">BAR:</span> Cafe Townsend offers a full service bar. In addition, we have three frozen specialty drinks. For a special occasion, try the Belini, a combination of peach nectar, champagne and Bacardi.</p>

<p><span class = "boldit">CATERING:</span> Both on and off premise catering is available. See the Special Events page for more details.</p>

<p><span class = "boldit">DELIVERY / TAKE-OUT:</span> Our full menu is available for take-out. Cafe Townsend does not offer delivery.</p>

<p><span class = "boldit">ENTERTAINMENT:</span> Enjoy our new red Digital Surround Sound Baby Grand Concert Master "Digital" Piano.</p>

<p><span class = "boldit">RESERVATIONS:</span> Recommended</p>

<p><span class = "boldit">SEATING CAPACITY:</span> 200</p>

<p><span class = "boldit">SMOKING CHOICE:</span> Our restaurant is proud to be a non-smoking establishment.</p>
</body>
</html>

Answer 1

HTML标记在STYLE块内无效（如Chris在其评论中所暗示）。 STYLE标记内的文本内容必须是CSS，而不是HTML，这就是HTML验证器不喜欢它的原因。（以这种方式使用时，STYLE元素实际上是直接在HTML中嵌入样式表的一种方式。）

验证器并没有真正直接告诉您-在这种情况下，肯定会给我们提供更有用的错误消息。

验证者对此抱怨：

Line 34, Column 33: end tag for element "EM" which is not open
    <strong><em>stuff typed </em> </strong>

因为（我假设）它没有在同一行上解析开始的EM标签，因为它不希望它在那儿，因为它在STYLE块中，因此不应是HTML内容。

但是，随后的验证器规则 did 解析结束标记，因此引发了错误。更有用的错误消息是“ HTML元素不是STYLE元素的有效子元素”。

但是，由于您的DOCTYPE：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

...您正在检查的是旧版本的验证规则，因此可能是验证器的旧版本。您可能应该改用这样的HTML5文档类型：

<!DOCTYPE html>

使用该DOCTYPE，您将获得更多有用的错误消息：

Error: CSS: Parse Error.

From line 35, column 21; to line 36, column 1

Answer 2

您的CSS有几个问题。

您的CSS中有HTML，请删除<strong><em>stuff typed </em> </strong>。 strong em {font-size: .9em之后，您还缺少分号。

用以下内容替换CSS。

<style type="text/css">
    p{
        font-family: Georgia, "Times New Roman",
        Times, serif;
        font-size: 0.95em;
        color: #333333;
        line-height: 20px;
    }

    h1{
        font-family: Georgia, "Times New Roman",
        Times, serif;
        font-size: 1.4em;
        color: #000033;
    }

    h2{
        font-family: Georgia, "Times New Roman",
        Times, serif;
        font-size: 1.2em;
        color: #000033;
    }

    h3{
        font-family: Georgia, "Times New Roman",
        Times, serif;
        font-size: 1.2em;
        color: #000033;
    }

    .boldit {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.95em;
        font-weight: bold;
        color: #990000;
        letter-spacing: .1em;
    }

    .style1 {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        color: #000066; 
    }

    a:link {color: #006666; }
    a:visited{color: #FF6633; }

    strong {

    }

    strong em {
        font-size: .9em;
        color: #336666;
    }
</style>

将强元素和em元素组合在一起的正确方法是什么？

2 个答案: