- Описание HTML, DHTML, CSS, WML,…
- Что такое HTML
- <!DOCTYPE>
- Мета теги. Информация в заголовке <head>
- Тег <base>
- Текст в html
- HTML списки
- Ссылки
- Картинки на сайте
- Таблицы
- Фреймы
- Формы (FORM)
- DHTML
- Музыка и звуки на HTML-странице
- Видео на HTML-странице
- Карты изображений
- SVG карты
- Графика в HTML5
- WML
- SSI .shtml
- Таблица цветов RGB
- Правильное сочетание цветов
- Таблица «безопасных» цветов
- Таблица символов
- Примеры HTML, CSS
- Alt-коды
- Правильный «скелет» HTML-страницы для сайта, пример по стандарту HTML5
- Справочник HTML | HTML теги
- HTML 5.2. теги — HTML5BOOK.RU
- HTML Примеры
- HTML-атрибуты: таблица глобальных атрибутов
- Введение в HTML | htmlbook.ru
Описание HTML, DHTML, CSS, WML,…
У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!
Что такое HTML
HTML (HyperТext Markup Language) – язык гипертекстовой разметки для создания Web-страниц.
<!DOCTYPE>
<!DOCTYPE> указывает стандарт HTML, в соответствии с которым написана Web-страница.
Мета теги. Информация в заголовке <head>
Контейнер <head> содержит информацию для браузеров и поисковых систем. Внутри контейнера <head> могут размещаться теги <base>, <index>, <link>, <meta>, <script>, <style>, <title>.
Тег <base>
Тег <base> задает базовый адрес (URL) для гипертекстовых ссылок документа, заданных в относительной форме. Кроме того, <base> позволяет способ открытия ссылок по умолчанию.
Текст в html
Основные теги форматирования и верстки текста.
HTML списки
Список – это взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры.
Ссылки
Ссылки – основа гипертекстовых документов, они позволяют переходить с одной Web-страницы на другую, а также на определенное место внутри Web-страницы.
Картинки на сайте
Для вставки картинки на Web-страницу используется одиночный тег <img> с обязательным атрибутом src, указывающим адрес графического файла.
Таблицы
Основные html-теги таблиц.
Фреймы
Фреймы – это прямоугольные области экрана, каждая из которых содержит свой собственный HTML-документ.
Формы (FORM)
Формы – поля, переключатели и кнопки для ввода информации посетителем Web-страницы.
- Примеры шаблонов для html5 form input pattern
- Общие атрибуты тегов: accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, hidden, id, lang, spellcheck, style, tabindex, title
- <form>, <button>, <datalist>, <fieldset>, <input>
- События
- <keygen>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>
DHTML
Динамический HTML (DHTML)– набор средств, которые позволяют создавать более интерактивные Web-страницы без увеличения загрузки сервера.
Музыка и звуки на HTML-странице
Для вставки музыки и звуков на Web-страницу используется тег <audio> с обязательным атрибутом src, указывающим адрес звукового файла.
Видео на HTML-странице
Для вставки видео на Web-страницу можно использовать тег <video> или выложить видеофайл на YouTube и указать путь к нему в атрибуте src тега <iframe>.
Карты изображений
Карта изображений позволяет привязывать ссылки к определенным областям картинки.
SVG карты
Интерактивная карта (SVG Map) так же, как и карта изображений (Image Map), позволяет привязывать ссылки и события к определенным областям картинки. Работать с ней проще, чем с Image Map.
Графика в HTML5
Масштабируемая векторная графика SVG (Scalable Vector Graphics) – это язык разметки для описания двухмерных графических приложений и изображений.
WML
WML — язык разметки для мобильных телефонов.
SSI .shtml
SSI (Server-Side Includes) – включение кода на стороне сервера.
Таблица цветов RGB
Цветовая модель RGB является основной для компьютерного дизайна.
Правильное сочетание цветов
Правильное сочетание цветов – важная часть работы дизайнера.
Таблица «безопасных» цветов
Таблица «безопасных» цветов – палитра цветов, рекомендуемых для экранного дизайна.
Таблица символов
Таблица кодов для ввода специальных символов, которые отсутствуют на клавиатуре.
Примеры HTML, CSS
Подборка примеров html-кода и стилевых (CSS) решений.
Alt-коды
Alt-коды – сочетание клавиши Alt и десятичного числа. Используются для ввода символов, которых нет на клавиатуре.
htmlweb.ru
Правильный «скелет» HTML-страницы для сайта, пример по стандарту HTML5
Структура HTML-документа определяет базовый «скелет» для будущего сайта, вариацию которого мы рассмотрим в данном материале. Код выполнен по стандарту HTML5 и кратко изложены основные тезисы элементов. Он подойдет как для начинающего верстальщика в целях разобраться, что собой представляет каркас страницы, так и профессионального вебмастера в качестве быстро используемого шаблона в своих работах.
Шаблон «скелета» HTML-страницы
Приведем исходный HTML-код с некоторыми дополнительными вставками для дальнейшей визуализации с помощью CSS и JS:
<!DOCTYPE HTML> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Название страницы</title> <meta name="description" content="Описание страницы" /> <link rel="stylesheet" type="text/css" href="/assets/css/style.css" /> <link rel="icon" href="/img/favicon.png"> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header> Шапка <nav> Навигация </nav> </header> <main> <section> <h2>Заголовок страницы</h2> Основная часть </section> </main> <aside> Боковая колонка (сайдбар) </aside> <footer> Подвал </footer> </body> </html>
В полученном шаблоне наш «скелет», при условии что файл стилей (style.css) составлен верно, преобразуется в страницу такого типа:
Теги и атрибуты
Разберем основные теги и атрибуты, примененные в примере:
- <!DOCTYPE HTML> – указание браузеру, как интерпретировать данную страницу, к какой версии принадлежит HTML-документ. В нашем случае подразумевается стандарт HTML5.
- <html lang=”ru”> – контейнер для всего содержимого страницы с указанием принадлежности сайта к конкретному языку.
- <head> – технический контейнер, направленный на составление информации о странице, подключения стилей и скриптов.
- <meta charset=”UTF-8″> – кодировка сайта.
- <title> – название страницы. Придерживайтесь правильного заполнения тега Title.
- <meta name=”description” content=”” /> – мета-описание документа. Опять же, существуют некоторые правила грамотного заполнения метаданных.
- <link rel=”stylesheet” type=”text/css” href=”” /> – подключение файла каскадных таблиц стилей (CSS) для стилизации и оформления элементов.
- <link rel=”icon” href=””> – иконка сайта, отображаемая в браузере.
- <script type=”text/javascript” src=””>
- <!–[if lt IE 9]><script src=””> – условие, при котором посетитель, зашедший с браузера Internet Explorer 9, получит поддержку новым тегам, описанным в HTML5.
- <body> – тело документа, включающее теги, атрибуты, текст и изображения. Отображается в браузере.
- <header> – шапка сайта.
- <nav> – навигация по ресурсу непосредственно в шапке. Может быть также использован как в aside, так и в footer.
- <main> – основной контент документа.
- <section> – секция для одного типа содержания. Допустимо наличие несколько одноименных тегов.
- <h2> – заголовок страницы.
- <aside> – боковая колонка, также именуемая как «сайдбар».
- <footer>
Старайтесь верстать «чистый» код, без дополнительного мусора. Спасибо за внимание.
948 просмотров всего, 5 просмотров сегодня
lospirata.ru
Тег | Описание |
---|---|
!, A | |
<!—…—> | Добавляет комментарий в код документа |
<!DOCTYPE> | Предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа) |
<a> | Предназначен для создания ссылок |
<abbr> | Указывает, что текст является аббревиатурой |
<acronym> | Указывает, что текст является акронимом |
<address> | Предназначен для хранения контактной информации автора |
<applet> | Используется для вставки на страницу апплетов — небольших программ на языке Java |
<area> | Определяет активные области изображения, которые являются ссылками |
<article> | Задаёт содержание сайта вроде новости, статьи, записи блога, форума и др. |
<aside> | Представляет собой раздел, который имеет косвенное отношение к содержимому страницы |
Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице | |
B | |
<b> | Устанавливает жирное начертание шрифта |
<base> | Определяет адрес или способ открытия всех ссылок странице по умолчанию |
<basefont> | Задаёт шрифт, размер и цвет текста по умолчанию |
<bdi> | Указывает фрагмент текста, который должен быть изолирован от изменения направления вывода текста |
<bdo> | Устанавливает направление вывода текста: слева направо или справа налево |
<bgsound> | Определяет музыкальный файл, который будет проигрываться на веб-странице |
<big> | Увеличивает размер шрифта на единицу по сравнению с обычным текстом |
<blockquote> | Предназначен для выделения длинных цитат внутри документа |
<body> | Предназначен для хранения содержимого веб-страницы, отображаемого в окне браузера |
<blink> | Устанавливает мигание текста |
<br> | Устанавливает перевод строки в том месте, где он находится |
<button> | Создаёт на веб-странице кнопку |
C | |
<canvas> | Создаёт область, в которой при помощи JavaScript можно рисовать и выводить изображения |
<caption> | Создаёт заголовок к таблице |
<center> | |
<cite> | Представляет название произведения (книги, статьи, поэмы, песни и др.) |
<code> | Предназначен для отображения текста программного код |
<col> | Задаёт ширину и другие характеристики одной или нескольких колонок таблицы |
<colgroup> | Группирует колонки таблицы для изменения их параметров |
<command> | Создаёт команду в виде переключателя, флажка или обычной кнопки |
<comment> | Добавляет комментарий в код документа |
D | |
<data> | Представляет содержимое в машиночитаемом виде, предназначенное для автоматизированных систем |
<datalist> | Создаёт список вариантов, которые можно выбирать при наборе в текстовом поле |
<dd> | Указывает термин в списке описаний |
<del> | Используется для выделения текста, который был удалён в новой версии документа |
<details> | спользуется для хранения информации, которую можно скрыть или показать по требованию пользователя |
<dfn> | Выделяет термин в документе |
<dialog> | Показывает диалоговое окно, в котором можно выводить сообщение или форму, например, для входа на сайт |
<dir> | Создаёт список, содержащий названия директорий |
<div> | Универсальный блочный элемент |
<dl> | Создаёт список описаний |
<dt> | Определяет термин в списке описаний |
E, F | |
<em> | Предназначен для акцентирования текста |
<embed> | Используется для загрузки и отображения объектов |
<fieldset> | Группирует элементы формы |
<figcaption> | Содержит описание для элемента <figure> |
<figure> | Используется для группирования любых элементов, например, изображений и подписей к ним |
<font> | Изменяет характеристики шрифта, такие как размер, цвет и гарнитура |
<footer> | Определяет «подвал» сайта или раздела |
<form> | Устанавливает форму на веб-странице |
<frame> | Определяет свойства отдельного фрейма, на которые делится окно браузера |
<frameset> | Задаёт структуру фреймов на веб-странице |
H | |
<h2> | Заголовок первого уровня |
<h3> | Заголовок второго уровня |
<h4> | Заголовок третьего уровня |
<h5> | Заголовок четветого уровня |
<h5> | Заголовок пятого уровня |
<h6> | Заголовок шестого уровня |
<head> | Предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными |
<header> | Определяет «шапку» сайта или раздела |
<hgroup> | Используется для группирования заголовков веб-страницы или раздела |
<hr> | Рисует горизонтальную линию |
<html> | Является контейнером, который заключает в себе всё содержимое веб-страницы |
I | |
<i> | Устанавливает курсивное начертание шрифта |
<iframe> | Создаёт встроенный фрейм на странице |
<img> | Отображает на веб-странице изображение |
<input> | Позволяет создавать разные элементы интерфейса |
<ins> | Предназначен для выделения текста, который был добавлен в новую версию документа |
K, L | |
<kbd> | Используется для обозначения текста, который набирается на клавиатуре или для названия клавиш |
<keygen> | Используется для генерации пары ключей — закрытого и открытого (для форм) |
<label> | Устанавливает связь между определённой меткой и элементом формы |
<legend> | Создаёт заголовок группы элементов формы |
<li> | Определяет отдельный пункт списка |
<link> | Устанавливает связь с внешним документом вроде файла со стилями |
M | |
<main> | Элемент main предназначен для основного содержимого документа |
<map> | Служит контейнером для элементов <area>, которые определяют активные области для карт-изображений |
<marquee> | Создаёт бегущую строку на странице |
<mark> | Помечает текст как выделенный |
<menu> | Отображает список меню |
<menuitem> | Задаёт команду, которую пользователь может вызывать через контекстное меню |
<meta> | Определяет данные, которые используются для хранения информации, предназначенной для браузеров и поисковых систем |
<meter> | Используется для вывода значения в некотором известном диапазоне |
N | |
<nav> | Группирует ссылки навигации по сайту |
<nobr> | Уведомляет браузер отображать текст без переносов |
<noembed> | Предназначен для отображения информации на веб-странице, если браузер не поддерживает работу с плагинами |
<noindex> | Запрещает поисковой системе Яндекс индексировать текст |
<noframes> | Содержимое элемента отображается в браузере, когда он не поддерживает фреймы и не умеет их интерпретировать |
<noscript> | Показывает своё содержимое, если браузер не поддерживает работу со скриптами |
O | |
<object> | Сообщает браузеру, как загружать и отображать объекты, которые исходно браузер не понимает |
<ol> | Устанавливает нумерованный (упорядоченный) список |
<optgroup> | Объединяет элементы <option> в одну группу |
<option> | Определяет отдельные пункты списка, создаваемого с помощью <select> |
<output> | Определяет область для вывода, преимущественно с помощью скриптов |
P | |
<p> | Определяет текстовый абзац |
<param> | Передаёт значения параметров Java-апплетам или объектам веб-страницы |
<picture> | Представляет собой контейнер для хранения нескольких элементов <source>, которые поддерживают элемент <img> |
<plaintext> | Отображает содержимое контейнера «как есть» со всеми тегами |
<pre> | Определяет блок предварительно форматированного текста |
<progress> | Используется для отображения прогресса завершённости задачи |
Q, R | |
<q> | Используется для выделения в тексте цитат |
<rp> | Используется для вывода текста в браузерах, которые не поддерживают элемент <ruby> |
<rt> | Добавляет аннотацию сверху или снизу от текста, заключенного в контейнер <ruby> |
<rtc> | В основном применяется в качестве описательной части или аннотации для иероглифов |
<ruby> | Предназначен для добавления небольшой аннотации сверху или снизу от заданного текста |
S | |
<s> | Используется для содержимого, которое уже не является точным или актуальным |
<samp> | Используется для отображения текста, который является результатом вывода компьютерной программы |
<script> | Предназначен для описания скриптов |
<section> | Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др. |
<select> | Создаёт раскрывающийся список |
<small> | Используется для сносок и комментариев, написанных обычно мелким текстом |
<source> | Вставляет медийный файл для элементов <audio>, <video> и <picture> |
<spacer> | Создаёт пустое пространство по вертикали или горизонтали |
<span> | Универсальный строчный элемент |
<strike> | Отображает текст как перечёркнутый |
<strong> | Выделяет важный текст |
<style> | Определяет стили элементов веб-страницы |
<sub> | Отображает шрифт в виде нижнего индекса |
<summary> | Указывает заголовок для <details>, по которому можно щёлкать для разворачивания/сворачивания информации |
<sup> | Отображает шрифт в виде верхнего индекса |
T | |
<table> | Создаёт таблицу |
<tbody> | Предназначен для хранения одной или нескольких строк таблицы |
<td> | Предназначен для создания одной ячейки таблицы |
<template> | Задаёт шаблон для фрагмента HTML, который может быть клонирован и вставлен в документ через скрипты |
<textarea> | Создаёт поле для многострочного текста |
<tfoot> | Предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы |
<th> | Создаёт одну ячейку таблицы, которая обозначается как заголовочная |
<thead> | Предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы |
<time> | Помечает текст внутри элемента как дату, время или оба значения |
<title> | Определяет заголовок документа |
<tr> | Служит контейнером для создания строки таблицы |
<track> | Позволяет авторам указать текстовую дорожку для медийных элементов (<video> и <audio>) |
<tt> | Отображает текст моноширинным шрифтом |
U, V, W, X | |
<u> | Используется для разметки текста, который должен отличаться стилистически от обычного текста |
<ul> | Устанавливает маркированный (неупорядоченный) список |
<var> | Используется для выделения переменных из компьютерных программ |
<video> | Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице |
<wbr> | Указывает браузеру место, где допускается делать перенос строки в тексте |
<xmp> | Отображает содержимое контейнера «как есть» и шрифтом фиксированной ширины |
wm-school.ru
<picture></pictire> | контейнер для одного <img> и ноль или больше <source> | inline |
<source> | местоположение и тип альтернативных медиаресурсов для элементов <picture>, <video>, <audio> | none |
<img> | html-изображения | inline |
<iframe></iframe> | создаёт встроенный фрейм | block |
<embed> | встраивает внешний интерактивный контент или плагин | inline-block |
<object></object> | контейнер для встраивания мультимедиа | inline-block |
<param> | задаёт параметры для плагинов, встраиваемых с помощью элемента <object> | none |
<audio></audio> | добавляет аудио-файлы | inline-block |
<video></video> | добавляет видео-файлы | inline-block |
<track> | субтитры для элементов <audio> и <video> | none |
<map></map> | активные области на карте-изображении | inline |
<area> | гиперссылка с текстом или активная область внутри карты-изображения | inline |
<a></a> | гиперссылка | inline |
<em></em> | выделяет важные фрагменты текста курсивом | inline |
<strong></strong> | выделяет полужирным важный текст | inline |
<small></small> | отображает текст шрифтом меньшего размера | inline |
<s></s> | перечёркивает неактуальный текст | inline |
<cite></cite> | источник цитирования | inline |
<q></q> | краткая цитата | inline |
<dfn></dfn> | выделяет термин курсивом | inline |
<abbr></abbr> | аббревиатура или акроним | none |
<ruby></ruby> | контейнер для Восточно-Азиатских символов и их расшифровки | inline |
<rb></rb> | обертка для аннотации | inline |
<rp></rp> | тег для скобок вокруг символов | none |
<rt></rt> | расшифровка символов | block |
<rtc></rtc> | обертка для дополнительной аннотации | inline |
<data></data> | связывает содержимое с машиночитаемым переводом | inline |
<time></time> | дата / время документа или статьи | inline |
<code></code> | фрагмент программного кода | inline |
<var></var> | выделяет переменные из программ | inline |
<samp></samp> | результат выполнения сценария | inline |
<kbd></kbd> | текст, вводимый пользователем с клавиатуры | inline |
<sub></sub> | подстрочное написание символов | inline |
<sup></sup> | надстрочное написание символов | inline |
<i></i> | выделяет текст курсивом без акцента | inline |
<b></b> | задает полужирное начертание отрывка текста, без дополнительного акцента | inline |
<u></u> | выделяет отрывок текста подчёркиванием, без дополнительного акцента | inline |
<mark></mark> | выделяет фрагменты текста желтым фоном | inline |
<bdi></bdi> | изолирует текст, читаемый справа налево | inline |
<bdo></bdo> | задаёт направление написания текста | inline |
<span></span> | контейнер для строчных элементов | inline |
<br> | перенос текста на новую строку | none |
<wbr> | возможное место разрыва длинной строки | none |
<form></form> | html-форма | block |
<label></label> | текстовая метка для элемента <input> | inline |
<input> | многофункциональные поля формы | inline-block |
<button></button> | интерактивная кнопка | inline-block |
<select></select> | элемент управления с выбором значений из предложенных вариантов <option> | inline-block |
<datalist></datalist> | контейнер для выпадающего списка элемента <input> с <option>-значениями | none |
<optgroup></optgroup> | контейнер с заголовком для группы элементов <option> | block |
<option></option> | вариант (опция) в раскрывающемся списке | block |
<textarea> | многострочное поле формы | inline-block |
<output></output> | поле для вывода результата вычисления | inline |
<progress></progress> | индикатор выполнения задачи | inline-block |
<meter></meter> | индикатор измерения в заданном диапазоне | inline-block |
<fieldset></fieldset> | группирует связанные элементы в форме | block |
<legend></legend> | заголовок элементов формы, сгруппированных с помощью <fieldset> | block |
html5book.ru
HTML Примеры
HTML Атрибуты форм HTML Задачи
HTML Основы
HTML документ
HTML заголовки
HTML абзацы
HTML ссылки
HTML изображения
К теории HTML Основы
HTML Атрибуты
Атрибут title
Атрибут alt
Атрибут href
Атрибут без кавычек
К теории HTML Атрибуты
HTML Форматирование текста
Жирный (<b>) и важный (<strong>) текст
Акцент (<em>) и курсив (<i>)
Большой (<big>) и маленький (<small>) шрифт
Перевод строк (<hr>) и горизонтальная линия (<br>)
Подсветка текста (<mark>)
Выделение текста, который был удален (<del>)
Выделение текста, который был добавлен (<ins>)
Отображение текста в нижнем индексе (<sub>)
Отображение текста в верхнем индексе (<sup>)
К теории HTML Форматирование
HTML Цитаты
Длинные (<q>) и короткие (<blockquote>) цитаты
Аббревиатура (<abbr>)
Контактная информация (<address>)
Источники (<cite>) и определения (<dfn>)
Направление отображаемого текста (<bdo>)
К теории HTML Цитаты
HTML Программный код
Ввод текста с сохранением всех пробелов, табуляций и переносов строк
Ввод с клавиатуры (<kbd>) и компьютерный вывод(<samp>)
Выделение переменных (<var>) в программном коде
К теории HTML Программный код
HTML Комментарии
Комментарии в коде
К теории HTML Комментарии
HTML Стили
Применение стилей к элементу
Внешняя таблица стилей
Внутренняя таблица стилей
Приоритетность стилей
К теории HTML Стили
HTML Ссылки
Создание абсолютной ссылки
Ссылка на адрес электронной почты
Открытие ссылок в новом окне
Открытие ссылок в окне с нужным именем
Всплывающая подсказка для ссылки
Ссылка на закладку из другой веб-страницы
Изображения-ссылки
К теории HTML Ссылки
HTML Изображения
Как указать путь к изображению?
Альтернативный текст к изображению
Атрибуты «width» и «height»
Задание размеров изображения с помощью атрибута style
Задание размеров изображения с помощью max-width
Создание карты изображений
К теории HTML Изображения
HTML Цвета
Задание цвета по его названию
Задание цвета с помощью RGB
Цвет HEX
К теории HTML Цвета
HTML Таблицы
Простая HTML-таблица
Применение свойства border
Одинарная рамка для таблицы
Поля и интервалы таблицы
Ширина таблицы
Объединение столбцов
Объединение строк
Заголовок таблицы
Теги группирования элементов таблиц
К теории HTML Таблицы
HTML Списки
Нумерованный список
Применение атрибутов type и start
Применение атрибута value
Форматирование нумерованных списков с помощью CSS
Маркированный список
Вложенные списки
Форматирование маркированных списков
Графические маркеры
Списки определений (описаний)
К теории HTML Списки
Блочные и встроенные элементы
Блочные и встроенные элементы
Общие элементы <div> и <span>
К теории HTML Блочные и встроенные элементы
Идентификаторы и классы
Применение идентификатора
Применение атрибутов id и class
К теории HTML Идентификаторы и классы
HTML Фреймы
Структура HTML-документа с фреймами
Убираем границу между фреймами
Управление границей фреймов
Ссылки внутри фреймов
Плавающий фрейм
Удаление границы плавающего фрейма
Изменение размер, стиля и цвета границы встроенного фрейма
Открытие ссылки в окне встроенного фрейма
К теории HTML Фреймы
Макеты веб-страниц
Макет на основе таблицы
Макет на основе DIV-элементов
Макет на основе элементов HTML5
К теории HTML Макеты
HTML Раздел Head
Элемент <title> создает название документа
Элемент <link> служит для подключения внешнего файла CSS
Элемент <style> содержит правила CSS
Элемент <script> присоединяет к документу сценарии
Элемент <base> служит для указания полного базового URL-адреса документа
К теории HTML Раздел Head
HTML JavaScript
Встроенный скрипт
Запуск скрипта
Подключение внешнего скрипта
Использование тега <noscript>
JavaScript может менять HTML контент
JavaScript может менять значение HTML атрибута
JavaScript может менять стили
JavaScript может менять шрифты
К теории HTML скрипт
HTML Специальные символы
Использование кавычек
Дефис и тире
Спецситмвол €
К теории HTML Специальные символы
HTML Формы
Простая HTML-форма
Поле ввода пароля
Использование радио-переключателей
Флажки (checkbox)
Кнопки подтверждения (submit) и очистки (reset)
Группировка элементов формы
К теории HTML Формы
HTML Элементы формы
Текстовая область <textarea>
Раскрывающийся список (select)
Прокручиваемый список
Группировка пунктов списка (optgroup)
Использование кнопки <button>
Использование элемента <datalist>
Метки элементов формы (label)
К теории HTML Элементы формы
Значения атрибута type элемента <input>
Значение атрибута type: text
Значение атрибута type: password
Значение атрибута type: radio
Значение атрибута type: checkbox
Значение атрибута type: submit
Значение атрибута type: button
Значение атрибута type: date
Значение атрибута type: week
Значение атрибута type: month
Значение атрибута type: time
Значение атрибута type: datetime
Значение атрибута type: datetime-local
Значение атрибута type: number
Значение атрибута type: range
Значение атрибута type: color
Значение атрибута type: email
Значение атрибута type: url
Значение атрибута type: search
Значение атрибута type: tel
К теории HTML Aтрибут type элемента <input>
HTML Атрибуты элемента <input>
Атрибут value
Атрибут disabled
Атрибут readonly
Атрибут size
Атрибут maxlength
Атрибут placeholder
Атрибут autofocus
Атрибуты min и mах
Атрибут step
Атрибут autocomplete
Атрибут required
Атрибут novalidate
Атрибут pattern
Атрибут formnovalidate
Атрибут form
Атрибут formaction
Атрибут formenctype
Атрибут formmethod
Атрибут formtarget
Атрибут multiple
Атрибут multiple
К теории HTML Атрибуты элемента <input>
HTML Атрибуты форм HTML Задачи
Please enable JavaScript to view the comments powered by Disqus.
wm-school.ru
HTML-атрибуты: таблица глобальных атрибутов

HTML-атрибуты сообщают браузеру, каким образом должен отображаться тот или иной элемент страницы. Атрибуты позволяют сделать более разнообразными внешний вид информации, добавляемой с помощью одинаковых тегов.
Значение атрибута заключается в кавычки "". Названия и значения атрибутов не чувствительны к регистру, но, тем не менее, рекомендуется набирать их в нижнем регистре.
Глобальные атрибуты
Глобальные атрибуты, приведенные в таблице ниже, могут быть использованы для любого HTML-элемента, хотя некоторые из них могут не оказывать на элементы никакого влияния.
Атрибут | Описание, принимаемое значение |
---|---|
accesskey | Генерирует сочетания клавиш для доступа к текущему элементу. Состоит из разделенного пробелами списка символов. Браузер в первую очередь выбирает те клавиши, которые существуют на раскладке клавиатуры. Применяется к следующим элементам: <a>, <area>, <button>, <input>, <label>, <legend>, <textarea>. Принимаемые значения: перечень названий клавиш. |
class | Определяет имя класса для элемента (используется для определения класса в таблице стилей). Принимаемые значения: имя класса. |
contenteditable | Определяет, может ли пользователь редактировать содержимое (контент). Позволяет преобразовать любое поле HTML в редактируемый элемент. Принимаемые значения: true/false. |
contextmenu | Добавляет к элементу контекстное меню, заданное тегом <menu>. Принимаемые значения: значение атрибута id элемента <menu>. |
dir | Определяет направление текста контента в элементах <bdo> и <bdi>. Принимаемые значения: ltr/rtl/auto. |
draggable | Определяет, может ли пользователь перетащить элемент. Принимаемые значения: true/false/auto. |
dropzone | Определяет область для приема перемещаемых элементов, сообщая браузеру пользователя, какие действия совершить при перемещении. Принимаемые значения: copy — содержимое перемещаемого элемента будет скопировано в область. move — содержимое перемещаемого элемента будет перемещено в новую область. link — при перемещении будет создана ссылка на первоначальные данные элемента. |
hidden | Указывает на то, что элемент должен быть скрыт. Принимаемые значения: hidden. |
id | Определяет уникальный идентификатор элемента. Принимаемые значения: id — идентификатор элемента. |
lang | Определяет код языка содержимого (контента) в элементе. Принимаемые значения: код языка. |
spellcheck | Указывает, подлежит ли содержимое элемента проверке орфографии и грамматики. Принимаемые значения: true/false. |
style | Указывает на код CSS, применяемую для оформления элемента. Принимаемые значения: код CSS. |
tabindex | Определяет порядок перехода к элементу при помощи клавиши TAB. Принимаемые значения: порядковый номер. |
title | Определяет дополнительную информацию об элементе, задавая всплывающую подсказку для страницы. Принимаемые значения: текст. |
translate | Разрешает или запрещает перевод текста внутри элемента. Принимаемые значения: yes/no. |
html5book.ru
Введение в HTML | htmlbook.ru
Быстрый старт
Чтобы сразу же ввести в курс дела нетерпеливых читателей, предложим им возможность создания веб-страницы без последовательного изучения правил HTML. По крайней мере, вы сумеете убедиться, что создание веб-страниц достаточно простая штука.
В примере 1.1 приведен несложный пример такого кода.
Пример 1.1. Первая веб-страница
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Моя первая веб-страница</title>
</head>
<body>
<h2>Заголовок страницы</h2>
<p>Основной текст.</p>
</body>
</html>
Чтобы посмотреть результат примера в действии, проделайте следующие шаги.
1. В Windows откройте программу Блокнот ( или ).
2. Наберите или скопируйте код в Блокноте (рис. 1.1).
Рис. 1.1. Вид HTML-кода в программе Блокнот
3. Сохраните готовый документ () под именем c:\www\example11.html, при этом обязательно поставьте в диалоговом окне сохранения тип файла: Все файлы и кодировку UTF-8 (рис. 1.2). Обратите внимание, что расширение у файла должно быть именно html.
Рис. 1.2. Параметры сохранения файла в Блокноте
4. Запустите браузер Internet Explorer ( или ).
5. В браузере выберите пункт меню и укажите путь к вашему файлу.
6. Если все сделано правильно, то в браузере вы увидите результат, как показано на рис. 1.3.
Рис. 1.3. Вид веб-страницы в окне браузера
В случае возникновения каких-либо ошибок проверьте правильность набора кода согласно примеру 1.1, расширение файла (должно быть html) и путь к документу.
htmlbook.ru
Отправить ответ