Топ 5 ошибок при верстке сайта HTML/CSS

Автор Lyudmila Yeriomenko
Топ 5 ошибок при верстке сайта HTML/CSS

приветствую вас и в этом видео мы с вами поговорим о топ 5 ошибок которые убивают ваш улитку.

Если вы досмотрите — это видео до конца то можно вы сможете её спасти. Но — это всё шутки и. Давайте перейдем к делу сейчас перед собой увидите сайт который скачал на просторах интернета абсолютно бесплатно Oh no 1 выглядит отлично.

Я бы даже сказал хорошо, но здесь есть определённые моменты которые можно улучшить или даже нужно улучшать, а первая ошибка которую допускают начинающие ребята и.

Которая повторяется всё чаще и чаще сейчас когда просматриваю работы — это фиксированная высота заголовка и фиксированная высота блока перед собой увидитесь вот этот футболок и у него фиксированная высота какую проблему — это может — это может привести первое. ТО Когда вы отдали свой сайт своему клиенту или передали дальше на разработку backend разработчик у этот сайт будет прикручена на тему типа к примеру WordPress этот текст когда-то может в будущем измениться и, что тогда у нас произойдет. Давайте перейдем сейчас редактор и добавим к примеру здесь два абзаца текста вместо одного и. Возможно даже один абзац текста мы увеличим. Давайте здесь ещё продублирую этот текст. Так теперь обновим страницу и видим, что у нас пока ещё всё отлично но. Давайте ещё сделаем один абзац обновляем обновляем и у нас с вами уже текст. Не умещается на этом в этом блоке потому, что он обрезается у нас. Нижняя граница — это как-то высота у нас его фиксированная и контент не может его растянуть по высоте если мы перейдём сейчас в инспектор и выделим баннер то у нас здесь есть хитро на 600 пикселей никогда не задавайте. В таких случаях высоту. Используйте всегда свойства. Михайлов если мы поставим in Heat то мы видим, что текст наш видно полностью и блок наш потянулся правда здесь есть большие моменты например. Нижний отступ слишком маленький, но — это всё поправляется пилингами. Даша следующий момент которая в последнее время начал набирать обороты фиксированная высота заголовка здесь происходит всё тоже самое мы сейчас видим сами заголовок. И когда у нас увеличивается в размере к примеру. Мы хотим добавить здесь ещё текста или становится экрана нас меньшее заголовок начал отмечаться в ширину контейнера он обычно перемещается на новую строчку. Но если у нас фиксированная высота заголовка то мы видим вот такую вот картину опять у нас контент не двигается текст смещается ему некуда деваться и он наезжает на текст который ниже или на другие элементы которые ниже. Почему происходит ошибка фиксированная фиксированной высоты заголовков в последнее время начали набирать свою популярность сервис инструменты которые позволяют ускорять верстку то есть братец и брать готовые стили которые вы можете использовать — это такие элементы — это такие программы как код invision и так далее сейчас я открыл у себя и открыл здесь вот такой вот макет смотрите когда мы выбираем здесь у нас появляется здесь готовые стили которые мы можем использовать для данного заголовка у нас свертки. Что делают ребята которые начинающие. Они не-не-не осмысливая то, что они копируют они просто нажимают. Вот эту вот кнопку Copy вставляют её свой проект. А в этой кнопки кафе. У нас здесь появляется вот такой вот свойства. Хаит равна 67 пикселей и они даже не смотрят, что здесь есть они просто скопировали вставили и у нас происходит. Вот такая вот ошибка давать обновить страницу текст и продолжим с вами уже последующим ошибка так, а вторая ошибка которая занимает у нас топ. Это неправильное вложенность тегов бывает ситуация когда вкладываются друг друга. Это неправильно ихняя рация чтобы узнать какие теги можно вкладывать друг друга. Какие Нет нужно всегда обращаться к спецификации или к валидатору HTML давайте сейчас открою этот валидатор и смотрите здесь вот есть такая кнопка оплот ваш файл выберем Stream Index HTML с которой мы сейчас. Работаем и прочее какая моя этот validators найдёт вам ошибки в вашей структуре html-верстка которая. Вы можете исправить и даже. Вам нужно исправлять есть критические ошибки которые такие мод красным лейблом Error которая возможна можно и оставить первые две ошибки которые мы сейчас видим они называются Element not allowed As Child of Element div is разберёмся, что — это такое то здесь всё просто у нас внутри тега div лежат элементы или то есть, а элементы у нас должны быть всегда внутри или меню вот здесь вот даже пишется как — это исправить. А вот пишется почему — это произошло дальше у нас здесь вот есть ошибка которая Element not allowed As Child of Element h26 я неоднократно встречал, что Tag H1 H2 и A6 и так далее вставляют какие-то теги внутри выращивают текст который не разрешены по спецификации для контента этого тега если посмотрим внимательны то здесь вот есть у нас вот такая вот строчка ожидался Tag категории Flow Content и. Здесь также ожидался категория Flow Content. Что такое категория Flow Content данный момент для HTML тегов существует определенный список категорий которыми которым они относятся вот на этой странице HTML Spec вот vga-rca все ссылки я прикреплю к описанию кролику есть вот такой вот список категорий META Content contains Content hidden Content From Content update container interactive Content — это категория которым относятся определенные теги вот ниже здесь вот есть такая вот диаграмм которая визуализирует нам определённую структуру самое главное.

0 комментариев
0

Читайте также