Loading...
pdechkova avatar pdechkova 95 Точки

[Useful Info] HTML & CSS - Всички HTML5 тагове

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

 

Стартов таг Затварящ таг Употреба
<!DOCTYPE html> - HTML5    Указва, че документа е HTML5
<meta charset="utf-8" /> Задава encoding-а
<!-- "-->" Коментар
<head> </head> Информация за страницата
<title> </title> Заглавие(надпис на прозореца)
<meta>   Мета думи
<html> </html> Начало и край на Web страницата
<body> </body>  Видимата част на документа
<header> </header> Заглавна част
<nav> </nav> Навигация
<main> </main> Основната част
<footer> </footer> Най-долната част на страницата
<div> </div> Част от страницата с определени свойства
<span> </span> Част от текст с определени свойства
<section> </section> Секция(по-голямо от статия)
<article> </article> Статия
<aside> </aside> Сайтбар, стой в ляво или дясно
<figure> </figure> Снимка, фигура
<figcaption> </figcaption> Име на снимка
<img/>   Изображение
<audio> </audio> Аудио
<video> </video> Видео

 

Таблици
Стартов таг Затварящ таг Употреба
атрибут съдържащ таг стойности
<table> </table> Таблица
<caption> </caption> Име на таблица
<thead> </thead> Заглавен ред
<tbody> </tbody> Тяло на таблицата
<tfoot> </tfoot> Най-долния ред
<tr> </tr> Ред в таблица
rowspan <tr> Колко реда заема клетката
<td> </td> Колона в таблица
colspan <td> Колко колони заема клетката 
cellpadding <table> Разстояние от рамката до текста(pix) deprecated
cellspacing <table> Разстоянието от рамката на таблицата до самите клетки deprecated
align <table>,<tr>… Разположение на таблица или текст-center, left и right deprecated
valign <table><tr>… Разположение на таблица или текст- top, middle, bottom deprecated
border <table> Широчина на рамката deprecated
bordercolor <table> Цвят на рамката deprecated
bgcolor <table>,<tr>… Цвят на вътрешността deprecated
width <table>,<tr>… Дължина(px, %) deprecated
 height <table>,<tr>… Широчина(px, %) deprecated

 

Списъци
Стартов таг Затварящ таг Употреба
атрибут съдържащ таг стойности
<ol> </ol> Подреден списък
<ul> </ul> Неподреден списък
<li> </li> Част от списък
<dl> </dl> Дефиниращ списък
<dt> </dt> Част от деф. списък
<dd> </dd> Дефиниция на част от деф. списък

 

Форматиране на текст
Стартов таг Затварящ таг Употреба
атрибут съдържащ таг стойности
<h1> </h1> Заглавие(h2, h3…h6)
<hgroup> </hgroup> Групира заглавия deprecated
<p> </p> Параграф
<font> </font> Настройки на шрифта
size <font> Размер (px) deprecated
<b> </b> Одебелен текст,deprecated
<strong> </strong> По-важен текст, одебелен
<i> </i> Наклонен текст deprecated
<em> </em> Наклонен текст, по-важен
<u> </u> Подчертан текст deprecated
<big> </big> Уголемен текст deprecated
<small> </small> Умален текст, маловажно deprecated
<sup> </sup> Горен индекс
<sub> </sub> Долен индекс
<int> </ins> Вмъкнат текст
<ins> </ins> Изтрит текст(зачеркнат) HTML5
<del> </del> Зачеркнат текст,  защото е изтрит
<time> </time> Време
<cite> </cite> Цитат
<q> </q> Цитат
<blockquote> </blockquote> Цитат като отделен параграф, копиране от източник
<dfn> </dfn> Дефиниция
<abbr> </abbr> Абревиатура
<code> </code> Сорс код
<kdb> </kdb> Примерен вход за комп. програма
<samp> </samp> Примерен изход от комп. програма
<output> </output> Резултат от някакво пресмятане (от скрипт)
<var> </var> Променлива
<mark> </mark> Маркиране на текст
<details> </details> Текст с бутон за разпъване на цялото съдържание
<summery> </summery> Съдържанието на details, което се показва винаги
<address> </address> Адрес
<br/>   Нов ред
<hr>   Хоризонтална линия

 

Менюта
Стартов таг Затварящ таг Употреба
атрибут съдържащ таг стойности
<select> </select> Падащо меню
multiple <select> Позволява избиране на повече от един варианти
<option> </option> Вариант за избор от пад. Меню
value <option> Стойност
selected <option> Избрано по подразбиране(=selected)

 

Хипер връзки
Стартов таг Затварящ таг Употреба
атрибут съдържащ таг стойности
<a name> </a> Хипер връзка към точка от страницата
<a href> </a> Хипер връзка към друга страница

 

Формуляри
Стартов таг, Затварящ таг, Употреба
атрибут съдържащ таг стойности
<form> </form> Формуляр
method <form> Задава по какъв начин инфото се изпраща към сървъра
action <form> Указва къде да бъдат изпратени данните
<input> </input> Компонент на формуляр
type <input>

text, password, search, tel

radio, checkbox

бутони-image, submit, reset,button

range, number(имат min,max, step)

hidden

color

file

 
<button> </input> Бутон, в който може да се сложи HTML
disabled <input> Неактивно поле(=disabled)
readonly <input> Забранява писането в полето(=readonly)
placeholder <input> Hidden текст във формуляра
required <input> Не позволява въвеждане на грешни данни или липсващи такива(=required)
pattern <input> Регулярен израз за възможното съдържание на полето
autofocus <input> Автоматично слага курсора в този формуляр(=autofocus)
form <input> Показва част от кой формуляр е
autocomplete <input> Автоматично дописване(=autocomplete)
checked <input> Чекнато по подразбиране(=checked) за radio,  checkbox
tabindex <input> Кой по ред след натискане на таб
<textarea> </textarea> Текст на няколко реда
value submit Сменя името на бутона
formtarget="_blank" <input> submit Отваря в нов прозорец
<label> </label> Използва се за чекбокс, полета и др.
for <label> Указва за кой елемент се отнася
<fieldset> </fieldset> Групирани полета
<legent> </legent> Заглавие на групирани полета

 

Рамки-deprecated
Стартов таг, Затварящ таг, Употреба
атрибут съдържащ таг стойности
<frameset> </frameset> Рамка
cols <frameset> Големина на колоните(100px, * ,100px) *задава р-р в зависимост колко 
място е останало
<frame> </frame> Част от рамка

 

 

П.П От последната лекция не са всички, когато я довърша, ще я кача и тук. 

Тагове:
23
Web Fundamentals - HTML5
aslv1 avatar aslv1 304 Точки

Поздравления за изчерпателния списък!

Бих искал да допълня:

Атрибутите на:

table
  • cellpadding
  • cellspacing
  • align
  • valign
  • border
  • bgcolor
font
  • size
*
  • width
  • height

са остарели (deprecated, obsolete) и не трябва да се прилагат, а да се използва CSS.

Също така таговете

  • hgroup (нищо че е бил, вече е изхвърлен от HTML5)
  • b
  • i
  • u
  • big
  • small

са остарели и за всички от тях има CSS еквиваленти.

Бих искал и да добавя обяснения за таговете:

  • output - използва се за извеждане на резултат от накакво пресмятане (от скрипт) - например за текущата стойност на input[type="range"] или друг input
  • mark - използва се за „highlight“-ване на текста, т. е. нещо като маркиране, но все едно с маркер (от ония жълтите примерно) laughing

 

2
Yulia avatar Yulia 1346 Точки

Аз мога да добавя един интересен сайт - на първи поглед е нищо особено, даже изглежда много странно, но ако разгледате source-code-а, ще видите, че в него са добавени абсолютно всички html тагове (и то в азбучен ред, хах)

http://all-html.net/

2
hkdobrev avatar hkdobrev 48 Точки

Не ми се иска да троля, но виждам прекалено мн неточности. Ще изброя тези, които забелязах на пръв поглед.

 

- <hgroup> не е deprecated. Той беше предложен в HTML5 по-късно премахнат от спецификацията на W3C, обаче все още присъства в WHATWG спецификацията.

- <i>, <u> не са deprecated. Бяха deprecated в HTML 4.01, но ги върнаха в HTML5. Те имат семантично значение. Използвайте ги, когато в документа (а не в неговия стил) искате да кажете, че нещо трябва да бъде подчертано или итализирано.

- <strong> и <em> имат значение на наблягане/натъртване като не указват нищо за визуалното представяне на елементите. Използвайте ги семантично, а не просто когато ви трябва italic или underline.

- <font> е deprecated отдавна.

- <summary> вместо <summery>

- </button> вместо </input>

- Всички изброени атрибути за <input> без "type" са валидни и за <select> и <textarea>.

- Според HTML стандарта се пише <br> вместо <br/>. <br/> е според XHTML, за да е валиден XML. Същото важи и за <img>.

- <a name> е deprecated. Използвайте <a href="#section">

- <iframe> е пропуснат; не е deprecated.

- <aside> не определя местположението си. Просто указва, че това е съдържание, което структурно и семантично е отделено от главното съдържание на страницата или секцията. Когато се стилва, би трябвало да се отдели и визуално.

- <footer> не определя местоположението си. Единствено указва, че това е завършваща част на дадена секция или страницата.

- Сбъркано е <int> и <ins>.

- Разликата между <q> и <cite> е, че даден текст е цитат, а второто е конкретно цитиране на документ, творба и др. http://html5doctor.com/blockquote-q-cite/

 

Нищо лично, просто не ми се иска семантиките да се учат грешно.

 

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

Вижте:

https://developer.mozilla.org/en-US/

http://developers.whatwg.org/

http://www.html5rocks.com/en/

https://developers.google.com/web/fundamentals/

И разбира се: http://www.w3.org/

Препоръчвам ви и да прочетете цялата спецификация (чете се от корица от корица няколко пъти и после разбъркано).

http://www.w3.org/TR/html5/

Успех :-)

 

4
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.