241 lines
16 KiB
Markdown
241 lines
16 KiB
Markdown
[Вопросы для собеседования](README.md)
|
||
|
||
# Основы HTML
|
||
+ [Что такое _«HTML»_?](#Что-такое-html)
|
||
+ [Что такое _«XHTML»_?](#Что-такое-xhtml)
|
||
+ [Что такое `DOCTYPE` и зачем он нужен?](#Что-такое-doctype-и-зачем-он-нужен)
|
||
+ [Для чего предназначен тег `<head>`?](#Для-чего-предназначен-тег-head)
|
||
+ [Чем отличается `<div>` от `<span>`?](#Чем-отличается-div-от-span)
|
||
+ [Как обозначаются комментарии в HTML?](#Как-обозначаются-комментарии-в-html)
|
||
+ [Каким образом задаётся адрес документа, на который следует перейти?](#Каким-образом-задаётся-адрес-документа-на-который-следует-перейти)
|
||
+ [Как сделать ссылку на адрес электронной почты?](#Как-сделать-ссылку-на-адрес-электронной-почты)
|
||
+ [Для чего предназначен тег `<em>`?](#Для-чего-предназначен-тег-em)
|
||
+ [Для чего предназначены теги `<ol>`, `<ul>`, `<li>`?](#Для-чего-предназначены-теги-ol-ul-li)
|
||
+ [Для чего предназначены теги `<dl>`, `<dt>`, `<dd>`?](#Для-чего-предназначены-теги-dl-dt-dd)
|
||
+ [Для чего предназначены теги `<tr>`, `<th>`, `<td>`?](#Для-чего-предназначены-теги-tr-th-td)
|
||
+ [Обязательно ли писать атрибут `alt` в теге `<img>`?](#Обязательно-ли-писать-атрибут-alt-в-теге-img)
|
||
+ [В каком регистре лучше писать HTML-код?](#В-каком-регистре-лучше-писать-html-код)
|
||
+ [Что такое «мнемоника (entity)»?](#Что-такое-мнемоника-entity)
|
||
|
||
## Что такое _«HTML»_?
|
||
__HTML__, HyperText Markup Language («язык гипертекстовой разметки») — стандартизированный язык разметки документов в WWW. На данный момент актуальна 5 версия этого языка - HTML5.
|
||
|
||
[к оглавлению](#Основы-html)
|
||
|
||
## Что такое _«XHTML»_?
|
||
__XHTML__, eXtensible HyperText Markup Language («расширяемый язык гипертекстовой разметки») - более строгий вариант HTML, следующий всем ограничениям XML и, фактически являющийся приложением языка XML к области разметки гипертекста.
|
||
|
||
[к оглавлению](#Основы-html)
|
||
|
||
## Что такое `DOCTYPE` и зачем он нужен?
|
||
Элемент `<!DOCTYPE>` предназначен для указания типа текущего документа. Это необходимо, чтобы браузер понимал, согласно какому стандарту, необходимо интерпретировать данную web-страницу.
|
||
|
||
Существует несколько видов `<!DOCTYPE>`, различающихся версией языка, на который они ориентированы:
|
||
|
||
__HTML 4.01__
|
||
|
||
+ `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||
"http://www.w3.org/TR/html4/strict.dtd">`: строгий синтаксис HTML;
|
||
|
||
+ `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||
"http://www.w3.org/TR/html4/loose.dtd">`: переходный синтаксис HTML;
|
||
|
||
+ `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
|
||
"http://www.w3.org/TR/html4/frameset.dtd">`: HTML с фреймами.
|
||
|
||
__HTML 5__
|
||
|
||
+ `<!DOCTYPE html>`: для всех документов.
|
||
|
||
__XHTML 1.0__
|
||
|
||
+ `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">`: строгий синтаксис XHTML;
|
||
|
||
+ `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`: переходный синтаксис XHTML;
|
||
|
||
+ `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
|
||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">`: XHTML с фреймами.
|
||
|
||
__XHTML 1.1__
|
||
|
||
+ `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
|
||
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">`: для всех документов.
|
||
|
||
[к оглавлению](#Основы-html)
|
||
|
||
## Для чего предназначен тег `<head>`?
|
||
Тег `<head>` предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри этого контейнера находятся _метатеги_, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.
|
||
|
||
Содержимое тега `<head>` не отображается напрямую на web-странице, за исключением тега `<title>` устанавливающего заголовок окна.
|
||
|
||
Внутри контейнера `<head>` допускается размещать следующие элементы: `<base>`, `<basefont>`, `<bgsound>`, `<link>`, `<meta>`, `<script>`, `<style>`, `<title>`.
|
||
|
||
Синтаксис:
|
||
|
||
```html
|
||
<head>
|
||
...
|
||
</head>
|
||
```
|
||
|
||
Специфические атрибуты:
|
||
|
||
+ `profile`: указывает адрес профиля метаданных.
|
||
|
||
[к оглавлению](#Основы-html)
|
||
|
||
## Чем отличается `<div>` от `<span>`?
|
||
`<div>` - блочный, а `<span>` - строчный элементы. Поэтому `<div>` формирует блок из того, что в нем располагается с новой строки, а `<span>` не переносит элементы, размещая их в строку. Так же стоит отметь, что согласно рекомендациям w3c линейный тег не может включать в себя блочные теги, поэтому `<div>` обычно используется для разметки блоков, а `<span>` - отрывков текста.
|
||
|
||
[к оглавлению](#Основы-html)
|
||
|
||
## Как обозначаются комментарии в HTML?
|
||
Комментарий в HTML-коде задаётся так: `<!-- комментарий -->`
|
||
|
||
Комментарии можно использовать в любом месте страницы, кроме тега `<title>` — внутри него они не работают. Внутри тега `<style>` HTML-комментарии тоже не работают, так как в CSS код комментируется другим способом.
|
||
|
||
[к оглавлению](#Основы-html)
|
||
|
||
## Каким образом задаётся адрес документа, на который следует перейти?
|
||
Для создания ссылок на другие документы используется тег `<a>`. В зависимости от присутствия атрибутов `name` или `href` тег `<a>` устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри web-страницы.
|
||
|
||
Синтаксис:
|
||
|
||
+ `<a href="URL">...</a>`
|
||
+ `<a name="идентификатор">...</a>`
|
||
|
||
Специфические атрибуты:
|
||
|
||
+ `accesskey`: активация ссылки с помощью комбинации клавиш;
|
||
+ `coords`: устанавливает координаты активной области;
|
||
+ `download`: предлагает скачать указанный по ссылке файл;
|
||
+ `href`: задает адрес документа, на который следует перейти. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта;
|
||
+ `hreflang`: идентифицирует язык текста по ссылке;
|
||
+ `name`: устанавливает имя якоря внутри документа;
|
||
+ `rel`: отношения между ссылаемым и текущим документами;
|
||
+ `rev`: отношения между текущим и ссылаемым документами;
|
||
+ `shape`: задает форму активной области ссылки для изображений;
|
||
+ `tabindex`: определяет последовательность перехода между ссылками при нажатии на кнопку <kbd>Tab</kbd>;
|
||
+ `target`: имя окна или фрейма, куда браузер будет загружать документ;
|
||
+ `title`: добавляет всплывающую подсказку к тексту ссылки;
|
||
+ `type`: указывает MIME-тип документа, на который ведёт ссылка.
|
||
|
||
[к оглавлению](#Основы-html)
|
||
|
||
## Как сделать ссылку на адрес электронной почты?
|
||
Создание ссылки на адрес электронной почты делается почти также, как и ссылка на web-страницу. Только вместо URL указывается `mailto:"адрес электронной почты"`
|
||
|
||
```html
|
||
<a href="mailto:user@address.net">Напиши мне!</a>
|
||
```
|
||
|
||
[к оглавлению](#Основы-html)
|
||
|
||
## Для чего предназначен тег `<em>`?
|
||
Тег `<em>` предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
|
||
|
||
```html
|
||
<em>Текст</em>
|
||
```
|
||
|
||
[к оглавлению](#Основы-html)
|
||
|
||
|
||
## Для чего предназначены теги `<ol>`, `<ul>`, `<li>`?
|
||
Теги `<ol>`, `<ul>` и `<li>` предназначены для оформления списков.
|
||
|
||
+ `<ol>`: нумерованный список, т.е. каждый элемент списка начинается с числа или буквы и увеличивается по нарастающей.
|
||
+ `<ul>`: маркированный список, каждый элемент которого начинается с небольшого символа — маркера.
|
||
+ `<li>`: отдельный элемент списка. Внешний тег `<ul>` или `<ol>` устанавливает тип списка — маркированный или нумерованный.
|
||
|
||
```html
|
||
<ol>Нумерованый список
|
||
<li>первый</li>
|
||
<li>второй</li>
|
||
<li>третий</li>
|
||
</ol>
|
||
|
||
<ul>Маркированный список
|
||
<li>первый</li>
|
||
<li>второй</li>
|
||
<li>третий</li>
|
||
</ul>
|
||
```
|
||
|
||
[к оглавлению](#Основы-html)
|
||
|
||
|
||
## Для чего предназначены теги `<dl>`, `<dt>`, `<dd>`?
|
||
Теги `<dl>`, `<dt>`, `<dd>` предназначены для создания списка определений.
|
||
|
||
Каждый такой список начинается с контейнера `<dl>`, куда входит тег `<dt>` создающий термин и тег `<dd>` задающий определение этого термина. Закрывающий тег `</dd>` не обязателен, поскольку следующий тег сообщает о завершении предыдущего элемента. Тем не менее, хорошим стилем является закрывать все теги.
|
||
|
||
```html
|
||
<dl>Список определений
|
||
<dt>Термин</dt>
|
||
<dd>Определение</dd>
|
||
</dl>
|
||
```
|
||
|
||
[к оглавлению](#Основы-html)
|
||
|
||
## Для чего предназначены теги `<tr>`, `<th>`, `<td>`?
|
||
|
||
`<tr>`: служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега `<th>` или `<td>`.
|
||
`<th>`: предназначен для создания одной ячейки заголовка таблицы.
|
||
`<td>`: предназначен для создания одной ячейки таблицы.
|
||
|
||
```html
|
||
<table>
|
||
<tr>
|
||
<th>Заголовок</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Строка</td>
|
||
</tr>
|
||
</table>
|
||
```
|
||
|
||
[к оглавлению](#Основы-html)
|
||
|
||
## Обязательно ли писать атрибут `alt` в теге `<img>`?
|
||
Да, писать его обязательно.
|
||
|
||
Атрибут `alt` устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением.
|
||
|
||
```html
|
||
<img src="forest.jpg" alt="Лес">
|
||
```
|
||
|
||
[к оглавлению](#Основы-html)
|
||
|
||
## В каком регистре лучше писать HTML-код?
|
||
Весь HTML-код рекомендуется писать в нижнем регистре: это относится к названиям элементов, названиям атрибутов, значениям атрибутов (кроме текста/`CDATA`), селекторам, свойствам и их значениям (кроме текста).
|
||
|
||
Не рекомендуется
|
||
```html
|
||
<A HREF="/">Домой</A>
|
||
```
|
||
|
||
Рекомендуется
|
||
```html
|
||
<img src="forest.jpg" alt="Лес">
|
||
```
|
||
|
||
[к оглавлению](#Основы-html)
|
||
|
||
## Что такое «мнемоника (entity)»?
|
||
__Мнемоника (entity)__ - это конструкция из символа `&` и буквенного (или цифрового кода) после нее, предназначенная для замещения символов, которые запрещены для использования в HTML в «явном виде».
|
||
|
||
># имеет мнемонику `#`
|
||
|
||
[к оглавлению](#Основы-html)
|
||
|
||
# Источники
|
||
+ [htmlbook](http://htmlbook.ru/html/)
|
||
+ [Хабрахабр](https://habrahabr.ru/post/143452/)
|
||
|
||
[Вопросы для собеседования](README.md)
|