Существует ли универсальный способ упорядочить html с интервалом?

#html

#HTML

Вопрос:

Я смотрел как онлайн, так и на переполнение стека, но я не нашел никакого конкретного ответа. Я бы хотел, чтобы все было организовано и правильно.

 When I look at websites and use dev tools 
to dissect pages it seems hard to really 
distinguish the appropriate spacing, if 
you know of any reference that explains 
that'd be awesome.


Also does, vs code have an extension or 
shortcut that does this for you?

Exaggerated Example:

   

     <html>
<header>
       <How do i know when to tab out
<And when to tab in>
                <body>

Thank you for your time. Have a great day!

Развернуть фрагмент

Ответ №1:

Я думаю, что вы спрашиваете об отступах кода

Нет жестких и быстрых правил — некоторые предпочитают табуляцию пробелу, а другие предпочитают пробелы (обычно 2 или 4). Единственное, что важно, это поддерживать его согласованность — выберите один подход и придерживайтесь его.

в терминах отступов кода это на самом деле очень просто — если что-то является дочерним элементом чего-то другого — оно получает отступ относительно этого родителя.

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

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="author" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>
    <p>Hello, world!</p>
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label class="control-label">Label text"</label>
          <input type="text" class="form-control" name="inputName"/>
        </div>
      </div>
    </div>
    <script src="js/script.js"></script>
  </body>
</html>

Скелет кода получен из (https://gist.github.com/taniarascia/d0308ff82a1d4344a904 ) и модифицированный в соответствии с требованиями.

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

1. Отступ кода, это слово, которое я искал! Лол. Ваш ответ был чрезвычайно полезен. Большое вам спасибо!

2. Рад, что это было полезно — если он разрешает isue — пожалуйста, установите флажок «Принято», чтобы другие разработчики знали, что isesue был разрешен. Спасибо и счастливого кодирования 🙂