muzruno.com

Списък на HTML тагове с описание

Етикетите са думи на HTML езика. С тяхна помощ можете да превърнете прост текстов поток в красив дизайн с разбираема структура. Пълният списък с HTML маркери съдържа около сто параграфи, но на практика той се използва постоянно много по-малко. Те изпълняват различни функции - от изграждане на визуална рамка на страницата и форматиране на текста до свързване на файлове на трети страни и съобразяване с официалните правила на Интернет.

Структура на документа

За да се гарантира, че уеб страницата е адекватно показвана от браузъра и добре възприемана от роботите, тя трябва да има определена структура.

Първият етикет на документа трябва да бъде , Той декларира към кой тип се отнася. Съгласно доктоп е, че браузърът ще направи оформлението. Най-популярният тип е стандарт HTML5, който е обявен, както следва:

Страницата трябва да има коренна част, която да обвива цялото й съдържание. Тази функция се изпълнява от маркера HTML.

Отваряне и затваряне на HTML тагове

Цялата сервизна информация е поставена в секцията глава, и действителното съдържание, което ще бъде видимо за потребителя, може да бъде приложено в маркер тяло.

Използване на маркера тяло това не е задължително да се счита за добра практика. Това ви позволява ясно да определите структурата на уеб страницата, маркирайте началото и края на съдържателната част.

Всеки маркер е пълен раздел със съдържание, така че има отваряща и затваряща част.

Сервизна информация

Вътре в етикета глава които не са видими за потребителя, но са важни за уеб документа.

Заглавието на страницата, което ще се показва в раздела на браузъра, се показва в етикета заглавие.

muzruno.ru
Заглавие на уеб страницата

Разнообразна полезна информация за услугата може да бъде представена под формата на мета маркери, които нямат затваряща част. Мета информацията е описана от атрибутите на маркера мета:

  • име - името на описания имот;
  • съдържание - нейното значение;
  • HTTP-екв - индикация, че този мета маркер трябва да бъде преобразуван в HTTP хедър;
  • набор от знаци - кодирането, в което е записан документът.

По-долу е даден списък с html тагове с атрибути, които могат да бъдат полезни за прехвърляне на важни данни:

Кодиране на уеб страница

Описание на съдържанието на документа и ключовите думи за SEO робота

Създател на страници и авторско право

Електронна поща или сайт на автора
Съобщение до робота за търсене, че след пет дни страницата ще се промени и отново ще трябва да бъде индексирана
Указва на браузъра колко дълго да се съхранява уеб документ в кеша

Команди за сеообработващата машина, които разрешават или отхвърлят индексирането на страницата и проследяват препратките към нея. Възможните стойности са:

  • индекс,
  • Noindex,
  • следват,
  • Nofollow,
  • всичко,
  • никой
Пренасочване към друг URL адрес след зададения брой секунди

Свързване на файлове

Пълната работа на уеб страницата често изисква допълнителни ресурси, например стилове и скриптове. Те могат да бъдат свързани от файлове на трети страни или да са дефинирани в самия документ.

Стиловете трябва да бъдат посочени в етикета глава, за да се гарантира правилното показване на страницата. За да свържете стилова таблица, неотложен маркер на връзката с атрибути href = "адрес на файла" и rel = "stylesheet", който казва на браузъра, че изтегленият файл е CSS таблица. Определението за правила за стил в самата страница трябва да бъде направено в маркера стил.

Свързването на скриптове в раздела за услуги може да забави изтеглянето, така че те често се рекламират в долната част на документа преди крайния маркер тяло. За да укажете адреса на даден файл, се използва атрибут SRC. В допълнение, скриптът може да бъде написан в самия маркер, но за да не вижда браузъра, адресът не трябва да бъде посочен.

Пример за свързване на файлове:

Пример за дефиниране на скриптове и стилове в страницата:

Структура на страницата

За визуално разбиване на непрекъснат поток неформатиран текст в семантични групи, създаване на колони и отделни секции, използвайте структурни HTML тагове. Те образуват блок контейнери, за които можете да инсталирате всеки дизайн, използвайки CSS.

Най-популярният маркиращ маркер за хипертекст е, без съмнение, Разделение. Той не носи никакъв семантичен товар и може да бъде използван за групиране на всички сегменти от съдържанието.

Семантични структурни маркери HTML5


Освен това има няколко семантични структурни тагове, въведени от стандарта HTML5. Те помагат да се даде на съдържанието им определено семантично натоварване, което се отнася за него например като навигационен блок или сутерен на сайта.

Списък на HTML таговете, които имат семантична стойност на нивото на цялата страница:

свободен крайсемантика
удар с главазаглавката на сайта обикновено съдържа името, данните за контакт и главното меню
основеносновното съдържание
долниямазе на обекта
навигациянавигационна единица
статияизбира отделна област на съдържанието, например отделна статия или коментар
разделлогическа секция на уеб страница с заглавие
настранастраничната лента, съдържаща допълнителна информация

В допълнение, новият стандарт позволява семантично групиране на медийното съдържание с подпис, като се използва фигурата на маркерите и отметката.

Африкански слон

Маркери за заглавки

За да отделите заглавията на различни нива, има цяла група маркери от до

. Буквата h е първата буква от заглавката на думата, а индексът до нея е заглавието.

Заглавие на второто ниво

Заглавие на третото ниво

Глава 4

Глава 5
Заглавие 6

На практика най-често се използват първите три вида.

Заглавия на различни нива

Проектиране на хипервръзки

Хипервръзките, свързващи различни страници, са в основата на World Wide Web, така че техният дизайн в HTML се обръща специално внимание. Връзките трябва да се открояват на фона на останалата част от текста, по подразбиране имат син цвят и подчертават. Такава конструкция осигурява етикет .

Пълен списък на атрибутите на маркера за HTML хипервръзки:

  • всички универсални атрибути, като класа, идентификатора, стила;
  • href - адреса на страницата, която трябва да мигрира;
  • target - посочва къде да отворите нова страница. По подразбиране целта е текущият раздел - стойността празно определя отварянето на нов раздел.
  • изтегляне - вместо прехвърляне, зададеният файл ще бъде изтеглен на компютъра на потребителя;
  • rel - проектиран за търсачки, със стойност Nofollow забранява прехвърлянето на робота чрез справка;
  • тип означава MIME тип на целевия файл.

Медийно съдържание

Мрежата ще бъде много скучна без снимки, видеоклипове и друго медийно съдържание. В HTML стандарта има няколко маркера за вмъкване в страницата.

За да поставите изображения, маркерът е предназначен IMG със следните специфични атрибути:

  • SRC - адреса на снимката;
  • н - Алтернативен текст, който ще се показва, ако възникне грешка по време на процеса на зареждане на изображението;
  • широчина, височина - размери.

Вградените обекти могат да се поставят в етикетите обект или закрепвам, В допълнение стандартът HTML5 въведе специални маркери видео и звуков. Те имат впечатляващ списък с атрибути, които контролират показването и възпроизвеждането на медийно съдържание.

свободен край вградена рамка Създава отделна плаваща рамка, в която може да се зареди друг уеб документ.

платно ви позволява да създавате различни изображения и динамично да ги манипулирате с висока ефективност, като използвате jаvascript.

Форматиране на текст

Списъкът с HTML тагове, предназначени за форматиране на текстово съдържание, е много голям.

  • б, силен - мазна марка;
  • аз, ем, DFN - курсив;
  • р, блоков цитат - разпределяне на котировки;
  • код, KBD - мащабен шрифт;
  • дел, ите - зачертаване;
  • добавки, ф - подчертае;
  • марка - разпределение в жълто;
  • подводница - индексът;
  • вечерям - горен;
  • малък - текст, по-малък от текущия.

Принудителните преводи могат да бъдат организирани с помощта на маркера
. ще подкани браузъра за възможни прекъсвания на линия. Освен това има и таг

, до съдържанието, чието форматиране не се прилага, се запазват всички интервали и сричкование.

Текстът под формата на параграфи ще помогне да се маркира

, и ги разделете на тънка сива линия - .

Интерактивни елементи

Много важно за работата на интернет сайтовете са формите и различните интерактивни елементи. Те ви позволяват да получавате и предавате необходимите данни, да взаимодействате с потребителя, да създавате динамично съдържание.

Един от най-важните елементи на формите е входното поле, представено от маркера . Тя може да отнеме много различни форми в зависимост от стойността на атрибута тип.

Други елементи на формите:

  • бутон - бутон;
  • изберете - падащ списък;
  • текстово поле - многоредово поле за въвеждане;
  • етикет - подписа за полето.

свободен край форма групи интерактивни елементи и гарантира, че данните се изпращат на сървъра и fieldset - обединява свързаните с тях полета в групи.

Регистрация на списъци

В HTML има три типа списъци: маркирани, номерирани и списък с определения.

Сортове на списъци в HTML

Списъкът на определенията се състои от:

  • контейнер -
    -
  • името на термина -
    -
  • описание на термина -
    .
Терминът 1
Описание на първия мандат
Терминът 2
Описание на втория мандат

HTML таг номериран списък - (подреден списък), маркирани - (неорганизиран списък). Елементите им са увити в етикет (елемент от списъка).

  • всеки
  • ловец
  • иска
  • да знаете
  • където
  • седи
  • фазан

Форматиране на таблици

Друг важен елемент на мрежата са таблиците, които ви позволяват да систематизирате и удобно да представите голямо количество информация.

Списък на таговете на таблицата в HTML:

  • контейнер за маса - маса;
  • thead - капачка, която обикновено съдържа заглавки;
  • tbody - тялото на таблицата с основните данни;
  • tfoot - долната колона, в която се сумират сумите;
  • tr - ред от клетки;
  • td е обикновена клетка;
  • ти - заглавна клетка, има свое собствено оформление по подразбиране;
  • col - ви позволява да изберете колоната на таблицата и да приложите стилове към нея;
  • colgroup - група колони;
  • надписът е надписът на таблицата.
Структура на HTML документа

Този непълен списък с HTML маркери с описанието показва колко широки са възможностите за маркиране на хипертекст в дизайна на уеб страници. Дизайнерът на оформлението може да представи всякаква информация в удобна за потребителя форма и същевременно да осигури добра представа за страницата от търсещите роботи, което е много важно за нейното популяризиране.

Споделяне в социалните мрежи:

сроден