Простой лендинг с помощью Bootstrap


Я написал простой лендинг на Bootstrap от Twitter. Он отлично работает, я просто хочу знать, если мой код написан в "хорошей практики" способом.

<!DOCTYPE html>
<html lang="en-US">
<head>

  <!-- Title and Logo -->
  <title>SigmaCubes - Home</title>
  <link href="favicon.ico" rel="shortcut icon" />

  <!-- Metadata -->
  <meta charset="utf-8">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta name="author" content="Julian Lachniet" />
  <meta name="description" content="Various HTML and JavaScript projects." />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

  <!-- Libraries -->
  <link rel="stylesheet" href="lib/bootstrap.min.css">
  <script src="lib/jquery-3.3.1.min.js"></script>
  <script src="lib/popper.min.js"></script>
  <script src="lib/bootstrap.bundle.min.js"></script>

</head>
<body class="bg-light">
  <nav class="bg-dark navbar navbar-dark navbar-expand-sm">
    <a class="navbar-brand" href="#"><img src="img/logo.png" height="32px" /></a>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">CubeSolver</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Projects</a>
      </li>
    </ul>
  </nav>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <img class="d-block img-fluid mx-auto" src="img/biglogo.png" style="max-height: 384px; margin: 32px" />
      </div>
    </div>
    <div class="row">
      <div class="col-12 h3 text-center">Various HTML and Javascript projects.</div>
    </div>
    <hr />
    <div class="row">
      <div class="col-12 h5 text-center">SigmaCubes.com is the best website on the internet, and the owner of CubeSolver.</div>
    </div>
  </div>
</body>
</html>

Какие-либо предложения?



Комментарии
1 ответ

Хорошее начало. Я хотел бы добавить несколько незначительных вещей:

Кодировка

Как показывает практика, кодировка должна быть первым элементом head раздел - или, по крайней мере, она должна прийти раньше title элемент:

<meta charset="utf-8">
<title>SigmaCubes - Home</title>


Для того чтобы все браузеры признать Декларацию, она должна быть


  • В <head> элемент,

  • Прежде чем какие-либо элементы, содержащие текст, например <title> элемент, и

  • В первые 512 байт документа, в том числе DOCTYPE и Пробел


Из Google код архиве установлен-зеркало - MetaCharsetAttribute.Вики

Будьте последовательны

В HTML5 пустоту элементы могут иметь необязательный / до закрытия >. Как кажется, что вы предпочитаете добавлять этот Слэш, используйте его везде, а не только на некоторые элементы, такие как здесь:


<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta name="author" content="Julian Lachniet" />
<meta name="description" content="Various HTML and JavaScript projects." />

Вот некоторые дополнительные сведения об этой теме: HTML 5 С: это <br>, <br/>или <br />?

Действительный HTML

Изображения имеют обязательной alt-атрибут:

<img src="img/logo.png" height="32px" alt="Some description" />

Вы должны добавить этот атрибут для всех img элементы. Это будет не только помочь людям с помощью программы чтения с экрана, чтобы лучше понять ваш сайт, это также может улучшить SEO.

Для более подробной информации, см. Википедию: https://en.wikipedia.org/wiki/Alt_attribute.

Вмятие

Попробуйте отступ элементов, если это возможно.

<a class="navbar-brand" href="#">
<img src="img/logo.png" height="32px" />
</a>

... легче зачать как:


<a class="navbar-brand" href="#"><img src="img/logo.png" height="32px" /></a>

Семантика

Вашей главной навигации выглядит нормально. Однако, в разделе, начиная с <div class="container-fluid"> выглядит как divitis.

Узнайте о HTML5 семантики и структуризации контента вашего сайта. Вот некоторые связанные статьи по w3.org для начала:

Встроенные стили

Старайтесь избегать встроенных стилей. Это может сработать для небольшой страницы, как эта, но будет сложно, как ваш проект растет.


<img class="d-block img-fluid mx-auto" src="img/biglogo.png" style="max-height: 384px; margin: 32px" />

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

2
ответ дан 8 марта 2018 в 10:03 Источник Поделиться