HTML Essentials Cheat Sheet: етикети, атрибути и още

Създаването на уеб страници започва с HTML. Разкрасяването им и превръщането им в интерактивни идва по-късно. Но за да започнете да създавате функционални статични уебсайтове, имате нужда от разбиране на HTML. (Искате ли бързо въведение в този език за маркиране? Прочетете нашите HTML ЧЗВ.)

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

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

БЕЗПЛАТНО СВАЛЯНЕ: Този cheat sheet се предлага като a PDF файл за изтегляне от нашия дистрибуторски партньор, TradePub. Ще трябва да попълните кратък формуляр, за да получите достъп до него само за първи път. Изтегли

HTML Essentials Cheat Sheet.

HTML Essentials Cheat Sheet

... ... ... ... ...

...

Пряк път	Действие
Основни етикети
...	Първият и последният маркер на HTML документ. Всички други тагове лежат между тези отварящи и затварящи тагове.
...	Указва събирането на метаданни за документа.
	Описва заглавието на страницата и се показва в заглавната лента на браузъра.
...	Включва цялото съдържание, което ще се показва на уеб страницата.
Информация за документа
Споменава основния URL адрес и всички относителни връзки към документа.
За допълнителна информация за страницата като автор, дата на публикуване и т.н.
Връзки към външни елементи като стилови таблици.
	Съдържа информация за стила на документа като CSS (каскадни стилови таблици).
	Съдържа връзки към външни скриптове.
Форматиране на текст
... ИЛИ ...	Прави текста удебелен.
...	Наклонява текста и го прави удебелен.
...	Наклонява текста, но не го прави удебелен.
...	Зачертан текст.
...	Цитира автор на цитат.
...	Етикетира изтрита част от текст.
...	Показва раздел, който е вмъкнат в съдържанието.
...	За показване на цитати. Често се използва с етикет.
...	За по-кратки цитати.
...	За съкращения и пълни форми.
...	Посочва данни за контакт.
...	За определения.
...	За кодови фрагменти.
...	За писане на индекси
...	За писане на горни индекси.
...	За намаляване на размера на текста и маркиране на излишна информация в HTML5.
Структура на документа
...	Различни нива на заглавия. H1 е най-големият, а H6 е най-малкият.
...	За разделяне на съдържание на блокове.
...	Включва вградени елементи, като изображение, икона, емотикон, без да разваля форматирането на страницата.
...	Съдържа обикновен текст.
	Създава нов ред.
	Начертава хоризонтална лента, за да покаже края на секцията.
Списъци
...	За подреден списък с артикули.
...	За неподреден списък с артикули.
...	За отделни елементи в списък.
...	Списък с елементи с дефиниции.
...	Определението на един термин в съответствие със съдържанието на тялото.
...	Описанието на определения термин.
Връзки
...	Ковен маркер за хипервръзки.
...	Етикет за свързване към имейл адреси.
...	Ковен маркер за изброяване на номера за контакт.
...	Ковен маркер за връзка към друга част от същата страница.
...	Придвижва се до раздел div на уеб страницата. (Вариант на горния етикет)
Изображения
	За показване на файлове с изображения.
Атрибути за етикет
src=”url”	Връзка към изходния път на изображението.
alt=”текст”	Текстът, който се показва при задържане на мишката върху изображението.
височина=” ”	Височина на изображението в пиксели или проценти.
ширина=” ”	Ширина на изображението в пиксели или проценти.
подравняване=” ”	Относително подравняване на изображението на страницата.
граница=” ”	Дебелина на границата на изображението.
	Връзка към карта с възможност за щракване.
	Име на изображението на картата.
Областта на изображението на карта с изображение.
Атрибути за етикет
форма=” "	Форма на областта на изображението.
координати=” ”	Координати на областта на изображението на картата.
Форми
...	Родителският маркер за HTML формуляр.
Атрибути за етикет
action=”url”	URL адресът, където се изпращат данните от формуляра.
метод=” ”	Указва протокола за подаване на формуляра (POST или GET).
enctype=” ”	Схемата за кодиране на данни за изпращане на POST.
автоматично довършване	Указва дали автоматичното попълване на формуляра е включено или изключено.
новалидат	Указва дали формулярът трябва да бъде валидиран преди изпращане.
accept-charsets	Указва кодиране на знаци за подаване на формуляри.
цел	Показва къде ще се покаже отговорът за подаване на формуляра.
...	Групира свързани елементи във формата/
...	Посочва какво трябва да въведе потребителят във всяко поле на формуляр.
...	Надпис за елемента fieldset.
Указва какъв тип вход да се вземе от потребителя.
Атрибути за етикет
тип=””	Определя типа на въвеждане (текст, дати, парола).
име=””	Указва името на полето за въвеждане.
стойност=””	Указва стойността в полето за въвеждане.
размер=””	Задава броя на знаците за полето за въвеждане.
максимална дължина=””	Задава ограничението на разрешените въведени знаци.
задължително	Прави полето за въвеждане задължително.
ширина=””	Задава ширината на полето за въвеждане в пиксели.
височина=””	Задава височината на полето за въвеждане в пиксели.
заместител=””	Описва очакваната стойност на полето.
модел =””	Указва регулярен израз, който може да се използва за търсене на модели в текста на потребителя.
мин=””	Минималната допустима стойност за входен елемент.
max=””	Максималната допустима стойност за входен елемент.
хора с увреждания	Деактивира входния елемент.
...	За улавяне на по-дълги поредици от данни от потребителя.
...	Посочва списък с опции, от които потребителят може да избира.
Атрибути за етикет
име=””	Указва име за падащ списък.
размер=””	Брой опции, дадени на потребителя.
многократни	Задава дали потребителят може да избере няколко опции от списъка.
задължително	Указва дали изборът на опция/и е необходим за подаване на формуляр.
автофокус	Указва, че падащ списък автоматично влиза във фокус след зареждане на страница.
...	Дефинира елементи в падащ списък.
стойност=””	Показва текста за дадена опция.
избрани	Задава опция по подразбиране, която се показва.
...	Таг за създаване на бутон за подаване на формуляр.
Обекти и вложени рамки
	Описва вградения файлов тип.
Атрибути за
височина=””	Височината на обекта.
ширина=””	Ширината на обекта.
тип=””	Типът носител, който съдържа обектът.
	Вградена рамка за вграждане на външна информация.
име=””	Името на iFrame.
src=””	URL адресът на източника за съдържанието вътре в рамката.
srcdoc=””	HTML съдържанието в рамката.
височина=””	Височината на iFrame.
ширина=” ”	Ширината на iFrame.
Добавя допълнителни параметри за персонализиране на iFrame.
...	Вгражда външно приложение или плъгин.
Атрибути за
височина=” “	Задава височината на вграждането.
ширина=” “	Задава ширината на вграждането.
тип=””	Типът или форматът на вграждането.
src=””	Изходният път на вградения файл.
таблици
...	Дефинира цялото съдържание за таблица.
Описание на таблицата.
Заглавия за всяка колона в таблицата.
Дефинира данните за тялото за таблицата.
Описва съдържанието на долния колонтитул на таблицата.
Съдържание за един ред.
	...	Данните в един заглавен елемент.
	...	Съдържание в една клетка на таблица.
Групира колони за форматиране.
Една колона с информация.
Нови етикети в HTML5
...	Указва заглавката на уеб страницата.
	Указва долния колонтитул на уеб страницата.
...	Маркира основното съдържание на уеб страницата.
...	Посочва статия.
	Определя съдържанието на страничната лента на страницата.
...	Посочва конкретен раздел в уеб страницата.
...	За описание на допълнителна информация.
...	Използва се като заглавие за горния таг. Винаги се вижда от потребителя.
...	Създава диалогов прозорец.
...	Използва се за включване на диаграми и фигури.
	Описва а елемент.
...	Подчертава конкретна част от текста.
	Набор от връзки за навигация на уеб страница.
...	Конкретен елемент от списък или меню.
...	Измерва данни в рамките на даден диапазон.
...	Поставя лента за напредък и проследява напредъка.
...	Показва текст, който не поддържа анотации на Ruby.
...	Показва подробности за типографските знаци в Източна Азия.
...	Рубинна анотация за източноазиатска типография.
...	Идентифицира час и дата.
Прекъсване на ред в съдържанието.
¹HTML5 символни обекти
" ИЛИ "	Кавички
< ИЛИ &lt ;	Знак по-малко от (
> ИЛИ &gt ;	Знак по-голям от (>)
ИЛИ &nbsp ;	Непрекъсваемо пространство
© ИЛИ &копие ;	Символ за авторско право
™ ИЛИ &ucirc ;	Символ на търговска марка
@ ИЛИ &Uuml ;	символ „в“ (@)
& ИЛИ &	Символ амперсанд (&)
• ИЛИ &ouml ;	Малък куршум
¹Игнорирайте интервал преди точка и запетая, докато пишете HTML символ.

Създайте уебсайт за практически опит

След като сте разбрали основите на HTML кода и да имате работни познания по CSS и JavaScript, опитайте ръката си в изграждането на уебсайт Как да си направим уебсайт: за начинаещиДнес ще ви водя през процеса на създаване на цялостен уебсайт от нулата. Не се притеснявайте, ако това звучи трудно. Ще ви водя през него на всяка стъпка от пътя. Прочетете още . Също така, не забравяйте да запазите нашите Чит-лист за свойствата на CSS3 Cheat Sheet за основните свойства на CSS3Овладейте основния синтаксис на CSS с нашия лист за мами за свойства на CSS3. Прочетете още и JavaScript cheat sheet The Ultimate JavaScript Cheat SheetПолучете бързо опресняване на елементите на JavaScript с този лист за мами. Прочетете още за бъдеща употреба!