HTML для начинающих: вопросы и ответы

Автор оригинала: Vijay Singh
  • Перевод


На собеседовании многие начинающие (и не только) претенденты на позиции, связанные с HTML, неожиданно понимают, что не могут ответить на одни и те же типовые, и казалось бы, элементарные вопросы. Но ведь когда-то этому должен настать конец? Думаю, ответ на этот вопрос вы точно знаете.

Мы собрали список вопросов и ответов по HTML, которые, скорее всего, зададут во время собеседования. Разобравшись в них, соискатель сможет продемонстрировать достаточно высокий уровень знаний о предмете. Если перед собеседованием кандидат хорошо подготовит ответы на эти вопросы и сможет быстро реагировать на них, это произведёт приятное впечатление и даст ему преимущество по сравнению с более «медленными» конкурентами.

Вопросы и ответы


Список вопросов
Что такое HTML?
Из чего состоит форматированный текст HTML?
Что такое HTML-тег?
Парными являются все теги?
Какие основные виды списков применяют при создании веб-страницы?
Зачем использовать списки в HTML?
Можем ли мы писать комментарии в HTML-коде? Как?
Почему некоторые символы на веб-странице иногда отображаются некорректно?
Что такое Image Map?
Что такое white-space?
В чём главное преимущество white-space?
Можно ли присваивать значения не всем атрибутам тега?
Как разместить знак copyright на веб-странице, ведь его нет на клавиатуре?
Как создать ссылки на разные фрагменты (разделы) одной и той же веб-страницы?
Можем ли мы выравнивать элементы списка в HTML-файле?
Адрес какой веб-страницы обычно считается адресом сайта?
Зачем мы используем альтернативный текст (атрибут alt тега ) для изображений?
Могут ли файлы HTML хорошо работать в каком-нибудь редком или ультрасовременном браузере?
Как вы думаете гиперссылка может быть только текстовой?
Что из себя представляют атрибуты тега <li> — элемента списка?
Для чего нужны таблицы стилей (CSS)?
Какие типы нумерации в списках вы знаете?
Как задать разные цвета для фрагментов текста веб-страницы?
Где хранятся числовые коды символов в HTML?
Каковы преимущества группировки нескольких флажков (элементов checkbox)?
Как перекрытие тегов влияет на отображение контента?
Если между тегами нет текста, каков будет результат? Приведите пример?
Как указать цвета для границ таблицы?
Можем ли мы создать ссылку, которая ведет на другую веб-страницу?
Могут ли таблицы стилей помочь выровнять изображение и задать способ позиционирования текста относительно него?
Может ли одна гиперссылка вести на разные страницы
Есть ли разница между маркированным списком и списком директорий и меню?
Как изменить цвет маркера?
Можно ли ввести какие-то ограничения на размер текстовых полей в HTML?
Чем ограничен максимальный размер текстового поля?
Что будет, если установить нулевой размер текстового поля?
Каковы сходства между атрибутами border и rules?
Что такое marquee? Как мы можем применить это?
Что делает тег <br>?
Есть ли другой способ разделить текст без использования <br>?
Может ли текст отображаться вне окна браузера?
В чем разница между активными и неактивными ссылками?
Имеет ли таблица стилей ограничения по количеству правил?
Есть у таблиц стилей какая-либо иерархия правил?
Можем ли мы сгруппировать разные селекторы с разными именами классов?
Можно ли подключить внешний файл CSS в браузере?
Может ли свойство list-style-type влиять на абзац?
Что такое элемент canvas?


Что такое HTML?


HTML расшифровывается как HyperText Markup Language (язык гипертекстовой разметки). Это язык разметки документов во Всемирной паутине (World Wide Web, WWW). HTML — это стандартизированный язык, позволяющий составлять форматированный текст. Браузер интерпретирует его и отображает на экране элементы веб-страниц.

Из чего состоит форматированный текст HTML?


В первую очередь, HTML — это контент и теги. Теги позволяют задать способ отображения контента на веб-страницах.

Что такое HTML-тег?


Тег — это специальное служебное слово, заключенное в угловые скобки. Его ещё называют «элемент HTML». Тегов в языке HTML много и каждый что-то делает с контентом, который обычно находится внутри скобок или между тегами.
Если тег парный, то тегу <ТЕГ> соответствует </ТЕГ>.

Парными являются все теги?


Нет, не все. Существуют одиночные теги, например, <img> — для изображений. В этом случае контент вместе с другими служебными словами (например, для <img> это может быть src=”url изображения”) размещается между скобками, но после слова img.

Какие основные виды списков применяют при создании веб-страницы?


При создании веб-страницы можно использовать:

  1. Menu list (список меню — <menu>).
  2. Directory list (список директорий — <dir>).
  3. Ordered list (нумерованный список — <ol>).
  4. Unordered list (маркированный список — <ul>).
  5. Definition list (список определений — <dl>).


Зачем использовать списки в HTML?


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

Можем ли мы писать комментарии в HTML-коде? Как?


Да, можем. Для этого текст комментария нужно поместить внутри <!-- и -->.

Почему некоторые символы на веб-странице иногда отображаются некорректно?


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

Что такое Image Map?


В HTML Image Map — это технология, которая позволяет привязывать ссылки к фрагментам изображения. Щелкая мышью на отдельных частях изображения, пользователь может переходить по той или иной ссылке на разные веб-страницы.

Что такое white-space?


White-space — это свойство, позволяющее менять количество пробелов между словами при отображении веб-страницы. По умолчанию любое количество пробелов в HTML-коде браузер интерпретирует как один пробел.

В чём главное преимущество white-space?


При написании HTML-кода разработчику не нужно беспокоиться о лишних пробелах, которые он мог ввести: браузер при отображении веб-страницы уберёт все лишние пробелы.
Разработчик может добавлять в код пробелы не только случайно, но и специально: чтобы код стал более читабельным.

Можно ли присваивать значения не всем атрибутам тега?


Да, в этом случае браузер будет использовать значения по умолчанию. Если вас не устраивает то, как он отобразил веб-страницу, то, возможно, следует явно указать значения некоторых атрибутов.

Как разместить знак copyright на веб-странице, ведь его нет на клавиатуре?


Знак copyright относится к спецсимволам. Чтобы разместить его на веб-странице, нужно в соответствующем фрагменте HTML-кода набрать на клавиатуре последовательность &copy или &#169.

Как создать ссылки на разные фрагменты (разделы) одной и той же веб-страницы?


Для этого нужно найти в HTML-коде начало нужного нам фрагмента. В этом месте создать так называемый «якорь» при помощи атрибута name тега <a> и дать имя ссылке на фрагмент, используя атрибут href и знак #:
href="#имя_ссылки_на_фрагмент"

Можем ли мы выравнивать элементы списка в HTML-файле?


Да, мы можем хранить элементы списка прямо в HTML-файле используя отступы. Отступ можно также использовать для любого вложенного списка внутри родительского.

Адрес какой веб-страницы обычно считается адресом сайта?


Обычно это одна из страниц верхнего уровня, главная страница. Из неё пользователь переходит на страницы, расположенные на более низких уровнях. И их адрес чаще всего формируется на основе адреса главной страницы.

Зачем мы используем альтернативный текст (атрибут alt тега <img>) для изображений?


Альтернативный текст отображается при отключенной загрузке графики в браузере пользователя или в случае проблемы при загрузке конкретного изображения. Этот текст даёт понять, что должно было быть изображено на этой картинке.

Могут ли файлы HTML хорошо работать в каком-нибудь редком или ультрасовременном браузере?


Конечно, файлы HTML могут и должны хорошо работать в любом браузере, потому что браузер должен соответствовать стандартам HTML. Если разработчики решили не поддерживать некоторые функции стандарта, это остаётся на их совести.

Как вы думаете гиперссылка может быть только текстовой?


Нет, гиперссылка может быть не только текстовой, но и, например, графической. Это означает, что мы можем преобразовать изображение в ссылку, которая направит пользователя на другую страницу. Гиперссылка вообще не зависит от типа контента, который лежит «под ней».

Что из себя представляют атрибуты тега < li> — элемента списка?


Их два:

  1. type устанавливает вид маркера нумерованного или маркированного списка;
  2. value — число, с которого будет начинаться нумерованный список.


Для чего нужны таблицы стилей (CSS)?


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

Какие типы нумерации в списках вы знаете?


В качестве нумерующих элементов могут выступать следующие значения:

  • арабские числа (1, 2, 3, ...);
  • прописные латинские буквы (A, B, C, ...);
  • строчные латинские буквы (a, b, c, ...);
  • прописные римские числа (I, II, III, ...);
  • строчные римские числа (i, ii, iii, ...).


Как задать разные цвета для фрагментов текста веб-страницы?


Чтобы задать разные цвета для фрагментов текста, нужно поместить каждый из фрагментов внутрь парного тега font:

<font color=“color”>какой-то текстовый фрагмент цвета “color”</font>


Где хранятся числовые коды символов в HTML?


В таблице ASCII. При отображении веб-страницы браузер берет числовые коды символов из HTML-документа и заменяет их на соответствующий символ из таблицы.

Каковы преимущества группировки нескольких флажков (элементов checkbox)?


Есть несколько преимуществ группировки флажков:

  • это помогает лучше организовать, структурировать их;
  • это позволяет обращаться к конкретным флажкам из группы, используя id;
  • это позволяет создать другую группу флажков на этой же веб-странице, не боясь перепутать названия или идентификаторы флажков.


Как перекрытие тегов влияет на отображение контента?


Перекрытие тегов в HTML приводит к распознаванию только первого тега. Но такие проблемы возникают только тогда, браузер пытается распознать теги без текста.

Если между тегами нет текста, каков будет результат? Приведите пример?


Если между тегами нет текста, то контент будет невозможно отформатировать. Например, одиночные теги, такие как < img>, не требуют ввода текста, и, следовательно, в таком случае форматирование не потребуется.

Как указать цвета для границ таблицы?


Это можно сделать в таблице стилей, а в случае ее отсутствия будет использован цвет текста.

Можем ли мы создать ссылку, которая ведет на другую веб-страницу?


Да, для этого нужно использовать атрибут href.

Могут ли таблицы стилей помочь выровнять изображение и задать способ позиционирования текста относительно него?


Да, таблица стилей может содержать правила для позиционирования текста и изображений.

Может ли одна гиперссылка вести на разные страницы?


Нет, одна гиперссылка может вести только на одну веб-страницу, адрес которой вы укажете.

Есть ли разница между маркированным списком и списком директорий и меню?


Да, разница заключается в том, что неупорядоченный список имеет атрибуты для изменения стиля маркера.

Как изменить цвет маркера?


Цвет маркера обычно соответствует цвету первого символа в списке. Если вы измените цвет первого символа с помощью тега <font>, то цвет маркера также изменится.
Если мы хотим задать цвет маркера в списке не изменяя цвет текста, то внутрь <li> нужно вложить тег <span>, а уже внутрь него поместить текст. И тогда цвет маркера будет определяться стилевым свойством color селектора LI, а цвет текста — свойством color селектора SPAN.

Можно ли ввести какие-то ограничения на размер текстовых полей в HTML?


Стандартный размер составляет 20-25 символов. Но используя атрибуты size или maxsize, можно задать другие ограничения. Например:

<input type="text" size="5" />


Чем ограничен максимальный размер текстового поля?


Шириной окна браузера.

Что будет, если установить нулевой размер текстового поля?


Браузер будет использовать значение по умолчанию.

Каковы сходства между атрибутами border и rules?


Если для атрибута border установлено ненулевое значение, границы ячейки по умолчанию с толщиной в один пиксель будут добавлены автоматически. Если в тег <table> добавить атрибут rules, то атрибут border не будет включен.
Но при этом вокруг каждой ячейки (так же, как у border) появится рамка толщиной в один пиксель по умолчанию, образуя тем самым сетку.

Что такое marquee? Как мы можем применить это?


Marquee помогает в настройке прокрутки текста на веб-странице. Чтобы активировать прокрутку, вам нужно использовать тег <marquee>.

Что делает тег <br> ?


Функция тега <br> состоит в том, чтобы отделять фрагменты текста друг от друга.

Есть ли другой способ разделить текст без использования <br>?


Да, существуют другие способы разделения текста. Можно использовать тег <p> или тег <blockquote>.

Может ли текст отображаться вне окна браузера?


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

В чем разница между активными и неактивными ссылками?


Активная ссылка имеет фокус, то есть на неё наведена мышь. В остальных случаях фокус находится где-то в другом месте.

Имеет ли таблица стилей ограничения по количеству правил?


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

Есть у таблиц стилей какая-либо иерархия правил?


Да, существует иерархия, которая включает в себя четыре уровня (от самого приоритетного к наименее приоритетному):

  1. Встроенный стиль: прикрепляется непосредственно к элементу, для которого создается стиль. Пример:
    <h1 style="color: #ffffff;">
  2. Идентификатор — это уникальный идентификатор элементов страницы, таких как, #navbar.
  3. Классы, атрибуты и псевдо-классы: эти категории включают.класс [атрибут] и псевдо-классы как например :hover, :focus и т.д.
  4. Элементы и псевдо-элементы: эта категория включает элементы и псевдо-элементы, как например h1, div, :before и :after .


Можем ли мы сгруппировать разные селекторы с разными именами классов?


Да, для этого нужно просто написать имена классов через запятую.

Можно ли подключить внешний файл CSS в браузере?


Нет, внешний файл CSS можно подключить с помощью тега <link /> в самом HTML-документе.

Может ли свойство list-style-type влиять на абзац?


Нет, свойство list-style-type не может влиять на абзац, оно скорее проигнорирует его.

Что такое элемент canvas?


Элемент HTML5 canvas можно использовать для вставки изображений, градиентов и комплексной анимации. Он также может помочь в создании 2D-изображений непосредственно внутри исходного кода HTML-документа.

Вывод


Приведенные выше ответы на вопросы могут дать вам представление о том, что у вас могут спросить. Вы можете преодолеть страх и обрести уверенность, что поможет вам получить желаемую работу. Ответы, изложенные выше, в основном достаточно чёткие и короткие. Но этого достаточно, чтобы интервьюер понял, что кандидат в теме.

Заключение


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

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

VDSina.ru — хостинг серверов
Серверы в Москве и Амстердаме от 11 рублей в день

Комментарии 5

    +2

    Довольно странные вопросы. Зачем-то есть вопрос про marquee, который уже устарел и не рекомендуется к использованию. Вопросы про стилизацию с использованием html. Какие-то тонкости работы браузера перемешаны с максимально простыми вопросами вроде "может ли на странице быть ссылка на другую страницу". Вопрос про активную ссылку — непонятный. Я бы ответил, что это ссылка в момент клика по ней, которая соответствует псевдоклассу :active. Почему здесь активной называют hovered ссылку — неясно.

      +2
      <font color=“color”> и стили внутри — вот за подобное я бы сразу заканчивал собеседование.
      В то же время ничего не спрашивается о viewport, flex/float/table-cell; встречаются перлы типа
      Да, существуют другие способы разделения текста. Можно использовать тег p или тег blockquote.
      но при этом ни одного вопроса о display: inline/block, что является более важным для понимания, чем тэг br и <p>, поведение которого можно изменять стилями.

      Я сначала даже не поверил, что подобные вопросы могут быть в 2020 году, подумал, может статья за 2008-2009, но даже тогда уже были распространены рекомендации «в HTML не должно быть никаких правил форматирования, делайте все в CSS».
        0
        Имеет ли таблица стилей ограничения по количеству правил?

        Этот вопрос был бы намного интереснее, если бы в нем спрашивали про ограничение на количество селекторов. Соискателю пришлось бы вспомнить про старые версии IE и постпроцессор BlessCSS.


          +1

          Вообще, оригинальная статья похожа на кашу из вопросов «дозельдмановской эпохи» (теги font и marquee, Java-апплеты и т.д.) и эпохи HTML5 (элемент canvas).


          Хочу дать автору перевода совет. Если вы не хотите, чтобы ваши статьи были похожи на книгу моего детства:


          Обложка первого издания книги Григория Остера «Вредные советы»

          То переводите статьи не малоизвестных индийских специалистов, а статьи с авторитетных интернет-ресурсов (например, A List Apart, Smashing Magazine и CSS-Tricks), если, конечно, это не запрещено их правилами.



            +2
            Может ли одна гиперссылка вести на разные страницы?

            Нет, одна гиперссылка может вести только на одну веб-страницу, адрес которой вы укажете.


            Ну, чисто технически...
            <a href='javascript:document.location=["http://yahoo.com","http://altavista.com","http://rambler.ru","http://meta.ua"][Math.floor(Math.random()*4)]'>Поисковик</a>

            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

            Самое читаемое