Основы HTML • элемент HTML
advertisement
Основы HTML • • • • • HTML элемент Вид элемента Атрибуты элементов Структура HTML документа Популярные HTML элементы Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net Структура HTML элемента Состоит из 3 частей • Открывающий тег • Содержание • Закрывающий тег <h1>HTML – это просто</h1> h1 – имя тега Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net Вид элемента Тег может быть не заполненным <code></code> Сокращенная запись <code /> Пустые элементы <br />, <img src="http://smarly.net/img/logo.png" /> Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net Атрибуты Атрибут сообщает браузеру дополнительную информацию <input type="text" value="" required /> Как правило состоит из двух частей – имя и значение type="text", где name – имя, text – значение Существуют атрибуты которым значение не нужно required – браузеуру достаточно его наличия, его можно представить в виде required="required" или required="" для клиента это не имеет значения Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net Атрибут id Атрибут id используется для того, чтобы элементу в документе придать уникальный идентификатор. У двух элементов в документе не может быть одного и того же значения атрибута id. Популярное использование • Применение стилей для уникального блока • Быстрая выборка HTML объекта из DOM JavaScript-ом • Переход в документе к конкретному разделу используя ссылку Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net Атрибут class Атрибут class используется для того, чтобы в произвольном порядке связать определенные элементы. Многие элементы могут принадлежать к одному и тому же классу, также элементы могу принадлежать к одному или нескольким классам. Если элемент принадлежит к нескольким классам, необходими разделить имена классов пробелами. Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net Структура HTML документа HTML документ содержит ключевые элементы DOCTYPE, html, head, и body <!DOCTYPE HTML> <html> <head> <!– метаданные --> </head> <body> <!– контент --> </body> </html> Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net DOCTYPE DOCTYPE, говорит браузеру, что это документ HTML, а если конкретнее, то документ HTML5 Элемент DOCTYPE для документа HTML4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net <html /> тэг <html> говорит браузеру, что содержимое элемента должно рассматриваться как HTML от начала и до конца, пока не встретится закрывающий тег </html> Можно сказать что <html/> содержит два внутренних блока. Блок метаданных <head /> и блок содержания <body /> . Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net <head /> Область метаданных, содержащаяся внутри элемента <head /> в документе HTML позволяет предоставить браузеру информацию о документе. Элемент <title /> является минимальным но не необходимым количествов метаданных. Задает документу название или имя. Браузеры обычно отображают содержание этого элемента в верхней части окна браузера или вкладки. Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net <body /> Элемент <body /> инкапсулирует содержание HTML документа, в отличие от элемента <head />, который инкапсулирует метаданные и информацию о документе. Элемент <body /> всегда следует за элементом <head />, так что это второй дочерний элемент элемента <html/>. Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net Популярные HTML элементы • • • • • • • • • a – ссылка div – выделенный блок span – часть текста p – абзац ul – неупорядоченный список ol – упорядоченный список li – пункт в элементах ul, ol form – форма button -кнопка • • textarea – поле для ввода нескольких строк input – элемент ввода - text – текст - checkbox – флажок - radio – выбора - submit – отправка формы - file – загрузка текста - hidden – скрытое поле Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net Материал Материал для прочтения http://www.smarly.net/html5-getting-started-with-html http://www.smarly.net/pro-jquery-osnovi-html Книга “Руководство по HTML5” доступна http://smarly.net/ PowerPoint презентация http://storage.smarly.net/study-web-development-asp-net-mvc/lesson-02.pptx Видео урок http://youtu.be/9LMajv_tiSU Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net
