Лучшие практики
Учиться на ошибках других
Дети умеют задавать вопросы о вещах, которые большинство взрослых считают само собой разумеющимся, и им нравится оспаривать предположения.
Хотя это отличный признак любопытного и рассуждающего ума, он может быть ошеломляющим, и вы не можете по-настоящему научиться (или научить) всему сразу. Некоторые вещи лучше принять на веру в краткосрочной перспективе, пока вы полностью не поймете проблему.
Этот термин вы услышите довольно часто в этом курсе: « лучшие практики (best practice)». Часто говорят, что плохие программы могут быть написаны на любом языке, и мы обнаружили, что это правда (по крайней мере, на каждом языке, который мы видели). Со временем разработчики узнают, что некоторые привычки лучше, чем другие, иными словами, некоторые привычки, такие как избегание избыточности и повторения , делают программу более ясной и понятной и понятной, чем другие привычки, такие как использование операторов goto . Это также может быть связано с производительностью, то есть на заданном языке выполнение задачи одним способом может быть быстрее, чем другим.
Плотник скажет вам, что если вы хотите забить гвоздь, лучше всего сделать это как можно меньше ударов (например, 2 или 3). Это может быть неочевидно для таких людей, как я, но мне сказали, что это лучший способ для людей с гораздо большим опытом, чем я, поэтому я верю в это (по крайней мере, пока).
Иногда возникают споры о том, какие из них являются лучшими. Открываются новые методы, рождаются новые идеи, а иногда и мода меняется. Для наших целей и продолжительности этого курса, когда мы используем термин «лучшая практика», вы можете верить этому, даже если мы не сможем объяснить его на данном этапе курса, поэтому вам захочется это привычка.
Делать и не делать
История веб-страниц такова, что браузеры склонны к прощению определенных типов ошибок. Если вы пропустите закрывающий тег, он часто будет работать так, как вы ожидаете. Вероятно, он не рухнет, не проигнорирует документ или не сдастся полностью, но может показаться, что он не совсем так, как вы хотели. Или, может быть, это выглядит так, как вы хотите, но вы не хотите зависеть от этого. В общем, лучшие практики требуют, чтобы один делал это правильно, а браузер не исправлял его длявы..
Поскольку HTML-файл по сути представляет собой древовидную структуру , теги open и close должны всегда совпадать, и не должно быть никаких совпадений с другими элементами. То есть, вы можете иметь элемент, который заключен в другой элемент, или вы можете иметь два элемента рядом, но вы никогда не сможете иметьa Ситуация, в которой часть элемента находится в другой, а другая часть - нет.
<p>This is a <em>paragraph</em></p>
<h1>Paragraph ahead</h1>
<p>And here it is.</p>
Два приведенных выше примера хороши тем, что в каждом случае либо элемент целиком содержится в другом ( в ), либо они полностью разделены ( и ). Это, с другой стороны, недопустимо:
какая случается в этом случае это то, что мы называем "неопределенным". Это просто означает, что невозможно сказать, как браузер решит с этим справиться. Возможно, он решит автоматически закрыть <p>, когда увидит другой закрывающий тег, или может жаловаться на неожиданный закрывающий тег в заголовке. Затем он может снова пожаловаться, если теперь есть неожиданный закрывающий тег </ p> .
Если вы поигрались с минимальным HTML-файлом из предыдущего раздела, вы могли заметить, что вы можете получить больше минимального, чем это. Например, если вы полностью удалите раздел «head», браузер по-прежнему будет отображать страницу без жалоб (по крайней мере, Chrome будет; Firefox действительно будет жаловаться в консоли отладки, но мы сохраним это на 4 неделе). На самом деле, вы можете даже убрать теги «body» open и close (конечно, не содержимое), и он все равно будет работать как положено. Мало того, что если вы уберете оператор <! Doctype> , он все равно будет работать (и Chrome по-прежнему не будет жаловаться!).
На самом деле браузер знает, чего ожидать от HTML-страницы, поэтому, если он видит файл, заканчивающийся на «.html», он автоматически добавит некоторые данные, если его там еще нет. Обычно он делает основные предположениялюбить:Это файл HTML5, в нем есть все содержимое, поэтому оно помещается в раздел <body>, а раздел <head> пуст. Если щелкнуть правой кнопкой мыши элемент и выбрать «Проверить», вы увидите, что браузер включил раздел <html>, содержащий разделы <head> и <body> , даже если его нет в вашем файле.
Обратите внимание, что мы сказали «типично». Текущее поведение большинства браузеров справится с этим, но оно «неопределено», поэтому нет гарантии, что следующиймодуляобновление не сломает его. Чтобы быть корректным и полным, вам нужен раздел <! Doctype> и раздел <html> с <head> и <body> . В любом случае, это хорошая идея (лучшая практика).
Правильный отступ - это один из способов сделать ваш код более понятным и понятным:
<body>
<h1>Here is a heading</h1>
<p>
<ol><li>List Item 1</li></ol>
</p>
</body>
Приведенный выше код не дает никакого смысла в структуре документа. Эффективно используя отступы, вы можете сделать его более понятным, показывая вложение элементов:
<body>
<h1>Here is a heading</h1>
<p>
<ol>
<li>List Item 1</li>
</ol>
</p>
</body>
Последовательное цитирование строк также полезно, в частности, чтобы избежать потенциальных проблем, которые могут возникнуть, когда вы думаете, что что-то не нуждается в кавычках, но это действительно так.
Часто проекты имеют стили кодирования, которые, как ожидается, будут использовать все, чтобы все выглядело согласованно, и разработчикам было легче читать код друг друга. Если вы создаете проект, вы можете решить, каковы правила (сколько пробелов для отступа, одинарные или двойные кавычки и т. Д.), Но если нет веских причин для отказа от типичных практик, обычно лучше всего принять их.
Пустое пространство и другие тонкости
Прежде чем мы пойдем дальше, полезно понять несколько технических деталей.
Теги нечувствительны к регистру
Вы можете заметить, что код не всегда соответствует тому, как написан данный тег. Мы можем сказать «<h1>» в одном месте и «<H1>» в другом. В этом случае они представляют собой один и тот же тег. Имена тегов «нечувствительны к регистру», что означает, что не имеет значения, используете ли вы заглавные или строчные буквы при их написании. Фактически, вы могли бы написать свой тег body как <bOdY>, но это обычно не считается хорошей практикой (случай с верблюдом / случай со змеей усложняет чтение). С другой стороны, есть места, где вы хотите, чтобы компьютер был «чувствителен к регистру», то есть компьютер будет различать прописные и строчные буквы.
Очевидно, что вы обычно не хотите, чтобы ваш текст (который читает пользователь) был без учета регистра. Вы хотите, чтобы ваши предложения и собственные имена начинались с заглавных букв, но большинство других символов должны быть строчными (если вы не хотите кричать, в этом случае используйте «все заглавные буквы»). Вы вообще не хотите, чтобы браузер связывался с этим. Вы, вероятно, были бы недовольны, если бы браузер превратил все ваши буквы в нижний регистр. И люди могут подумать, что вы довольно сильно завелись, если браузер преобразовал все в верхний регистр.
Не беспокойтесь о слишком много пробелов
С другой стороны, мы обычно не хотим беспокоиться о количестве пробелов (пробелов, табуляции и возвратов) между словами, строками и абзацами (что иногда бывает, но для этого есть тег). В HTML большинство лишних пробелов будут игнорироваться. Под «дополнительным» я подразумеваю более одного пробела (или табуляции) подряд. Есть много мест, где вам нужно обязательно отделить одну вещь от другой пробелом, но, как правило, не имеет значения, если вы поместите туда больше пробелов, ваш результат будет выглядеть одинаково.
Таким образом, все три следующих элемента должны выглядеть точно так же, когда вы читаете их в браузере:
in progress
Поначалу это может показаться странным, но на самом деле это правило о пустом пространстве очень удобно. Третий вариант может быть слишком тесным на ваш вкус, тогда как второй может показаться слишком большим в исходном коде. Поскольку для браузера не имеет значения, сколько пустого пространства имеется, вы можете использовать пустое пространство, чтобы сделать ваш код более наглядным и легко читаемым (обратите внимание на использование отступов во втором элементе <H1> выше).
Учитывая, что имена тегов нечувствительны к регистру (вы можете написать их в любом случае), вы можете подумать, что все, что находится между <и>, нечувствительно к регистру, но это не так просто.
Атрибуты чувствительны к регистру ! Мы еще немного узнали об атрибутах, но когда мы это сделаем, мы обнаружим, что они чувствительны к регистру, поэтому эти два элемента будут иметь разные идентификаторы:
in progress
Last updated
