CSS и HTML-вопрос

Question

Я только что нашел страницу вопросов для веб-разработчиков , и я не уверен, что ответы на два из них. Для Q1 я выбираю ответ e. Для Q2 я выбираю ответ b, но я не уверен, есть ли лучшие способы сделать это.

1. Какая структура разметки является наиболее семантической для заголовка в теле документа, учитывая, что заголовок может быть центрирован по горизонтали с использованием большого жирного красного шрифта?

   а. <h1>This is a Title</h1>

   б. <p align="center"><font size="+3"><b>This is a Title</b></font></p>

   с. <h1 style="font-weight:bold; font-size:large; text-align:center; color:red;">This is a Title</h1>

   д. <title>This is a Title</title>

   е. <h1 class="LargeRedBoldCenterHeading">This is a Title</h1>

   е. <span class="title">This is a Title</span>

2. Допустимо ли каждое из следующих решений для разметки нижнего колонтитула? Почему или почему нет? Какие альтернативные решения вы бы предложили?

   а. <div id="footer">
Copyright 2010 My Company | This text is arbitratry.
</div>

   б. <div id="footer">
<p>Copyright 2010 My Company | This text is arbitratry.</p>
</div>

Answer 1

Правильный ответ для 1. - a, поскольку на вашей странице должен быть только один тег h1 (поэтому, вероятно, класс не нужен, если он используется только для h1), а также потому, что класс используется в e не является семантическим (например, «Заголовок»), но описывает очень специфический стиль, поэтому будет бесполезным, если впоследствии вы измените способ отображения заголовка.

Фактически вы можете исключить другие параметрыкак это:

• b) Использует атрибут align, использует тег font, использует тег b (это сомнительно, но они предпочли бы, чтобы вы использовали em), использует тег p для заголовка.

• c) Использует встроенные стили

• d) Использует элемент title в body для отрисовки содержимого.Это относится к head и не должно ничего отображать на странице в любом случае, даже если оно было неправильно и недопустимо помещено в body.

• e) Использует класс, которыйплохо назван.Классы должны описывать значение класса (например, «EmphasisedHeader», «HelpButton» и т. Д.), А не то, как класс отображается.Думайте о них как о теге - хотите ли вы тег <LargeRedBoldCenterHeading> или тег <EmphasisedHeader>?

• f) Неверный HTML

На вопрос 2. ответ сложнее.Тег p не нужен, поскольку div уже является элементом блока по умолчанию.

В HTML 5 есть элемент footer для этого, и действительно, одним из наиболее привлекательных, но заброшенных предложений на ранних этапах было позволить вам назвать любой элемент, который вам нравится (возможно, используя свой собственный) мета-доктайп") и просто сделайте так, чтобы они отображались как div (например, вы могли бы иметь тег <adbox> вместо <div class="adbox">).

Можно, вероятно, утверждать, что они должны быть в <ul id="footer"> скаждый элемент в <li>, но пытаться стилизовать его с помощью | делителя было бы болезненно в соответствии с требованиями кросс-браузерности.

Я был бы счастлив с a.

Answer 2

Я бы выбрал первый. Маловероятно, что вы будете использовать более одного h1, плюс то имя, которое вы выбрали, связывает представление с именем класса. Например, у вас возникнет проблема, если вы хотите, чтобы в какой-то момент этот цвет был изменен на зеленый (имя класса будет избыточным).

Для нижнего колонтитула оба выглядят приемлемо, в зависимости от того, нужен ли вам p в качестве дополнительного хука для CSS.

В любом случае, я бы, наверное, использовал p, так как это абзац-иш .

Answer 3

Q1 был получен ответ выше.Ответ (а), НЕ (е).

Для Q2 лично я бы не сделал ни того, ни другого.Начиная с the text is arbitrary, нет возможности семантической разметки, поскольку мы понятия не имеем, что пытается представить разметка.Тем не менее, если предположить, что оно не имеет прямого отношения к сопроводительному уведомлению об авторских правах, я бы выделил его в разметке, так как оно отдельно.Что-то вроде:

<div id="footer">
  <small class="copyright">Copyright 2010 My Company</small> |
  <tagOfArbitraryMeaning>This text is arbitrary.</tagOfArbitraryMeaning>
</div>

(мелкий может показаться презентационным, но «мелкий шрифт» определенно имеет смысл в моем понимании)

Или еще лучше:

<div id="footer">
  <a href="http://mycompany.website/copyrightinfo.html" rel="licence">Copyright 2010 My Company</a> |
  <tagOfArbitraryMeaning>This text is arbitrary.</tagOfArbitraryMeaning>
</div>

Однако ни один из этих вариантов не предоставляется, поэтому, если бы мне пришлось выбирать между двумя, я бы, вероятно, пошел с (b), просто потому, что мне «неправильно» помещать текст непосредственно в <div/>, чтодействительно предназначен для группировки других элементов, а не для непосредственного хранения текста.

<div/> s предназначены исключительно для группировки других элементов, как и другие блочные теги, такие как <blockquote/> и <fieldset/> ... Ну- согласно HTML4 / XHTML1, так или иначе следует использовать <div/> s - HTML5 имеет разные идеи и изобрел элемент <section/>, который делает в точности то же самое, что и <div/>, используемый при использовании <div/>кажется, вообще обескуражен ... очень странно.

Answer 4

Вопрос 1: Я бы выбрал А. Это дает семантическое значение тому факту, что является заголовком.Дополнительный класс не нужен, потому что он очень специфичен для текущего макета и / или дизайна страницы.

Вопрос 2: Перейти с A. Тег абзаца не подходит, потому что текст, содержащийсянижний колонтитул на самом деле не абзац текста.Реальные абзацы содержат хотя бы одно предложение и имеют одну идею или тему;пример использует лишь небольшой фрагмент информации и не представляется пользователю в виде абзаца.

Answer 5

В зависимости от того, как вы относитесь к Можно ли использовать несколько тегов h1 на одной странице, но оформлять их по-разному? , вы выбрали бы ответ a вместо ответа e для Q1.

Answer 6

Вы правы в выборе e.для первого варианта в ожидании вы будете использовать различные виды тегов h1 на одной странице, но я бы назвал ваши классы лучше.align является несколько устаревшим вариантом HTML, который может быть выполнен с помощью CSS.Кроме того, избегайте определения style в тегах HTML.Всегда.

Для Q2, b - лучший выбор, так что вы можете поддерживать согласованность по всему сайту (например, с полями и отступами на тегах

)