Софтуерно Инженерство
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 1343 Точки

Аз мога да добавя един интересен сайт - на първи поглед е нищо особено, даже изглежда много странно, но ако разгледате 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