Мой верный друг! Мой враг коварный!
Мой царь! Мой раб! Родной язык!
Мои стихи – как дым алтарный!
Как вызов яростный – мой крик!
Ты дал мечте безумной крылья,
Мечту ты путами обвил.
Меня спасал в часы бессилья
И сокрушал избытком сил.
// Получаем доступ к элементу как к JS объекту по id
var email = document.getElementById('email_input');
// В поле value этого объекта хранится введённое значение
var emailValue = email.value
// Выводим его
console.log(emailValue);
Атрибут class
– задаёт класс элементов, позволяя группировать их.
Список покупок:
Молоко
Хлеб
Audi TT
Audi Q5
Яблоки
.food { color: yellow }
.car { color: red }
Список покупок:
Молоко
Хлеб
Audi TT
Audi Q5
Яблоки
Атрибут class в JS
// Получаем все элементы списка по классу
var cars = document.querySelectorAll('.car');
// Складываем в массив текст каждого элемента
for (var i = 0, values = []; i < cars.length; i++) {
values.push(cars[i].innerText);
}
// Выводим через запятую
console.log(values.join(','));
Атрибут style
– добавляет стили оформления (по правилам CSS) к элементу.
The Martian.
The Martian.
Атрибут title
– добавляет пояснение к содержимому элемента, которое появляется при наведении.
www
API
www
API
Комментарии
Некоторый текст
HTML Entity
Внутри текста можно использовать символы-мнемоники (Entity Characters).
Полный список.
<html>
<head>
<meta name="description" content="..."/>
<title>CERN</title>
</head>
<body>
<p>
<a href="http://home.web.cern.ch/">CERN</a>
is a <b>European</b> research organization
that operates the <i>largest</i> particle
<u>physics</u> laboratory in the world.
</p>
</body>
</html>
Описательная
– определяет метаинформацию документа.
<html>
<head>
<meta name="description" content="..."/>
<title>CERN</title>
</head>
<body>
<p>
<a href="http://home.web.cern.ch/">CERN</a>
is a <b>European</b> research organization
that operates the <i>largest</i> particle
<u>physics</u> laboratory in the world.
</p>
</body>
</html>
Структурная
– определяет структуру и назначение текста.
<html>
<head>
<meta name="description" content="..."/>
<title>CERN</title>
</head>
<body>
<p>
<a href="http://home.web.cern.ch/">CERN</a>
is a <b>European</b> research organization
that operates the <i>largest</i> particle
<u>physics</u> laboratory in the world.
</p>
</body>
</html>
CERN
CERN
is a European research organization
that operates the largest particle physics laboratory in the world.
Элементы
Корневой элемент html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta name="description" content="..."/>
<title>CERN</title>
</head>
<body>
<p>
<a href="http://home.web.cern.ch/">CERN</a>
is a <b>European</b> research organization
that operates the <i>largest</i> particle
<u>physics</u> laboratory in the world.
</p>
</body>
</html>
doctype
– указывает на тип документа, иными словами на спецификацию, по которой он был создан.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My awesome HTML page</title>
</head>
<body>
</body>
</html>
doctype для HTML 5
<!--Минимально возможный html-->
<!DOCTYPE html>
<title>My awesome HTML page</title>
— определяет блок предварительно форматированного текста.
Такой текст отображается моноширинным шрифтом, сохраняя всё форматирование: пробелы, отступы.
function Panel(element, canClose) {
this.element = element;
this.canClose = canClose;
sup(superscript)/sub(subscript)
— обозначает верхний/нижний индекс. Например, для обозначения степени.
Формула эквивалентности массы и энергии:
E = mc2
Формула воды: H2O.
Формула эквивалентности массы и энергии:
E = mc2
Формула воды: H2O.
br(break line)
— устанавливает перевод строки в том месте, где он находится.
Варкалось. Хливкие шорьки
Пырялись по наве,
И хрюкотали зелюки,
Как мюмзики в мове.
Варкалось. Хливкие шорьки
Пырялись по наве,
И хрюкотали зелюки,
Как мюмзики в мове.
wbr(word break opportunity)
— указывает браузеру место, где допускается делать перенос строки в длинном слове.
метоксихлордиэтиламинометилбутиламиноакридин
метоксихлордиэтиламинометилбутиламиноакридин
метоксихлор
диэтиламино
метил
бутил
амино
акридин
метоксихлор
диэтиламино
метил
бутил
амино
акридин
span
— универсальный текстовый элемент, который позволяет измененить вид содержимого через стили.
Яндекс.Браузер
предостерегает пользователей, когда они начинают
вводить пароль на подозрительных страницах.
Яндекс.Браузер
предостерегает пользователей, когда они начинают
вводить пароль на подозрительных страницах.
Микроразметка
– позволяет роботам точнее определять и структурировать информацию на страницах сайтов.
<section>
Привет всем, я Артём Кувалдин! Работаю разработчиком
интерфейсов в Яндексе, офис которого расположен в
Екатеринбурге по адресу Хохрякова, 10.
</section>
Микроразметка
<section itemscope itemtype="http://schema.org/Person">
Привет всем, я
АртёмКувалдин,
Работаю
разработчиком интерфейсов
в
Яндексе
, офис которого расположен
<section itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
в
Екатеринбурге
по адресу
Хохрякова, 10
.
</section>
</section>
– указывает обработчик, к которому обращаются данные формы при их отправке на сервер.
Атрибут method
– сообщает серверу о типе запроса.
get (по умолчанию)
предназначен для получения требуемой информации и передачи данных в адресной строке (ограничение в 4 Кб).
[поле1]=[значение1]&[поле2]=[значение2]
post
посылает на сервер данные в запросе браузера. Большие объёмы данных используются в форумах, почтовых службах, заполнении базы данных, при пересылке файлов и др.
Валидация формы
Атрибут tabindex
– устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab.
Нажмите кнопку Tab для перехода между элементами
Нажмите кнопку Tab для перехода между элементами
i18n
(интернационализация)
Таблица символов (charset).
– таблица, где каждому символу сопоставляется последовательность 0 и 1 (битов)
Юникод (Unicode) – стандарт кодирования, позволяющий представить знаки почти всех письменных языков.
Есть несколько способов задать кодировку:
HTML 5 ↓
Язык
Служебные мета-элементы:
HTML 5 ↓
<html lang="ru">
Если несколько языков:
<html lang="ru">
<p>Как говорил Джон Леннон</p>
<blockquote lang="en">
Life is what happens to you while you’re busy
making other plans.
</blockquote>
<blockquote lang="ru">
Жизнь — это то, что происходит с тобой,
пока ты оживлённо строишь другие планы.
</blockquote>
<html>
blockquote:lang(ru) { color: red; }
Как говорил Джон Леннон
Life is what happens to you while you’re busy making other plans.
Жизнь — это то, что происходит с тобой, пока ты оживлённо строишь другие планы.
Направление текста
Если язык подразумевает другое направление письма, стоит указать атрибут dir:
ltr – слева направо
rtl – справа налево
auto – автоматически
مرحبا العالم!
שלום עולם!
שלום עולם!
שלום עולם!
שלום עולם!
Hello world!
dir="rtl"
مرحبا العالم!
dir="rtl"
שלום עולם!
dir="ltr"
שלום עולם!
dir="auto"
שלום עולם!
שלום עולם!
Hello world!
Если много языков
<html dir="ltr">
Фраза на арабском языке:
اللغة العربية
<html>
Фраза на арабском языке:
اللغة العربية
bdo (bi-directional output)
– элемент, который только указывает другое направление
и не несёт других смыслов.
مرحبا العالم!
А роза упала на лапу Азора
مرحبا العالم!
مرحبا العالم!
А роза упала на лапу Азора
مرحبا العالم!
содержимое одного элемента включает в себя как текст слева-направо,
так и справа-налево, мы можем явно этим управлять при помощи невидимых символов:
‎ (left-to-right mark) – форсирует отображение текста слева-направа.
‏ (right-to-left mark) – форсирует отображение текста справа-налево.
لغة C++‎ هي لغة برمجة تستخدم.
لغة C++ هي لغة برمجة تستخدم.
لغة C++ هي لغة برمجة تستخدم.
لغة C++ هي لغة برمجة تستخدم.
Переводимость текста
Если необходимо обозначит какой-либо текст непереводимым, можно использовать
атрибут translate.
<p>Press button <span translate="yes">RESUME</span> to continue</p>
<p>Нажмите кнопку <span translate="no">RESUME<span/>, чтобы продолжить</p>
</html>
