| Таг за създаване на таблица. |
|
|
Определя тялото на таблицата. |
| |
|
Създава клетка от таблица. |
|
|
Използва се за деклариране на фрагменти от HTML код, които могат да бъдат клонирани и вмъкнати в документ чрез скрипт. Съдържанието на таг не е негово дете. |
|
|
Създава големи полета за въвеждане на текст. |
|
|
Определя долния колонтитул на таблицата. |
|
|
Създава заглавие на клетка в таблица. |
|
|
Определя заглавието на таблицата. |
|
|
Определя дата/час. |
|
|
Заглавието на HTML документ, което се показва в горната част на заглавната лента на браузъра. Може да се появи и в резултатите от търсенето, така че това трябва да се вземе предвид при предоставяне на заглавие. |
| |
| Създава ред от таблица. |
|
|
Добавя субтитри за елементи и . |
|
|
Маркира пасаж от текст чрез подчертаване, без допълнително подчертаване. |
| |
Създава списък с водещи символи. |
|
|
Маркира променливите от програмите, като ги показва в курсив. |
|
|
Добавя видео файлове към страницата. Поддържа 3 видео формата: MP4, WebM, Ogg. |
|
|
Показва на браузъра къде може да се прекъсне дълъг ред. |
Cheat sheet с етикети За по-лесна употреба, групирах таговете в тематични секции, като добавих стойности на свойствата на дисплея за всеки таг. За да отидете до масата, щракнете върху снимката.
Последна актуализация: 18.11.2019 г
Когато създаваме HTML5 документ, можем да използваме два различни стила: HTML и XML.
HTML стилът предполага следните точки:
Елементите може да нямат начални отварящи тагове
Елементите може да нямат крайни затварящи тагове
Само празни елементи (напр. br, img, връзка) могат да бъдат затворени с наклонена черта />
Регистърът на имената на етикети и атрибути няма значение
Не е необходимо да ограждате стойностите на атрибутите в кавички
Някои атрибути може да нямат стойности (маркирани и деактивирани)
Специалните знаци не се екранират
Документът трябва да има елемент DOCTYPE
Това е така нареченият „разрешителен“ стил, базиран на отстъпки при създаване на документ.
HTML5 документ може да бъде описан и с помощта на XML синтаксис. Този стил се нарича още "XHTML". Използва се, ако заглавката на типа съдържание е application/xml+xhtml. Следните правила са характерни за този стил:
Всеки елемент трябва да има начален отварящ таг
Невалидните елементи с начален отварящ таг трябва да имат и краен затварящ таг
Всеки елемент може да бъде затворен с наклонена черта />
Имената на етикети и атрибути са чувствителни към малки букви и обикновено са с малки букви
Стойностите на атрибутите трябва да бъдат затворени в кавички
Атрибути без стойности не са разрешени (проверено = "отметнато" вместо просто отметнато)
Специалните знаци трябва да бъдат екранирани
Нека сравним два подхода. HTML5 подход: Заглавие Съдържание на HTML5 документ
И подобен пример, използващ XHTML подхода: Заглавие Съдържание на HTML5 документ
Когато използваме XHTML синтаксис, ние също трябва да посочим пространството от имена за дадения документ:
Изборът на конкретен стил при писане на HTML документи зависи от предпочитанията на програмиста или уеб дизайнера. Често се използва смесен стил, който заимства правила от първия и втория стил.
В същото време трябва да се има предвид, че наличието на затварящи и отварящи етикети на елемент намалява вероятността елементът да бъде неправилно интерпретиран от браузъра.
Също така, затварянето на стойностите на атрибутите в кавички ще помогне да се избегнат потенциални грешки. По този начин атрибутът на класа може да приеме няколко стойности подред. Например: . Но ако пропуснем кавичките, "navmenu" ще се използва като стойност и браузърът ще се опита да интерпретира "bigdesctop" като отделен атрибут.
Ако има някакви затруднения по отношение на това колко правилно е генерираното HTML маркиране, можете да го проверите с помощта на валидатора на https://validator.w3.org:
Можем да поставим кода на уеб страницата в текстовото поле и след като щракнем върху бутона „Проверка“ в долната част, валидаторът ще покаже грешките в червено или ще ни уведоми в зелено, че няма грешки и кодът е валидиран.
Да започнем да учим езика. HTML текстът е "обикновен текст". Всички хипертекстови характеристики на документа се определят с помощта на тагове - специални бележки, включени в този текст.
Нека има текст:
Нека напишем този текст по различен начин, като вмъкнем инструкции как трябва да се показва текстът. Маркираме инструкциите с ъглови скоби.
В HTML инструкциите се наричат тагове. Браузърът изпълнява инструкциите на етикета, тоест, без да ги показва, прави промени в текста. Следователно на екрана ще видим следното:
„Мама миеше рамката, а котката си играеше с топка. Момчето взе топката от котката.
Tag – команда в ъглови скоби. Името на етикета е първото нещо, което се изписва след отварящата ъглова скоба, без интервали преди нея! Има единични етикети и контейнерни етикети. Единични етикети– някаква команда към браузъра, изпълнена на мястото, където е посочено, например командата „начертайте линия“:
Етикетите на контейнера се състоят от отварящ таг и затварящ таг и тяхната индикация се отнася за целия текст, разположен между тях, те казват: „вложен в контейнера“. Затварящият таг има същото име като отварящия таг, но името е предшествано от наклонена черта: “/”:
Мама изми рамката. .
Тагът може да има атрибути. Атрибутът допълва и обяснява етикета. Редът на атрибутите не е важен. Например тагът HR има атрибут WIDTH, който показва ширината на линията, SIZE, дебелината на линията, ALIGN, местоположението (подравняване) и COLOR, цвета. Стойностите на атрибутите определят дадена характеристика. Синтаксисното правило е следното: името на етикета може да бъде последвано от поне един интервал, след което, разделени с интервали, могат да следват тройки: атрибут, символ „=“, стойност. Препоръчително е стойността да бъде оградена в кавички, въпреки че HTML стандартът позволява стойности, състоящи се само от латински букви и цифри, да не бъдат ограждани в кавички.
Изображението на екрана ще бъде нещо подобно.
_____________________________________
Стандартът ви позволява да пропуснете затварящия таг, ако се подразбира. Например етикет Има затварящ абзац, но той може да бъде пропуснат преди отваряне на следващия абзац. Етикет Показва параграф.
Мама изми рамката.
Дъщерята си играеше с топка.
Някои атрибути нямат стойности или по-скоро имат едно значение и затова е достатъчно просто да посочите или да не посочите този атрибут в етикета. Например тагът FRAME има атрибут NORESIZE, който показва, че на потребителя не е разрешено да преоразмерява рамката.
Таговете (елементите) в HTML могат да бъдат вложени един в друг, подобно на цикли или условни изрази в езиците за програмиране. Пресичането на тагове без влагане е забранено.
Пример за грешно въвеждане:
блок пример
с вложен параграф
Пример за правилно въвеждане:
блок пример
С вложен параграф
В допълнение към таговете и обикновения текст, HTML кодът може да съдържа така наречените символни обекти или екраниращи последователности: наименувани и номерирани обекти. Те са необходими за представяне на знаци в документ, които са синтактично или физически забранени, както и знаци, които не могат да се въвеждат от клавиатурата. Например,
Регистърът на буквите не е важен за имената на таговете и имената и стойностите на атрибутите. Въпреки че се препоръчва да поддържате някакъв стил, например, пишете имената на всички тагове с главни букви, или с малки букви, или с малки букви, но с първата главна буква. Такъв текст е по-лесен за възприемане от човек.
Много важна забележка! Целта на браузъра е да покаже вашата страница на клиента. Обичайната реакция на браузъра при грешка е да се опита да коригира грешката и ако това не успее, да пропусне думите или етикетите, които не разбира. Това е едновременно добро и лошо. Тъй като, от една страна, в резултат на това браузърът ще се опита да покаже на потребителя възможно най-много текст, но от друга страна, този текст може да включва част с тагове и скриптове или действителният текст може да не е се включва, ако браузърът го възприема, например като коментар. За разработчика на уебсайт това поведение на браузъра е много обезпокоително. Бъдете готови за факта, че в началото браузърът усърдно ще коригира вашите грешки, но след известно време ще се обърка и работещите преди това фрагменти ще спрат да работят за вас. Затова съвет: не правете грешки, а по-добре използвайте модерни редактори, които познават правилата на html и ви посочват грешките. Синтаксис на HTML Ориз. 1.6. Показване на проста HTML страница в уеб браузър Основни правила на езика HTML Имената на таговете в HTML не са чувствителни към главни и малки букви, а в XHTML малките и главните букви се считат за различни и имената на таговете трябва да се пишат с малки букви.
Елементите могат да включват текст и поделементи (като напр html елементсъдържа поделементите глава и тяло в горния пример). Елементите трябва да бъдат правилно вложени.
Поделементите, включени в елемент, трябва да завършват преди затварящия знак на елемента. Например следният запис е неправилен:
Правилно този фрагмент трябва да изглежда така:
Това е удебелен и курсив текст
В XHTML, ако даден елемент не включва текст и поделементи (празен елемент), той все пак трябва да има отварящ и затварящ етикет. Например елементът br няма съдържание и причинява прекъсване на ред (текстът продължава с нова линия). Въпреки това, според правилата, той трябва да бъде написан, както следва:
или за кратко
. Елементът - резултатът от хоризонтална линия - трябва да бъде написан по абсолютно същия начин.
Отварящите етикети на елемента могат да имат атрибути,които изясняват поведението на елемента и задават допълнителни стойности. Почти всеки таг има голям брой незадължителни параметри. След това ще бъдат разгледани само основните атрибути на таговете.
Много атрибути в HTML са общи за всички елементи, но някои са специфични за на този елементили елементи. Всички те имат формата:
attribute_name="стойност"
Например:
Основи на езика за маркиране на хипертекст"
IN в този примерелемент div (секция от HTML страница, която ви позволява да разделяте документите на логически блокове) има атрибут id, зададен на mySection. Елементът div съдържа елемент h1 (първото или най-важно заглавие на ниво), което от своя страна съдържа някакъв текст. Стойностите на атрибутите трябва да бъдат затворени в единични или двойни кавички.
Имената на таговете и атрибутите и техните възможни стойности се определят от спецификацията на езика HTML и не можете да създавате свои собствени тагове или атрибути.
Всички елементи могат да имат атрибути id и class, чиито стойности се използват за идентифициране на конкретни елементи (id) или групи от елементи (class). Тези атрибути се използват активно в скриптове на документи и CSS описаниястилове на документи.
Има две основни категории елементи в HTML: блокИ низ
- Блокови елементиобикновено информират за структурата на документа. Такива елементи започват на нов ред, откъсвайки се от това, което е било преди него. Примери за блокови елементи са параграфи, списъчни елементи, заглавки и таблици, div контейнери.
- Струнни елементисе съдържат в структурни елементи на ниво блок и покриват само части от текста на документа, а не цели области. Вграденият елемент не предизвиква появата на нов ред в документа, защото това са елементи, които се появяват в абзац от текст. Примери за низови елементи са връзки, подчертани думи или фрази, контейнери за обхват.
HTML таговете са в основата на езика HTML. Етикетите се използват за ограничаване на началото и края на елементите в маркирането.
Всеки HTML документ се състои от дърво от HTML елементи и текст. Всеки HTML елемент се идентифицира чрез начален (отварящ) и краен (затварящ) таг. Отварящият и затварящият етикет съдържат името на етикета.
Всички HTML елементи са разделени на пет типа:
- празни елементи - , ,
, , , , ![]() , , , , , , , , ;
- елементи с неформатиран текст - , ;
- елементи, които показват неформатиран текст - , ;
- елементи от друго пространство от имена - MathML и SVG;
- обикновени елементи - всички останали елементи.
Таблицата предоставя пълен списък с елементи, поддържани от HTML4 и HTML5. Експерименталните и наследените тагове са изключени. Елементите, добавени към спецификацията на HTML5, са маркирани в синьо. Пълен списък на HTML елементи Таблица 1. HTML елементи Описание на етикета |
|
Използва се за добавяне на коментари. |
|
|
Декларира вида на документа и предоставя основна информация на браузъра – неговия език и версия. |
|
|
Създава хипертекстови връзки. |
|
|
Идентифицира текста като съкращение или акроним. Обяснителният текст се посочва с помощта на атрибута заглавие. |
|
|
Посочва информацията за контакт на автора/собственика на документа или статията. Показва се в курсив в браузъра. |
|
|
Това е хипервръзка с текст, съответстващ на конкретна област на карта на изображение или активна област в карта на изображение. Винаги вложено в таг. |
|
|
Раздел от съдържание, който представлява независима част от документ или уебсайт, като например статия в списание, публикация в блог, коментар. |
|
|
Представлява съдържание на страница, което е косвено свързано с основното съдържание на страницата/сайта. |
|
|
Зарежда аудио съдържание в уеб страница. |
|
|
Задава пасаж от текст да бъде удебелен, без да добавя акцент или важност към маркирания текст. |
|
|
Указва основния адрес (URL), от който се изчисляват всички относителни адреси. Това ще помогне да се избегнат проблеми при преместване на страницата на друго място, тъй като всички връзки ще работят както преди. |
|
|
Изолира пасаж от текст, написан на език, на който текстът се чете отдясно наляво от останалата част от текста. |
|
|
Показва текст в посоката, посочена от атрибута dir, заменяйки текущата посока на текста. |
|
|
Маркира текст като цитат, използван за описание на големи цитати. |
|
|
Представлява тялото на документа (съдържание, което не е част от метаданните на документа). |
|
Пренасяне на текст в нов ред. |
|
|
Създава интерактивен бутон. Можете да поставите съдържание вътре в тага - текст или изображение. |
|
|
Контейнер за платно за динамично показване на изображения като напр прости изображения, диаграми, графики и др. За чертане се използва скриптовият език JavaScript. |
|
|
Добавя надпис към таблицата. Вмъква се непосредствено след етикета .
|
|
Използва се за посочване на източника на цитат. Показва се в курсив. |
|
|
Представлява част от програмен код, изобразен в семейство шрифтове с едно пространство. |
|
|
Избира една или повече колони на таблица за форматиране, които не съдържат същия тип информация. |
|
|
Създава структурна група от колони, която идентифицира много логически хомогенни клетки. |
|
|
Елементът се използва за свързване на стойността на атрибута value, който е в машинно четим формат и може да се обработва от компютър, със съдържанието на тага. |
|
|
Елемент контейнер за елемент от падащ списък. Вариантните стойности се поставят в елементи. |
|
|
Използва се за описание на термин от етикет. |
|
|
Маркира текста като изтрит чрез зачертаване. |
|
|
Създава интерактивна джаджа, която потребителят може да отваря или затваря. Представлява контейнер за съдържание, видимото заглавие на уиджета се поставя в тага. |
|
|
Идентифицира дума като термин, като я постави в курсив. Текстът, който следва, трябва да съдържа определение на този термин. |
|
|
Интерактивен елемент, с който потребителят взаимодейства, за да изпълни задача, като диалогов прозорец, инспектор или прозорец. Без атрибута open той не е видим за потребителя. |
|
|
Етикет на контейнер за секции от HTML документ. Използва се за групиране на блокови елементи за форматиране със стилове. |
|
|
Етикет на контейнер, съдържащ термин и неговото описание. |
|
|
Използва се за уточняване на термин. |
|
|
Маркира важни пасажи от текста, като ги показва в курсив. |
|
|
Етикет на контейнер за вграждане на външно интерактивно съдържание или плъгин. |
|
|
Групира свързани елементи във формуляр, като рисува кутия около тях. |
|
|
Заглавие/надпис за елемента. |
|
|
Самостоятелен контейнерен етикет за съдържание като илюстрации, диаграми, снимки, примери на кодове, обикновено с надпис. |
|
|
Определя завършващия регион ( долен колонтитул) документ или раздел. |
|
|
Форма за събиране и изпращане на информация от потребителите към сървъра. Не работи без атрибута action. |
|
|
Създайте шест нива на заглавия за свързани раздели. |
|
|
Елемент на контейнер за метаданни на HTML документ, като , , , , . |
|
|
Секция за въвеждаща информация за сайт или група от навигационни връзки. Може да съдържа едно или повече заглавия, лого, информация за автора. |
|
|
Хоризонтална линия за тематично разделяне на параграфи. |
|
|
Основният елемент на HTML документ. Казва на браузъра, че това е HTML документ. Това е контейнер за всички други html елементи. |
|
|
Курсив на пасаж от текст, без да му придава допълнително ударение. |
|
|
Създава вградена рамка чрез зареждане на друг документ в текущия HTML документ. |
![]()
|
Вгражда изображения в HTML документ с помощта на атрибута src, чиято стойност е URL адресът на вграденото изображение. |
|
|
Създава богати полета на формуляр, в които потребителят може да въвежда данни. |
|
|
Маркира текст с подчертаване. Използва се за подчертаване на промените, направени в документ. |
|
|
Избира текст, който да бъде въведен от потребителя с помощта на клавиатурата, с монопространствен шрифт. |
|
|
Използва се за склад Допълнителна информацияотносно страницата. Браузърите използват тази информация, за да обработят страницата и търсачки- за неговото индексиране. В един блок може да има няколко етикета, тъй като в зависимост от използваните атрибути те носят различна информация. |
|
|
Индикатор за измерване в даден диапазон. |
|
|
Раздел от документ, съдържащ навигационни връзки за сайта. |
|
|
Дефинира раздел, който не поддържа скриптове. |
|
|
Контейнер за вграждане на мултимедия (напр. аудио, видео, Java аплети, ActiveX, PDF и Flash). Можете също да вмъкнете друга уеб страница в текущия HTML документ. Маркерът се използва за предаване на параметрите на плъгина. |
|
|
Подреден номериран списък. Номерацията може да бъде цифрова или азбучна. |
|
|
Контейнер със заглавие за група елементи. |
|
|
Указва опция/опция за избор от падащия списък , или ,. |
|
|
Поле за показване на резултата от изчисление, изчислено с помощта на скрипта. |
|
|
Абзаци в текста. |
|
|
Определя параметри за плъгини, вградени с помощта на елемента. |
|
|
Елемент контейнер, съдържащ един елемент ![]() и нула или повече елементи. Само по себе си не показва нищо. Позволява на браузъра да избере най-подходящото изображение. |
|
|
Извежда текст без форматиране, като запазва интервали и прекъсвания на текста. Може да се използва за показване на компютърен код, съобщения електронна пощаи т.н. |
|
|
Индикатор за изпълнение на задача от всякакъв вид. |
|
|
Определя кратък цитат. |
|
|
Контейнер за източноазиатски символи и тяхното декодиране. |
|
|
Определя своя вложен текст като основен компонент на анотацията. |
|
|
Добавя Кратко описаниенад или под знаците, съдържащи се в елемента, показани с по-малък шрифт. |
|
|
Маркира вградения текст като допълнителна анотация. |
|
|
Показва алтернативен текст, ако браузърът не поддържа елемента. |
|
|
Показва текст, който не е актуален със зачертаване. |
|
|
Използва се за показване на текст, представящ резултата от програмен код или изпълнение на скрипт, както и системни съобщения. Показва се с моноширинен шрифт. |
|
|
Използва се за дефиниране на скрипт от страна на клиента (обикновено JavaScript). Съдържа или текст на скрипт, или сочи към външен файлскрипт, използващ атрибута src. |
|
|
Дефинира логическа област (секция) на страница, обикновено със заглавка. |
|
|
Контролен елемент, който ви позволява да избирате стойности от предложен набор. Вариантните стойности се поставят в . |
|
|
Показва текст с по-малък размер на шрифта. |
|
|
Указва местоположението и типа на алтернативните медийни ресурси за , , . |
|
|
Контейнер за вградени елементи. Може да се използва за форматиране на пасажи от текст, като например подчертаване на отделни думи. |
|
|
Поставя ударение в текста, като го подчертава с удебелен шрифт. |
|
|
Включва вградени таблици със стилове. |
|
|
Указва долен индекс на символи, например индекс на елемент в химически формули. |
|
|
Създава видимо заглавие за етикета. Показва се със запълнен триъгълник, щракването върху него ви позволява да видите подробностите за заглавието. |
|
|
Указва надстрочния правопис на знаците. |
| Таг за създаване на таблица. |
|
|
Определя тялото на таблицата. |
| |
|
Създава клетка от таблица. |
|
|
Използва се за деклариране на фрагменти от HTML код, които могат да бъдат клонирани и вмъкнати в документ чрез скрипт. Съдържанието на таг не е негово дете. |
|
|
Създава големи полета за въвеждане на текст. |
|
|
Определя долния колонтитул на таблицата. |
|
|
Създава заглавие на клетка в таблица. |
|
|
Определя заглавието на таблицата. |
|
|
Определя дата/час. |
|
|
Заглавието на HTML документ, което се показва в горната част на заглавната лента на браузъра. Може да се появи и в резултатите от търсенето, така че това трябва да се вземе предвид при предоставяне на заглавие. |
| |
| Създава ред от таблица. |
|
|
Добавя субтитри за елементи и . |
|
|
Маркира пасаж от текст чрез подчертаване, без допълнително подчертаване. |
| |
Създава списък с водещи символи. |
|
|
Маркира променливите от програмите, като ги показва в курсив. |
|
|
Добавя видео файлове към страницата. Поддържа 3 видео формата: MP4, WebM, Ogg. |
|
|
Показва на браузъра къде може да се прекъсне дълъг ред. |
Cheat sheet с етикети За по-лесна употреба, групирах таговете в тематични секции, като добавих стойности на свойствата на дисплея за всеки таг. За да отидете до масата, щракнете върху снимката.
| | |