Лучший способ создать навигационную панель

Question

Я видел три основных способа создания нагигационной панели и задавался вопросом, какой способ лучше или эффективнее. Все они делают почти то же самое.

1: Используйте HTML-тег nav.

Пример # 1:

<nav> 
<a href="#">Home</a> | 
<a href="#">About</a> | 
<a href="#">Blog</a> | 
<a href="#">Sign in</a> 
</nav> 

2: Просто используйте неупорядоченный список.

Пример # 2

<ul> 
<li><a href="#">Home</a> |</li> 
<li><a href="#">About</a> |</li> 
<li><a href="#">Blog</a> |</li> 
<li><a href="#">Sign in</a> |</li> 
</ul> 

После этого, вы должны использовать CSS, чтобы дисплей это встроенный или вы можете использовать поплавок.

3: Используйте только тег.

Пример # 3:

<a href="#">Home</a> | 
    <a href="#">About</a> | 
    <a href="#">Blog</a> | 
    <a href="#">Sign in</a> 

Таким образом, по существу, как с помощью нав, но вы должны вставить некоторые CSS, как, например, # 2, чтобы сделать его плавать: слева или дисплей: встроенный.

Я видел эти три способа создания навигационной панели, и мне было интересно, как вы, ребята, рекомендуете мне создать навигационную панель.

Я также хотел бы услышать мысли ваших ребят о использовании float: left vs display: inline.

Спасибо, у нас отличный день.

Answer 1

В чем вопрос? Это должна быть база знаний, а не сайт общественного опроса.

Все они делают почти то же самое.

Точно так, как вы сказали, все три примера делают то же самое:

• No.1 является самым молодым подход, отличая нав элемент HTML5
• № 2 имел обыкновение быть стандартом, прежде чем что
• №3 также отлично подходит, если вы не нуждаетесь в дополнительном стиле для элементов контейнера навигационного элемента.

Все они могут быть сделаны, чтобы работать так же, как другие с помощью всего лишь нескольких правил CSS ... так что ответ на ваш вопрос: это только о семантики, нет никакой разницы в эффективности.

---

#m2 ul {padding: 0} 
 
#m2 li {display: inline-block}

<div id="m1"> 
 
    <nav> 
 
    <a href="#">Menu 1</a> | 
 
    <a href="#">Home</a> | 
 
    <a href="#">About</a> | 
 
    <a href="#">Blog</a> | 
 
    <a href="#">Sign in</a> 
 
    </nav> 
 
</div> 
 

 
<div id="m2"> 
 
    <ul> 
 
    <li><a href="#">Menu 2</a> |</li> 
 
    <li><a href="#">Home</a> |</li> 
 
    <li><a href="#">About</a> |</li> 
 
    <li><a href="#">Blog</a> |</li> 
 
    <li><a href="#">Sign in</a></li> 
 
    </ul> 
 
</div> 
 

 
<div id="m3"> 
 
    <a href="#">Menu 3</a> | 
 
    <a href="#">Home</a> | 
 
    <a href="#">About</a> | 
 
    <a href="#">Blog</a> | 
 
    <a href="#">Sign in</a> 
 
</div>

Answer 2

С помощью тега ваш код будет легче читать и поддерживать Вспомните что есть моменты, которые вы пишете код, который может быть прочитан на другой.Поэтому, если кто-то читает ваш html, он должен понимать, что это за минимальное время. Также вам будет легче читать, и я считаю, что для этого потребуется меньше правил CSS, чем ваш третий подход.