Синтаксис HTML. Основные правила языка HTML Зачем нужна валидная верстка
Поток кодовых точек Unicode, включающий ввод в этап мнемонизации, будут первоначально виден ПАгенту как поток байтов (обычно приходящий по сети или из локальной файловой системы). Байты кодируют реальные символы в соответствии с конкретной кодировкой символа , которую ПА использует для декодирования байтов в символы.
Для XML-документов этот алгоритм ПАгенты должны использовать для определения кодировки символов, заданной XML-спецификацией. Этот раздел не применяется к XML-документам.
8.2.2.1 Парсинг с известной кодировкой символов
Когда HTML-парсер работает с байтовым потоком ввода, имеющим определённую известную кодировку, тогда кодировка символов – эта кодировка, а – certain .
8.2.2.2 Определение кодировки символов
В некоторых случаях может быть нецелесообразно однозначно определять кодировку до разбора документа. По этой причине данная спецификация предоставляет двух шаговый механизм с опционным предварительным сканированием. В реализациях разрешается, как описано ниже, применять упрощённый алгоритм парсинга к каким бы то ни было доступным байтам до начала парсинга документа. Затем реальный парсер стартует, с использованием предварительного кодирования, взятого из этого предварительного парсинга и других out-of-band метаданных. Если, пока документ загружается, ПА обнаруживает объявление кодировки символов, которое конфликтует с этой информацией, тогда парсер может снова вызван для выполнения парсинга документа с реальной кодировкой.
ПАгенты должны должны использовать ниже следующий алгоритм, называемый алгоритм снифинга кодировки, для определения кодировки символов для использования при декодировании документа в первом шаге. Этот алгоритм принимает в качестве ввода любые out-of-band метаданные, доступные ПАгенту (например, Content-Type метаданные документа), и все доступные до сих пор байты, и возвращает кодировку символов и , которая tentative или certain .
Если пользователь явно указывает ПАгенту переопределить кодировка символов документа особой кодировкой, опционно возвратить эту кодировку с certain
Обычно ПАгенты запоминают такой запрос пользователя между сессиями и иногда применяют это также к документам в iframe ах.
ПА может больше доступных байтов ресурса либо на этом шаге, либо на более позднем шаге этого алгоритма. Например, ПА может ожидать 500ms или 1024 байт, смотря что будет первым. В целом предварительный парсинг ресурса для определения кодировки повышает производительность, так как это уменьшает необходимость отбрасывать структуры данных, используемых при парсинге после поиска информации кодировки. Однако, если ПА слишком затягивает с получением данных для определения кодировки, затраты времени на ожидание могут превысить любой выигрыш от препарсинга.
Требования соответствия для декларации кодировки символов ограничивают её появление только в рамках первых 1024 байт . ПАгентам, следовательно, рекомендуется использовать алгоритм предварительного сканирования (далее) как вызванный этими шагами на первых 1024 байтах, но не останавливаться на этом.
Для каждого ряда следующей таблицы, начиная с первого и вниз, если имеется доступных байтов больше, чем в первом столбце и первые байты файла совпадают с байтами первого столбца, тогда возвратить кодировку из ячейки второго столбца того же ряда, с – certain , и прервать выполнение этих шагов:
| 16-ричные байты | Кодировка |
|---|---|
| FE FF | Big-endian UTF-16 |
| FF FE | Little-endian UTF-16 |
| EF BB BF | UTF-8 |
Этот шаг ищет Unicode Byte Order Marks (BOMs).
То, что этот шаг идёт перед следующим, соблюдающим HTTP-хедэр Content-Type , является умышленным нарушение спецификации HTTP, что объясняется желанием быть максимально совместимым со старым содержимым.
Если транспортный слой специфицирует кодировку символов, и она поддерживается, возвратит эту кодировку с – certain и прервать выполнение этих шагов.
UTF-8 кодирование имеет точно определяемый битовый патэрн. Документы, содержащие байты более 0x7F, совпадающие с UTF-8 патэрном, весьма вероятно, являются UTF-8, а документы с байтовыми последовательностями, не совпадающими с ним – очень вероятно, что нет. ПАгентам, следовательно, рекомендуется искать эту общую кодировку.
Иначе – возвратить определяемую реализацией или пользователем кодировка символов по умолчанию, с – tentative .
В управляемых окружениях или в окружениях, где кодировка документов может быть предписана (например, для ПАгенты, предназначенных конкретно для использования в новых сетях), рекомендуется исчерпывающая кодировка UTF-8 .
В других окружениях кодировка по умолчанию обычно зависит от локали пользователя (аппроксимации языков и, таким образом, часто – кодировок страниц, которые пользователь, весьма вероятно, посещает). Следующая таблица рекомендует умолчания на базе пользовательской локали, для совместимости со старым содержимым. Локали идентифицируются по BCP 47 тэгам языка.
| Локальный язык | Рекомендуемая кодировка по умолчанию | |
|---|---|---|
| ar | Arabic | windows-1256 |
| ba | Bashkir | windows-1251 |
| be | Belarusian | windows-1251 |
| bg | Bulgarian | windows-1251 |
| cs | Czech | windows-1250 |
| el | Greek | ISO-8859-7 |
| et | Estonian | windows-1257 |
| fa | Persian | windows-1256 |
| he | Hebrew | windows-1255 |
| hr | Croatian | windows-1250 |
| hu | Hungarian | ISO-8859-2 |
| ja | Japanese | Shift_JIS |
| kk | Kazakh | windows-1251 |
| ko | Korean | euc-kr |
| ku | Kurdish | windows-1254 |
| ky | Kyrgyz | windows-1251 |
| lt | Lithuanian | windows-1257 |
| lv | Latvian | windows-1257 |
| mk | Macedonian | windows-1251 |
| pl | Polish | ISO-8859-2 |
| ru | Russian | windows-1251 |
| sah | Yakut | windows-1251 |
| sk | Slovak | windows-1250 |
| sl | Slovenian | ISO-8859-2 |
| sr | Serbian | windows-1251 |
| tg | Tajik | windows-1251 |
| th | Thai | windows-874 |
| tr | Turkish | windows-1254 |
| tt | Tatar | windows-1251 |
| uk | Ukrainian | windows-1251 |
| vi | Vietnamese | windows-1258 |
| zh-CN | Chinese (People"s Republic of China) | GB18030 |
| zh-TW | Chinese (Taiwan) | Big5 |
| Все прочие локали | windows-1252 | |
Содержимое этой таблицы выведено из умолчаний Windows, Chrome и Firefox.
Любой другой байт
Ничего не делать с этим байтом.
Поддержка кодировок на базе EBCDIC особенно не рекомендуется. Эта кодировка редко используется для публичного вэб-содержимого. Поддерживать UTF-32 также настоятельно не рекомендуется. Эта кодировка редко используется и часто некорректно реализуется.
Данная спецификация не пытается поддерживать кодировки на базе EBCDIC и UTF-32 в своих алгоритмах; поддержка и использование этих кодировок, следовательно, может дать непредсказуемое поведение в реализациях данной спецификации.
8.2.2.4 Определение кодировки во время парсинга
Когда парсер требует от ПА изменить кодировку, ПА должен выполнить следующие шаги. Это может произойти, если , рассмотренный выше, потерпит неудачу при поиске кодировки символов, или если он найдёт кодировку символов, которая не была фактической кодировкой файла.
8.2.2.5 Препроцессинг входного потока
Поток ввода состоит из символов, протолкнутых в него как декодированный или из различных API, которые напрямую манипулируют потоком ввода.
Один ведущий символ U+FEFF BYTE ORDER MARK должен быть игнорирован, если они присутствуют в .
Требование вырезать символ U+FEFF BYTE ORDER MARK, независимо от того, использовался ли этот символ для определения порядка байтов, является умышленным нарушением Unicode, которое объясняется желанием повысить устойчивость ПАгентов в плане собственных транскодеров.
Любые появления любых символов из диапазонов от U+0001 до U+0008, от U+000E до U+001F, от U+007F до U+009F, от U+FDD0 до U+FDEF и символов U+000B, U+FFFE, U+FFFF, U+1FFFE, U+1FFFF, U+2FFFE, U+2FFFF, U+3FFFE, U+3FFFF, U+4FFFE, U+4FFFF, U+5FFFE, U+5FFFF, U+6FFFE, U+6FFFF, U+7FFFE, U+7FFFF, U+8FFFE, U+8FFFF, U+9FFFE, U+9FFFF, U+AFFFE, U+AFFFF, U+BFFFE, U+BFFFF, U+CFFFE, U+CFFFF, U+DFFFE, U+DFFFF, U+EFFFE, U+EFFFF, U+FFFFE, U+FFFFF, U+10FFFE и U+10FFFF являются . Все они – управляющие символы или перманентно неопределённые/undefined Unicode-символы(несимволы/noncharacters).
Символы "CR" (U+000D) и "LF" (U+000A) рассматриваются особо. Все символы CR должны быть конвертированы в символы LF, а любые символы LF, которые идут после символа CR, должны игнорироваться. Таким образом, новые строки/newlines в HTML DOM представлены символами LF и никогда – символами CR во вводе к этапу .
Следующий символ ввода это первый символ в , который ещё не использован/consumed или явно игнорируется требованиями этого раздела. Начально это первый символ в потоке ввода. Текущий символ ввода это последний символ, который был .
Точка вставки/точка вставки это позиция (непосредственно перед символом или непосредственно перед концом потока ввода), где содержимое, вставленное с использованием document.write() , реально вставляется. Точка вставки является относительной к позиции символа сразу после неё, это не абсолютное смещение в потоке ввода. Начально точка вставки не определена/undefined.
Символ "EOF" в последующих таблицах это концептуальный символ, представляющий конец . Если парсер это парсер, созданный скриптом , тогда конец достигается, когда используется явный символ "EOF" (вставленный методом document.close()). Иначе символ "EOF" – это не реальный символ в потоке, а обозначение отсутствия любых последующих символов.
Обработка символов U+0000 NULL варьируется в зависимости от того, где символы находятся. В целом они игнорируются, кроме случаев, когда это может реально подставить по удар. Такая обработка, по необходимости, распространяется на стадии мнемонизации и построения дерева.
DOM как часть языка
В языке HTML5 впервые было введено понятие DOM (хотя он существовал и до этого, однако он не был частью языка) , теперь HTML-документ рассматривается как набор обектов, а не тегов. Поэтому как такого синтаксиса HTML5 не существует. Однако при написании кода вы можете придерживаться правил разметки тегов , которые были установлены в HTML 4.01 или XHTML 1.0
Синтаксис HTML 4.01
В HTML до пятой версии, существовало несколько правил написания кода:
- Свободный режим loose
, используемый в HTML 4.01
"http://www.w3.org/TR/html4/loose.dtd"> - Cтрогий режим strict
, используемый в HTML 4.01
"http://www.w3.org/TR/html4/strict.dtd"> - Еще был синтаксис связанный с фреймами. Фреймы в HTML5 считаются устаревшими, но многие разработчики всё равно используют их, поскольку фреймы очень удобны при разработке некоторых веб-приложений.
Синтаксис XHTML 1.0
В XHTML , существовало два правила написания кода:
- Переходный режим transitional
, используемый в XHTML 1.0
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> - Строгий режим strict
, используемый в XHTML 1.0
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Современный синтаксис HTML5
При использовании HTML5, написав в начале HTML-документа, доктайп , вы можете использовать любой из перечисленных выше синтаксисов языка (правил написания кода) или даже совмещать HTML 4.01 и XHTML 1.0 друг с другом.
Например не обрамлять кавычками значения атрибутов атрибут=значение (свободный режим HTML 4.01 — loose)
, но в тоже время ставить слеш в одиночных тегах
(строгий режим ХHTML 1.0 — strict)
.
XHTML (strict), наиболее предпочтителен
Опытные HTML-верстальщики обычно используют при написании кода на HTML5, строгий синтаксис XHTML strict , поскольку он держит верстальщика в тонусе, не позволяет ему расслабляться и тем самым оберегает его от возможных ошибок в коде. Также использование строгого синтаксиса пригодится при изучении программирования, ибо там строгость синтаксиса, крайне важна.
Синтаксис языка HTML
Рис. 1.6. Отображение простой HTML-страницы в web-браузере
Основные правила языка HTML
Названия тэгов HTML не являются чувствительными к регистру, а в XHTML маленькие и большие буквы считаются разными, и имена тэгов должны записываться маленькими буквами.
Элементы могут включать текст и подэлементы (как, например, элемент html содержит подэлементы head и body в приведенном выше примере). Элементы должны быть правильно вложены друг в друга.
Подэлементы, включенные в элемент, должны заканчиваться до закрывающего гэга элемента. Например, следующая запись являегся ошибочной: <а>
Правильно данный фрагмент должен иметь следующий вид:
Это полужирный и наклонный текст
В XHTML, если элемент не включает текст и подэлементы (пустой элемент), все равно должен иметь открывающийся и закрывающийся тэги. Например, элемент br не имеет содержания и вызывает разрыв строки (продолжение текста начинается с новой строки). Однако в соответствии с правилами он должен записываться следующим образом:
или сокращенно
. Точно так же должен записываться и элемент
– вывод горизонтальной линии.
Открывающие тэги элементов могут иметь атрибуты, которые уточняют поведение элемента и задают дополнительные значения. Практически у каждого тэга имеется большое число необязательных параметров. Далее будут рассматриваться только основные атрибуты тэгов.
Многие атрибуты в HTML являются общими для всех элементов, но некоторые являются специфическими для данного элемента или элементов. Все они имеют форму:
имя_атрибута="значение"
Например:
Основы Hypertext Markup Language"
В данном примере элемент div (раздел HTML-страницы, позволяющий разделять документы на логические блоки) имеет атрибут id, для которого задано значение mySection. Элемент div содержит элемент h1 (заголовок первого, или самого важного, уровня), который, в свою очередь, содержит некоторый текст. Значения атрибутов должны быть помещены в одиночные или двойные кавычки.
Имена тэгов и атрибутов и их возможные значения определяются спецификацией языка HTML, и свои собственные тэги или атрибуты создавать нельзя.
У всех элементов можно задавать атрибуты id и class, значения которых используются для идентификации конкретных элементов (id) или группы элементов (class). Эти атрибуты активно используются в скриптах документа и описаниях CSS стилей документа.
Имеется две основные категории элементов в HTML: блочные и строковые
- Блочные элементы обычно информируют о структуре документа. Такие элементы начинаются с новой строки, отрываясь от того, что было перед этим. Примерами блочных элементов являются параграфы , пункты списка, заголовки и таблицы, контейнеры div.
- Строковые элементы содержатся внутри структурных элементов блочного уровня и охватывают только части текста документа, а не целые области. Строковый элемент не приводит к появлению в документе новой строки, т. к. они являются элементами, которые появляются в параграфе текста. Примерами строковых элементов являются ссылки, выделенные слова или фразы, контейнеры span.
Александр Кичатов
Как работают PHP скрипты
Наверняка ты знаком с принципом работы радиоуправляемых машинок. Нажимаешь вперёд - машинка едет, нажимаешь влево - машинка меняет направление колёс.
PHP работает точно также. Ты пишешь команды одну за другой, а PHP последовательно их исполняет.
Что такое PHP скрипт
PHP-скрипт - это обычный текстовый файлик с расширением .php . Точно такой же, как html и css.
Но есть одно важное отличие:
Скрипты запускаются только через http-запросы в браузере. Это значит, что для запуска скрипта script.php необходимо в адресной строке браузера написать site.ru/script.php
Если скрипт не работает - проверь текущий URL. Если там будет что-то вроде file:///D:/openserver/domains/site.ru/script.php - это значит, что ты пытаешься не перейти на страницу сайта, а открыть сам PHP файлик в браузере. Это неправильно.
Веб-серверы чаще всего настроены так, что при заходе на главную страницу (например site.ru ) автоматически запускается файл index.php или index.html, лежащий в корне сайта.
Создай в корневой папке сайта файл с названием index.php и открой его в своём текстовом редакторе. При наличии файла index.html его нужно удалить.
Если у тебя пока нет текстового редактора - рекомендую лёгкий и бесплатный Notepad++ , он гораздо удобней встроенного в Windows блокнота.
Обязательно следи за кодировкой скриптов. Кодировка должна быть либо UTF-8 без BOM (если такая доступна в твоём редакторе), либо просто UTF-8 .
Вывод чисел и строк в PHP
Команды PHP пишутся между тегами , например:
Команда echo отвечает за вывод информации на экран. После оператора указывается значение, которое нужно вывести.
Чтобы вывести текст, его нужно указать в одинарных или двойных кавычках:
Команды в PHP разделяются точкой с запятой. Для удобства чтения каждую команду принято писать с новой строки:
Результат в браузере:
Это PHP код.
Вывод HTML кода в PHP
HTML-код можно перемешивать с командами PHP:
Также HTML код можно подставить в PHPшную строку:
Наполеон"; ?>
Результат в браузере:
Слон Наполеон
Мы можем как угодно совмещать PHP код и HTML теги:
Строка2" ?>
Функции в PHP
Функция - это команда, которая выполняет какие-либо действия, например расчёты, управление файлами и т.д.
Определить функцию просто - у неё после названия идут круглые скобки:
Функция phpinfo() выводит на экран информацию с текущими настройками PHP.
Некоторые функции ожидают, что им передадут какое-нибудь значение. Например, функция округления ceil() ожидает число, которое она округлит:
Функция ceil() получает переданное нами значение 91.5 , обрабатывает его (округляет до 92) и возвращает результат. А команда echo получает возвращённое функцией значение и выводит его на экран. Результатом работы этого скрипта будет 92 .
Необходимость закрывающего тега в PHP
Если после PHP команд нет HTML или любого другого вывода на экран, то мы можем не использовать закрывающий тег ?> :
Сокращённый синтаксис открывающего тега в PHP
Вместо
Кроме этого, мы можем заменить тег
Использование тега
Это не относится к тегу
Любой язык имеет синтаксис, т.е. набор правил построения фраз, позволяющий определить осмысленные предложения в этом языке. С изучения этих правил мы и начнем изучение языка HTML. Для начала откроем наш Dremweaver и создадим какой-нибудь несложный HTML-документ в привычном нам визуальном режиме. Посмотрим, какой HTML-код соответствует нашему документу.
Как Вы помните, переключение в режим просмотра HTML-кода производится с помощью кнопки Code View. В Dremweaver"е есть ещё один режим, очень удобный, особенно когда у Вас большой монитор. Это "промежуточный" режим который показывает одновременно и код, и соответствующий ему документ. Так гораздо проще разобраться, где у нас что: мы отмечаем некий фрагмент в визуальном режиме и тут же видим этот фрагмент в режиме HTML-кода. Итак, вы можете заметить, что HTML содержит наш исходный текст в чистом виде и, кроме того, массу каких-то непонятных слов, заключенных в угловые скобки. Эти непонятные конструкции и есть основные строительные блоки нашего языка. Называются они тэгами. Тег состоит из названия тега, заключенного в угловые скобки. Названия тегов могут быть написаны как строчными, так и прописными буквами - это не важно.
Если вы присмотритесь повнимательнее, то заметите, что многие теги имеют свою "вторую половину", дополненную косой чертой. И такие "пары" окружают фрагменты нашего "содержательного" текста. Например, заголовок окружен тегами
и
, абзац окружен тегами . Такая конструкция называется Элементом. Элемент - это и есть единица разметки. Элемент состоит из Открывающего тэга, данных (т.е. содержательной информации) и закрывающего тега. Таким образом, назначение тегов состоит в обозначении границ элементов.Давайте попробуем изменить разметку текста: например, заголовок вместо элемента
Вместо заголовка мы получили обычный абзац текста. Поздравляю! Вы сделали первый шаг к ручному редактированию HTML-кода. При разметке текста на элементы очень важно, чтобы открывающему тегу соответствовал такой же закрывающий. Если бы мы изменили открывающий тег на
А закрывающий оставили - это было бы грубейшей ошибкой. Dreamweaver способен "отлавливать" такие ошибки и сообщать нам об этом. Бывают элементы, для которых указывать закрывающий тег не обязательно. Таким элементом, например, является элемент P. Конец первого абзаца может быть обозначен началом второго.
Бывают элементы, которые вообще не могут иметь закрывающего тега, состоит только из открывающего. Это случается, когда элемент предназначен не для разметки текста, а несет самостоятельную смысловую нагрузку. Например изображение, элемент . Элементы могут быть вложены друг в друга. Например, элемент
вложен в элемент
Это значит, что картинка находится внутри абзаца. Мы можем вложить в этот абзац и другие элементы.
Например, давайте какой-нибудь фрагмент текста заключим в элемент . Этот фрагмент выделился курсивом. Элементы не должны не должны при этом "пересекаться": если элемент открылся внутри элемента То закрыться он должен также внутри Если же мы закроем элемент "снаружи" его родительского элемента, это будет грубейшей ошибкой, о чём Dreamweaver нам так же сообщит. Вот, он сообщает, что у нас имеются пересекающиеся теги. Некоторые теги помимо имени могут включать в себя атрибуты, содержащие дополнительную информацию о данном конкретном элементе. Атрибут состоит из имени атрибута и значения, разделенных знаком равенства. Например, тег Мы можем изменить значение этого атрибута, и ширина картинки изменится. Особыми атрибутами являются id и class. Эти атрибуты применимы почти к любому элементу. Id позволяет дать элементу некоторое уникальное имя и таким образом выделить его из ряда аналогичных элементов. Это имя затем может использоваться: Во-первых, для нестандартного оформления конкретного элемента(например, у нас есть 2 абзаца - одинаковые элементы, выглядят,соответственно, одинаково; присвоив им имена с помощью атрибута id, мы можем контролировать оформление каждого из них по отдельности). Во-вторых, id может использоваться в качестве цели в гиперссылке, т. е. мы можем ссылаться не просто на страницу, а на конкретное её место. В-третьих, для программистских нужд (для определенных манипуляций с конкретным элементом). Class, в отличие от id, не должен быть уникальным. Он задает принадлежность одного или нескольких элементов к определенному классу. Классы используются в основном для оформительских нужд. Например, мы можем пометить несколько абзацев как принадлежащих к одному классу. Сейчас у нас этот и этот абзацы принадлежат к одному классу и мы можем теперь одним махом изменить их оформление. Помимо тегов в HTML используются так называемые " подстановки" (entities). Они нужны в двух случаях: для вставки в документ символов, отсутствующих на клавиатуре (например, "правильных" кавычек) и для вставки символов, имеющих в HTML служебное значение. Например, если нам нужна угловая скобка и мы напишем её в коде как есть, то, естественно, это будет воспринято браузером как тег. В данном случае вместо угловых скобок нужно указать специальные подстановки, которые будут восприняты браузером, как угловые скобки. Подстановки имеют следующий вид: &код; Код может быть либо мнемоническим, специальные слова, либо числовым, когда мы просто указываем номер символа. Числовой код предваряется "решеткой". Существует огромное количество мнемонических кодов, для самых разных символов, но с помощью числового кода мы можем указать абсолютно любой символ, имеющийся в данном шрифте, даже такой, для которого не существует мнемонического кода. Итак, элементы, теги, атрибуты и подстановки - это основные "кирпичики", из которых строится HTML-документ. Но в любом строительстве мы должны придерживаться некоторых базовых правил: сначала заложить фундамент, возвести стены, накрыть строение крышей и т.д. В строительстве HTML-документа также есть свои законы, которые находят отражение в структуре документа. С разметкой текста мы более-менее разобрались. Вы убедились, что в основе документа лежит ваш текст, разбитый на элементы с помощью тегов. Однако вы можете видеть ещё ряд элементов, непонятно к чему относящихся. Располагаются они строго определенным образом. Начинается документ с такой строки: . Это так называемая декларация версии HTML. Дело в том, что, как Вы помните, за недолгую, но насыщенную историю своего развития, HTML вышел в нескольких версиях. Чтобы браузер мог правильно показать данный документ, он должен знать, на каком из HTML-ей он написан. В данном случае в этой строке указано, что мы имеем дело с HTML версии 4.01. После декларации начинается сам документ. Он заключен в элемент . Мы видим открывающий тег, и в конце документа находится закрывающий. Внутри элемента располагаются друг за другом два обязательных элемента: содержит атрибут width, отвечающий за ширину изображения.