HTML 5 - Блог Стефанова М.А.
реклама
HTML 5 • Позволяет более точно определить данные • Предоставляет более совершенные методы взаимодействия с сервером. • Позволяет страницам хранить данные на стороне клиента () • Работа с мультимедиа «из коробки» • Работа с 2D и 3D графикой • Множественные улучшения производительности • API для работы с устройствами • Стилизация Разработка Web-приложений § Front-End • Верстка / Разметка • Стилизация • Оживление страниц § Back-End § Управление контентом § Обработка данных клиентской стороны § Работа с базами данных § … Технологии Back-End § § § § § § § PHP Python Ruby JavaScript Java ASP.NET … ПО § Верстка § Adobe Dreamweaver § MS Expression Web § Axure RP § Rapid Weawer § GoodPage § Текстовые редакторы § NotePad++ § PSPad § HtmlReader § EditPlus § TextPad § Sublime Text § Coda § TextMate § BlueFish ПО § Браузеры § Google Chrome § Mozilla FireFox § Opera § Safari § IE § Валидаторы § http://validator.w3.org § Tidy § Справочники по тэгам § http://www.w3.org/TR/html4/index/elements.html § Dash (справочник по многим технологиям) § Спецификация § http://www.w3.org/TR/2014/REC-html5-20141028/ ТЭГИ и АТРИБУТЫ § Тэги закрывать не обязательно, но рекомендуется! <p> … </p> <img … /> § Html не чувствителен к регистру. Рекомендуется имена тегов и атрибутов записывать строчными буквами § Атрибуты внутри тэга разделяются пробелами (можно вставить и переход на новую строку, но это не рекомендуется) § Браузер игнорирует «не верную» разметку АТРИБУТЫ § Значения атрибутов следует (а иногда просто необходимо) указывать в кавычках “ ” или апострофах ‘ ‘ § Если атрибут не указывается, используется значение по умолчанию § Допустимо использовать некоторые атрибуты без значения <inputtype="submit"disabled> <inputtype="submit"disabled=true> § Порядок атрибутов в тэгах ни на что не влияет § Значение атрибутов должно соответствовать принимаемому ими типу (ширина – число, ссылка – строка, соответствующая URL) Структура HTML документа § Определение DTD § Корневой тэг html § тэг head § тэг body Простая страничка <!DOCTYPEHTML> <htmllang="ru”> <head> <metacharset="utf-8"> <title> Мояперваястраничка </title> </head> <body> <h1>Заголовок</h1> <p>Абзац</p> </body> </html> DTD § <!DOCTYPE[Элементверхнегоуровня][Публичность] "[Регистрация]//[Организация]//[Тип][Имя]//[Язык]" "[URL]"> § HTML 4.01 § Строгий синтаксис § Переходный синтаксис § С использованием фреймов <!DOCTYPEHTMLPUBLIC "-//W3C//DTDHTML4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> § HTML5 <!DOCTYPEhtml> § XHTML 1.0 § XHTML 1.1 DTD рекомендации § Всегда указывайте DTD § Если используете HTML 4.01 или XHTML 1.0 лучше определять строгий DTD Группы тэгов § § § § § § § § § § § § Верхнего уровня Заголовок документа (metadata) Определяющие контент Блочные Строчные (inline) Изображения и мультимедиа Embedded content Scripting Таблиц Формы Интерактивные элементы Веб-компоненты Тэги «верхнего уровня» <html> <head> … </head> <body> … </body> </html> § Атрибуты: § title § manifest § xmlns <html> § Содержит элементы: § <head> § <body> <!DOCTYPEHTML> <htmllang="ru” title="опаопаопапа"> <head> <title> Мояперваястраничка </title> </head> ... </html> <head> § Может содержать элементы: § <title> § <meta> § <link> § <style> § <script> § <base> <title> § Содержит только текст – название странички § Разметка внутри тега в лучшем случае игнорируется <html> <head> <title>Awesomepagetitle</title> </head> <body> ... </body> </html> <meta> § Пустой тэг § Атрибуты: § name § http-equiv § content § charset § Определяет метаданные с помощью пар значений атрибутов: § name – content § http-equiv – content § Возможные варианты использования тега: § <meta name=“value” content=“value”> § <meta http-equiv=“value” content=“value”> § <meta charset=“value”> <meta charset=“IANA_char_set”> § Указывает кодировку, используемую документом § Значение атрибута charset – строка-имя набора символов, зарегистрированное в IANA § Имена чарсетов здесь: http://www.iana.org/assignments/character-sets/ character-sets.xhtml § Стандартно используется UTF-8: <metacharset=“UTF-8”> § В документе может быть только один тэг meta с атрибутом charset <meta name=“” content=“”> Стандартные значение атрибута name и, соответствующего ему, атрибута content name content applica&on-name Имявеб-приложения,котороепредставляетстраница author Авторстраницы descrip&on Описаниестраницы generator Идентификаторпрограммы,сгенерировавшейстраницу keywords Списокключевыхслов § Ограничения на тег meta с атрибутом name § тег с атрибутом name=“description” должен быть один в документе § не используйте значение application-name, если ваша страница не представляет веб-приложение (например, это страница блога или landing-page) § не используйте значение generator, если вы сами создавали разметку <meta name=“” content=“”> <!DOCTYPEHTML> <htmllang="ru"title="БлогСтефановаМ.А.”> <head> <title>БлогСтефановаМ.А.</title> <metacharset="UTF-8"> <metaname="author"content="СтефановМ.А.”> <metaname="author"content="СоавторовН.И.”> <metaname="description"content="блог,направленныйнаподдержку процессаобучениястудентоввПГУТИ.ВедетдоценткафедрыПОУТС, СтефановМ.А.”> <metaname="generator"content="WordPress4.3.1”> <metaname="keywords"content="programming,softwareengineering”> <body> ... </body> </html> <meta http-equiv=“” content=“”> Стандартизированные значение атрибута http-equiv и, соответствующего ему, атрибута content name content content-type Альтернативныйспособуказатькодировку default-style Стилиотображенияпо-умолчанию refresh Перенаправление(потаймеру) § Ограничения на тег meta с атрибутом name § форма записи тега с атрибутом name=“content-type” <metahttp-equiv=“content-type” content=“text/html;charset=UTF-8”> § вместо такой формы лучше использовать тег meta с атрибутом charset § если http-equiv=“refresh”, то content может содержать значение: § “[целое положительное число]” § “[целое положительное число]; URL”
