Как правильно соединить элементы strong и em вместе? - PullRequest
0 голосов
/ 07 февраля 2019

Я продолжаю "получать конечный тег для элемента" 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>

Ответы [ 2 ]

0 голосов
/ 08 февраля 2019

У вас есть пара проблем с вашим CSS.

У вас есть HTML в вашем CSS, удалите <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>
0 голосов
/ 08 февраля 2019

HTML-теги недопустимы внутри блока STYLE (как подсказывает Крис в своем комментарии).Текстовое содержимое внутри тегов 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.

Однако последующее правило валидатора делало , анализирует закрывающий тег и, таким образом, ошибкуброшенБолее полезным сообщением об ошибке будет «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
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...