Если вы не новичок, вам может показаться, что перечисленные ниже ошибки очевидны. Но помните, что все зависит от вашего опыта. Надеемся, что этот список сэкономит вам время и нервы в ближайшем будущем.
Ошибка №1: пробел в имени файла
Вы можете сохранить ваш HTML-файл под именем "my cool page.html", но пробелы между словами — это ошибка.
Веб-адреса (или URL) не могут содержать пробелы.
Если вы загрузите этот файл в браузер, вы увидите "my%20cool%20page.html" в адресной строке браузера. Пробелы должны быть закодированы, так как они не разрешены в URL.
Если вы хотите сохранить разделение между словами в именах файлов, используйте подчеркивание (my_cool_page.html) или дефис (my-cool-page.html).
Как новичок, вы, возможно, не слишком переживаете по поводу оптимизации для поисковых систем (SEO), но Google отмечает, что предпочитает дефисы в именах файлов, а не подчеркивания.
Ошибка №2: разный регистр букв
Если вы используете Windows для своей разработки, вы, возможно, не заметите проблему при неравномерном использовании строчных и заглавных букв. Это ошибка.
Предположим, вы создали папку CSS с именем "Css" и файл внутри нее с именем "Main.css". Но в вашем коде вы ссылаетесь на него следующим образом:
<link rel="stylesheet" href="css/main.css">Пока вы работаете над проектом, проблем нет.
Но когда вы загружаете ваш проект на веб-сервер... Бум! CSS не применяется.
Многие веб-серверы работают на какой-то версии Linux или Unix, а не Windows. Вы, возможно, слышали о LAMP-стеке. Linux — это L в LAMP.
Эти системы чувствительны к регистру.
Поэтому лучше использовать строчные имена файлов и каталогов всегда, если нет конкретного соглашения о наименовании, использующего заглавные буквы. В таком случае имена файлов будут всегда последовательными. И последовательность поможет избежать этой ошибки.
Ошибка №3: путаница в пути к файлам
Студенты, не понимающие, как связывать файлы в разных каталогах, часто складывают все свои файлы в корневой каталог, чтобы получить к ним доступ. Это ошибка, которая приводит к неорганизованному древу файлов.
Не долго после начала изучения HTML вы начнете изучать, как связываться с другими HTML и CSS-файлами.
Это достаточно просто, когда файлы находятся в одном каталоге. Даже в приведенном выше примере мы просто смотрели в каталог CSS для файла main.css.
Становится сложнее, когда нужно подняться на уровень выше, прежде чем опускаться в другой каталог.
В приведенном ниже примере мы устанавливаем фоновое изображение для веб-страницы в нашем файле main.css. Файл main.css находится в каталоге CSS. Мы ссылаемся на изображение в каталоге img.
body { background-image: url("../img/moon.png"); }Оба этих каталога (или папки) находятся в корневом каталоге. Поэтому нам нужно подняться из каталога CSS и затем спуститься в каталог img.
Мы поднимаемся на один уровень с помощью двух точек: ".."
Оттуда мы спускаемся в каталог img, чтобы связаться с файлом moon.png.
Если бы нам нужно было подняться на два уровня, путь к файлу начинался бы так: "../../"
Помните, одна точка указывает на каталог, в котором вы находитесь. Две точки указывают на каталог выше того, в котором вы находитесь.
Ошибка №4: в названии страницы нет «Index»
Назначение вашей страницы по умолчанию другого имени, кроме «index», является ошибкой. Веб-серверы ищут файл с именем index.
Когда вы работаете с HTML, у вас должен быть файл index.html. Этот файл загружается по умолчанию, не показывая имя файла в конце URL.
Вот почему вы можете зайти на любимый сайт и не увидеть "/index.html" после ".com". Файл index загружается по умолчанию.
Хотя ваш любимый сайт может использовать не только HTML, но этот принцип распространяется и на другие технологии, такие как PHP (index.php), React (index.js) и другие.
Пока вы учитесь, вы обнаружите, что некоторые разработчики выбирают другие имена файлов при использовании других технологий, но для новичков лучше придерживаться имени index.
Ошибка №:5 работа без перерывов!
Часто проблема в ошибке в написании тега или переменной, пропущенной точке с запятой или другой небольшой синтаксической ошибке.
Это случается со всеми.
После того как мы долго смотрим на код, наше зрение становится размытым, наш мозг "перегревается", и то, что было бы легко увидеть свежим взглядом, становится невозможным. Не переживайте. Не вините себя. Просто встаньте!
Пройдитесь. Выпейте кофе. Полежите. Что угодно, что поможет вам выйти из состояния тумана и вернет свежий взгляд и ясную голову.
На самом деле, эта ошибка не только для новичков. Это может произойти с кем угодно. Вернитесь к коду, когда будете отдохнувшими, и та ошибка, которую вы не могли найти, часто станет очевидной!
В итоге
По мере накопления опыта вы быстро преодолеете эти распространенные ошибки.
То, что когда-то было трудно понять, станет ясным.
Если эти распространенные ошибки были для вас очевидны, поздравляю! У вас уже есть некоторый опыт.
Если вы только начинаете, надеюсь, этот обзор распространенных ошибок новичков сэкономит вам время и избавит от разочарований в ближайшем будущем.
