Наръчник по HTML

Забележка: можете да изтеглите PDF / ePub / Mobi версия на тази книга, за да можете да я четете офлайн.

Въведение

Добре дошли! Написах тази книга, за да ви помогна бързо да научите HTML и да се запознаете с разширените HTML теми.

HTML, съкратено от Hyper Text Markup Language, е един от най-фундаменталните градивни елементи на мрежата.

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

Този наръчник е насочен към огромна аудитория.

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

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

И все пак много неща са неясни за много хора. Включих и мен. Написах този наръчник, за да си помогна да разбера темата, защото когато трябва да обясня нещо, по-добре се уверете, че първо познавам нещата отвътре.

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

Можете да се свържете с мен в Twitter @flaviocopes.

Моят уебсайт е flaviocopes.com.

Книжен индекс

  • Предговор
  • Основи на HTML
  • Заглавието на документа
  • Тялото на документа
  • Етикети, които взаимодействат с текст
  • Връзки
  • Етикети на контейнери и HTML структура на страницата
  • Форми
  • Маси
  • Мултимедийни тагове: аудио и видео
  • iframes
  • Изображения
  • Достъпност

ПРЕДГОВОР

HTML е основата на чудото, наречено Мрежата.

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

Първата ми книга с HTML излезе през 1997 г. и се казваше "HTML Unleashed". Голям, много страници, дълъг том.

Изминаха повече от 20 години, а HTML все още е основата на мрежата, с минимални промени от тогава.

Разбира се, имаме повече семантични тагове, презентационният HTML вече не е нещо и CSS се погрижи за дизайна на нещата.

Успехът на HTML се основава на едно нещо: простота .

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

Направи го поради друга функция, която ни предоставя: прошка . Има някои правила, нали, но след като ги научите, имате много свобода.

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

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

Дори знаем коя е първата уеб страница. Това е това: //info.cern.ch/hypertext/WWW/TheProject.html

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

Не приемайте това за даденост. Не познавам друга платформа, която ни дава тази способност.

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

Ако не познавате HTML, тази книга има за цел да ви помогне да започнете. Ако сте опитен уеб разработчик, тази книга ще подобри вашите познания.

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

Или ще научите отново нещо старо, което сте забравили.

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

HTML ОСНОВИ

HTML е стандарт, определен от WHATWG , съкращение от Web Hypertext Application Technology Working Group, организация, създадена от хора, работещи в най-популярния уеб браузър. Това означава, че основно се контролира от Google, Mozilla, Apple и Microsoft.

В миналото W3C (World Wide Web Consortium) беше организацията, която отговаряше за създаването на HTML стандарта.

Контролът неофициално премина от W3C към WHATWG, когато стана ясно, че W3C тласък към XHTML не е добра идея.

Ако никога не сте чували за XHTML, ето кратка история. В началото на 2000-те всички вярвахме, че бъдещето на мрежата е XML (сериозно). Така HTML се премести от език за създаване, базиран на SGML, на език за маркиране на XML.

Това беше голяма промяна. Трябваше да знаем и да уважаваме повече правила. По-строги правила.

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

W3C всъщност не се съгласи да се откаже от контрола над HTML и в продължение на години имахме 2 конкурентни стандарта, всеки от които имаше за цел да бъде официален. В крайна сметка на 28 май 2019 г. W3C официално обяви, че „истинската“ HTML версия е тази, публикувана от WHATWG.

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

Имахме HTML версия 1 през 1993 г. Ето оригиналния RFC.

HTML 2 последва през 1995г.

Получихме HTML 3 през януари 1997 г. и HTML 4 през декември 1997 г.

Натоварени времена!

Минаха повече от 20 години, имахме цялото това XHTML нещо и в крайна сметка стигнахме до това „нещо“ на HTML5, което всъщност вече не е само HTML .

HTML5 е термин, който сега определя цял набор от технологии, който включва HTML, но добавя много API и стандарти като WebGL, SVG и други.

Ключовото нещо, което трябва да разберете тук, е следното: сега няма такова нещо (вече) като HTML версия. Това е стандарт на живот. Подобно на CSS, който се нарича "3", но в действителност е куп независими модули, разработени отделно. Подобно на JavaScript, където имаме по едно ново издание всяка година, но в днешно време единственото нещо, което има значение, е кои отделни функции са внедрени от двигателя.

Да, ние го наричаме HTML5, но HTML4 е от 1997 г. Това е дълго време за каквото и да било, камо ли за мрежата.

Тук стандартът сега „живее“: //html.spec.whatwg.org/multipage.

HTML е езикът за маркиране, който използваме за структуриране на съдържание, което консумираме в мрежата.

HTML се обслужва в браузъра по различни начини.

  • Той може да бъде генериран от сървърно приложение, което го изгражда в зависимост от заявката или данните от сесията, например Rails или Laravel или Django приложение.
  • Може да се генерира от клиентско приложение на JavaScript, което генерира HTML в движение.
  • В най-простия случай той може да се съхранява във файл и да се обслужва от браузъра от уеб сървър.

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

По споразумение HTML файл се записва с .htmlили .htmразширение.

Вътре в този файл ние организираме съдържанието с помощта на тагове .

Етикетите обгръщат съдържанието и всеки таг придава специално значение на текста, който обгръща.

Нека направим няколко примера.

Този HTML фрагмент създава абзац, използвайки pмаркера:

A paragraph of text

Този HTML фрагмент създава списък с елементи, използващи ulмаркера, което означава неподреден списък , и liмаркерите, които означават елемент от списъка :

  • First item
  • Second item
  • Third item

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

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

Някои други правила са зададени от вас с CSS.

HTML не е презентационен. Не се занимава с това как изглеждат нещата . Вместо това се занимава с това какво означават нещата .

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

Тези два примера, които направих, са HTML фрагменти, взети извън контекста на страницата.

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

Нека направим пример за правилна HTML страница.

Нещата започват с декларацията за типа на документа (известна още като doctype ), начин да кажем на браузъра, че това е HTML страница и коя версия на HTML използваме.

Съвременният HTML използва този тип докт:

Тогава имаме htmlелемента, който има отварящ и затварящ таг:

  ...  

Повечето тагове се предлагат по двойки с отварящ и затварящ етикет. Затварящият маркер се записва по същия начин като началния маркер, но с /:

some content 

Има няколко самозатварящи се маркера, което означава, че не се нуждаят от отделен затварящ етикет, тъй като не съдържат нищо в тях .

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

Крайният htmlтаг е последното нещо, което присъства в HTML документ.

Вътре в htmlелемента имаме 2 елемента: headи body:

   ...   ...   

Вътре headще имаме тагове, които са от съществено значение за създаването на уеб страница, като заглавието, метаданните и вътрешни или външни CSS и JavaScript. Предимно неща, които не се показват директно на страницата, а само помагат на браузъра (или ботове като бота за търсене на Google) да го покаже правилно.

Вътре bodyще имаме съдържанието на страницата. Най- видими неща .

Етикети срещу елементи

Споменах тагове и елементи. Каква е разликата?

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

A paragraph of text

И така, елемент съставлява целия пакет :

  • начален таг
  • текстово съдържание (и евентуално други елементи)
  • затварящ таг

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

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

Атрибути

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

Атрибутите имат key="value"синтаксис:

A paragraph of text

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

Можем да имаме много от тях:

A paragraph of text

и някои атрибути са булеви, което означава, че се нуждаете само от ключа:

В classи idатрибути са две от най-често срещаните ще намерите употребяван.

Те имат специално значение и са полезни както в CSS, така и в JavaScript.

Разликата между двете е, че an idе уникален в контекста на уеб страница; не може да се дублира.

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

Плюс това, an idе само една стойност. classможе да съдържа множество стойности, разделени с интервал:

A paragraph of text

Често се използва тирето -за разделяне на думи в стойност на клас, но това е просто конвенция.

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

Други атрибути могат да се използват по-общо. Вие току-що видяхте idи class, но ние имаме други такива също, като styleкойто може да се използва, за да вмъкнете вградени правила CSS върху елемент.

Без регистрация

HTML е без регистрация. Етикетите могат да се пишат с главни букви или с малки букви. В първите дни капачките бяха норма. Днес малките букви са норма. Това е конвенция.

Обикновено пишете така:

A paragraph of text

не така:

A paragraph of text

Бяло пространство

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

Например изобразяването на този параграф:

A paragraph of text

е същото като това:

A paragraph of text

и същото като това:

A paragraph of text

> Използвайки свойството CSS за празно пространство, можете да промените начина на поведение. Можете да намерите повече информация за това как CSS обработва празното пространство в CSS Spec

Обикновено предпочитам

A paragraph of text

или

A paragraph of text

Вложените маркери трябва да бъдат отстъпени с 2 или 4 знака, в зависимост от вашите предпочитания:

A paragraph of text

  • A list item

Забележка: тази функция "празно пространство не е от значение" означава, че ако искате да добавите допълнително пространство, това може да ви влуди доста. Предлагам ви да използвате CSS, за да освободите повече място, когато е необходимо.

Забележка: в специални случаи можете да използвате HTML обекта (съкращение, което означава неразбиващо се пространство ) - повече за HTML обектите по-късно. Мисля, че това не трябва да се злоупотребява. CSS винаги се предпочита да променя визуалната презентация.

ЗАГЛАВИЕ НА ДОКУМЕНТА

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

Винаги се пише преди bodyетикета, веднага след началния htmlетикет:

   ...  ...  

Никога не използваме атрибути за този маркер. И ние не пишем съдържание в него.

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

  • title
  • script
  • noscript
  • link
  • style
  • base
  • meta

В titleмаркер

В titleтаг определя заглавието на страницата. Заглавието се показва в браузъра и е особено важно, тъй като е един от ключовите фактори за оптимизация за търсачки (SEO).

В scriptмаркер

Този маркер се използва за добавяне на JavaScript в страницата.

Можете да го включите вграден, като използвате отварящ таг, JavaScript код и след това затварящ таг:

 ..some JS  

Или можете да заредите външен JavaScript файл, като използвате srcатрибута:

В typeатрибут по подразбиране е настроен на text/javascript, така че е напълно задължително.

Има нещо доста важно да се знае за този етикет.

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

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

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

Моето мнение е, че сега това е лоша практика. Нека scriptживеят в headетикета.

В съвременния JavaScript имаме алтернатива, която е по-ефективна от запазването на скрипта в долната част на страницата - deferатрибута. Това е пример, който зарежда file.jsфайл, спрямо текущия URL:

Това е сценарият, който задейства по-бързия път към бързо зареждаща се страница и бързо зареждащ се JavaScript.

Забележка: asyncатрибутът е подобен, но според мен по-лош вариант от defer. Описвам защо, по-подробно, на страница //flaviocopes.com/javascript-async-defer/

В noscriptмаркер

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

Забележка: потребителите могат да изберат да деактивират JavaScript скриптове в настройките на браузъра. Или браузърът може да не ги поддържа по подразбиране.

Използва се по различен начин в зависимост от това дали е поставен в главата на документа или в тялото на документа.

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

В този случай noscriptмаркерът може да съдържа само други маркери:

  • link етикети
  • style етикети
  • meta етикети

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

В този пример зададох елемент с no-script-alertкласа да се показва, ако скриптовете са деактивирани, както беше display: noneпо подразбиране:

   ...   .no-script-alert { display: block; }   ...  ...  

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

В linkмаркер

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

Използва се главно за свързване на външен CSS файл, който да бъде зареден.

Този елемент няма затварящ маркер.

Употреба:

   ...  ...  ...  

В mediaатрибут позволява зареждането на различните стилове в зависимост от възможностите на устройството:

Можем да се свържем и с ресурси, различни от таблици със стилове.

Например можем да свържем RSS емисия, използвайки

Или можем да свържем фавикон, като използваме:

Този маркер е използван и за многостранично съдържание, за да обозначава предходната и следващата страница с помощта на rel="prev"и rel="next". Най-вече за Google. От 2019 г. Google обяви, че вече не използва този маркер, защото може да намери правилната структура на страницата без него.

В styleмаркер

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

Употреба:

 .some-css {}  

Както при linkмаркера, можете да използвате mediaатрибута, за да използвате този CSS само на посочения носител:

 .some-css {}  

В baseмаркер

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

   ...  ...  ...  

В metaмаркер

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

Особено за SEO.

meta елементите имат само началния таг.

Най-основният е descriptionмета тагът:

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

В charsetмета таг се използва за задаване на страница кодиране на знаците. utf-8в повечето случаи:

В robotsмаркер мета инструктира ботове търсачка дали да индексира страница или не:

Или ако трябва да следват връзки или не:

Можете да зададете nofollow и на отделни връзки. Ето как можете да зададете nofollowглобално.

Можете да ги комбинирате:

Поведението по подразбиране е index, follow.

Можете да използвате и други свойства, включително nosnippet, noarchive, noimageindexи още много други.

Можете също така просто да кажете на Google, вместо да насочвате към всички търсачки:

И други търсачки също могат да имат свой собствен метамаркер.

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

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

Вижте повече за този етикет.

Друг доста популярен мета маркер е http-equiv="refresh"този. Този ред казва на браузъра да изчака 3 секунди, след което да пренасочи към тази друга страница:

Използването на 0 вместо 3 ще пренасочи възможно най-скоро.

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

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

ТЕЛОТО НА ДОКУМЕНТА

След затварящия таг head можем да имаме само едно нещо в HTML документ: bodyелементът.

   ...   ...   

Точно както headи htmlтагове, ние можем да имаме само един bodyмаркер в една страница.

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

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

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

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

Блокови елементи срещу вградени елементи

Визуалните елементи, дефинираните в тялото на страницата, обикновено могат да бъдат класифицирани в 2 категории:

  • блокиране на елементи ( p,, divзаглавни елементи, списъци и елементи от списъка, ...)
  • вградени елементи ( a, span, img, ...)

Каква е разликата?

Блоковите елементи, когато са позиционирани на страницата, не позволяват други елементи до тях. Наляво или надясно.

Вградените елементи вместо това могат да седят до други вградени елементи.

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

Имайте предвид, че с помощта на CSS можем да променим по подразбиране за всеки елемент, като pзададем маркер да бъде вграден например или a spanда бъде блок елемент.

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

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

ЕТИКЕТИ, които взаимодействат с текста

В pмаркер

Този маркер определя абзац от текст.

Some text

Това е блок елемент.

В него можем да добавим всеки вграден елемент, който харесваме, харесваме spanили a.

Не можем да добавяме блокови елементи.

Не можем да вложим pелемент в друг.

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

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

В spanмаркер

Това е вграден маркер, който може да се използва за създаване на раздел в параграф, който може да бъде насочен с помощта на CSS:

A part of the text and here another part

В brмаркер

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

Използваме го, за да създадем нов ред в pтаг, без да създаваме нов абзац.

И в сравнение със създаването на нов абзац, той не добавя допълнителни интервали.

Some text

A new line

Етикетите на заглавието

HTML ни предоставя 6 заглавни маркера. От най-важните за малко важно, ние имаме h1, h2, h3, h4, h5, h6.

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

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

Браузърът по подразбиране ще направи h1маркера по-голям и ще намали размера на елементите с hувеличаването на броя в близост :

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

В strongмаркер

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

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

В emмаркер

Този маркер се използва за маркиране на текста вътре в него като подчертан . Както и при това strong, това не е визуален намек, а семантичен намек.

Браузърите по подразбиране правят текста в този курсив .

Цитати

В blockquoteHTML тага е полезно да се вмъкне цитати в текста.

Браузърите по подразбиране прилагат поле към blockquoteелемента. Chrome прилага 40px ляво и дясно поле и 10px горно и долно поле.

В qHTML таг се използва за вградени кавички.

Хоризонтална линия

Всъщност не се основава на текст, но hrтагът често се използва вътре в дадена страница. Това означава horizontal ruleи добавя хоризонтална линия в страницата.

Полезно за отделяне на раздели на страницата.

Блокови кодове

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

Това обикновено е единственото нещо, което браузърите правят. Това е CSS, приложен от Chrome:

code { font-family: monospace; } 

Този маркер обикновено е увит в preтаг, тъй като codeелементът пренебрегва празното пространство и прекъсванията на редовете. Като pетикета.

Chrome дава preтози стил по подразбиране:

pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0px; } 

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

Списъци

Имаме 3 вида списъци:

  • неподредени списъци
  • подредени списъци
  • дефиниционни списъци

С помощта на ulмаркера се създават неподредени списъци . Всеки елемент в списъка се създава с liетикет:

  • First
  • Second

Подредените списъци са подобни, току-що направени с olетикета:

  1. First
  2. Second

Разликата между двете е, че подредените списъци имат номер преди всеки елемент:

Списъците с определения са малко по-различни. Имате термин и неговото определение:

Flavio
The name
Copes
The surname

Ето как браузърите обикновено ги визуализират:

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

Други текстови тагове

Има редица тагове с презентационни цели:

  • на markмаркер
  • на insмаркер
  • на delмаркер
  • на supмаркер
  • на subмаркер
  • на smallмаркер
  • на iмаркер
  • на bмаркер

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

Може да се чудите, как е bразлично от strong? И как iе различно от em?

Разликата се крие в семантичното значение. Докато bи iса директен намек за браузъра, за да направите парче текст получер или курсив strongи emда придадете на текста специално значение, а браузърът трябва да даде стила. Което по подразбиране е точно същото като bи и i. Въпреки че можете да промените това с помощта на CSS.

Има редица други, по-малко използвани тагове, свързани с текст. Току-що споменах онези, които виждам използвани най-много.

ВРЪЗКИ

Връзките се дефинират с помощта на aмаркера. Дестинацията на връзката се задава чрез нейния hrefатрибут.

Пример:

click here 

Между началния и затварящия таг имаме текста на връзката.

Горният пример е абсолютен URL адрес. Връзките също работят с относителни URL адреси:

click here 

В този случай при кликване върху връзката потребителят се премества към /testURL адреса на текущия произход.

Бъдете внимателни с /характера. Ако е пропуснато, вместо да започне от началото, браузърът просто ще добави testниза към текущия URL адрес.

Например, аз съм на страницата //flaviocopes.com/axios/и имам тези връзки:

  • /test веднъж щракнат ме води до //flaviocopes.com/test
  • test веднъж щракнат ме води до //flaviocopes.com/axios/test

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

или всякакви други елементи, с изключение на други тагове.

Ако искате да отворите връзката в нов раздел, можете да използвате targetатрибута:

open in new tab 

КОНТЕЙНЕРНИ ЕТИКЕТИ И СТРУКТУРА НА СТРАНИЦА HTML

Етикети на контейнера

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

Ние имаме:

  • article
  • section
  • div

и може да е объркващо да се разбере разликата между тях.

Нека видим кога да използваме всеки един от тях.

article

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

Например списък с публикации в блога на началната страница.

Или списък с връзки.

A blog post

Read more

Another blog post

Read more

Ние не сме ограничени до списъци: една статия може да бъде основният елемент на страницата.

A blog post

Here is the content...

Вътре в articleтаг трябва да има заглавие ( h1- h6) и

section

Представлява секция от документ. Всяка секция има заглавен етикет ( h1- h6), след това тялото на секцията .

Пример:

A section of the page

...

Полезно е да разчлените дълга статия на различни раздели .

Не трябва да се използва като общ елемент на контейнера. divе създаден за това.

div

div е общият елемент на контейнера:

 ... 

Често добавяте classили idатрибут към този елемент, за да му позволите да бъде оформен с помощта на CSS.

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

Етикети, свързани със страницата

nav

Този маркер се използва за създаване на маркировка, която определя навигацията на страницата. В това обикновено добавяме ulили olсписък:

  1. Home
  2. Blog

aside

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

Клетка, където да добавите цитат, например. Или странична лента.

Пример:

some text..

A quote..

other text...

Използването asideе сигнал, че нещата, които съдържа, не са част от редовния поток на секцията, в която живее.

header

В headerмаркер представлява част от страницата, която е въведението. Той може например да съдържа един или повече заглавен маркер ( h1- h6), слогана за статията, изображение.

Article title

...

main

В mainмаркер представлява основната част от една страница:

 ....  

....

footer

Най- footerмаркерът се използва за определяне на долната част на страницата на една статия, или долната част на страницата на страницата:

 ....  

Footer notes..

ФОРМИ

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

Имате набор от контроли и когато изпратите формуляра, или с щракване върху бутон „Изпращане“, или програмно, браузърът ще изпрати данните на сървъра.

По подразбиране това изпращане на данни кара страницата да се презареди след изпращането на данните, но с помощта на JavaScript можете да промените това поведение (няма да обяснявате как в тази книга).

Създава се формуляр с помощта на formмаркера:

 ...  

По подразбиране формулярите се подават с помощта на метода GET HTTP. Което има своите недостатъци и обикновено искате да използвате POST.

Можете да зададете формуляра да използва POST, когато е изпратен, като използвате methodатрибута:

 ...  

Формулярът се изпраща, използвайки GET или POST, до същия URL адрес, където се намира.

Така че, ако формулярът е на //flaviocopes.com/contactsстраницата, натискането на бутона „изпрати“ ще направи заявка към същия URL адрес.

Което може да доведе до нищо не се случва.

Нуждаете се от нещо от сървъра, за да обработите заявката и обикновено „слушате“ тези събития за изпращане на формуляри на специален URL адрес.

Можете да посочите URL адреса чрез actionпараметъра:

 ...  

Това ще накара браузърът да изпрати данните от формуляра чрез POST към /new-contactURL адреса на същия произход.

Ако произходът (протокол + домейн + порт) е //flaviocopes.com(порт 80 е по подразбиране), това означава, че данните на формуляра ще бъдат изпратени //flaviocopes.com/new-contact.

Говорих за данни. Кои данни?

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

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

Нека да представим всеки един от тях в следващия преглед на полетата на формуляра.

В inputмаркер

В inputобластта е един от най-широко използваната форма елементи. Това също е много гъвкав елемент и може напълно да промени поведението въз основа на typeатрибута.

Поведението по подразбиране е да бъде едноредова контрола за въвеждане на текст:

Еквивалентно на използването:

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

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

електронна поща

Използването type="email"ще провери от страна на клиента (в браузъра) имейл за коректност (семантична коректност, без да се гарантира, че имейл адресът съществува) преди изпращане.

Парола

Използването type="password"ще направи всеки въведен ключ да се показва като звездичка (*) или точка, полезно за полета, в които се хоства парола.

Числа

Можете да въведете елемент, който да приема само числа:

Можете да посочите приетата минимална и максимална стойност:

В stepатрибута помага за разкриване на стъпките между различни стойности. Например това приема стойност между 10 и 50, на стъпки от 5:

Скрито поле

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

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

Той може просто да се използва за идентифициране на форма и нейното действие.

Задаване на стойност по подразбиране

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

Ако зададете заместител, тази стойност ще се появи, ако потребителят изчисти стойността на полето за въвеждане:

Подаване на формуляр

В type="submit"областта е бутон, който, след като натиснат от потребителя, предава форма:

В valueатрибут определя текста на бутона, който ако липсва показва текста "Изпращане":

Проверка на формуляра

Браузърите предоставят на клиентите функционалност за проверка на формуляри.

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

Нека да видим и двата варианта.

Задайте полетата според изискванията

В requiredатрибута, който помага при проверката. Ако полето не е зададено, проверката от страна на клиента се проваля и браузърът не изпраща формуляра:

Прилагане на определен формат

Описах type="email"полето по-горе. Той автоматично проверява имейл адреса в съответствие с формата, зададен в спецификацията.

В type="number"областта, аз споменах minи maxатрибут към гранични стойности, въведени с интервал.

Можете да направите повече.

Можете да приложите определен формат във всяко поле.

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

Препоръчвам да прочетете ръководството си за регулярни изрази на flaviocopes.com/javascript-regular-expressions/.

pattern = "//.*"

Други полета

Качване на файлове

Можете да заредите файлове от вашия локален компютър и да ги изпратите на сървъра с помощта на type="file"входен елемент:

Можете да прикачите няколко файла:

Можете да посочите един или повече типове файлове, разрешени с помощта на acceptатрибута. Това приема изображения:

Можете да използвате определен тип MIME, като application/jsonили да зададете разширение на файл като .pdf. Или задайте множество файлови разширения, като това:

Бутони

В type="button"полетата за въвеждане може да се използва за добавяне на допълнителни бутони към формата, които не са представят бутоните:

Те се използват за програмно извършване на нещо, използвайки JavaScript.

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

Радио бутони

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

Името идва от стари автомобилни радиостанции, които са имали този вид интерфейс.

Вие дефинирате набор от type="radio"входове, всички с един и същ nameатрибут и различен valueатрибут:

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

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

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

Квадратчета за отметка

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

Вие дефинирате набор от type="checkbox"входове, всички с един и същ nameатрибут и различен valueатрибут:

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

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

Дата и час

Имаме няколко типа входни данни, за да приемем стойности на датата.

Полето за type="date"въвеждане позволява на потребителя да въведе дата и показва избор на дата, ако е необходимо:

Полето за type="time"въвеждане позволява на потребителя да въведе време и показва избор на време, ако е необходимо:

Полето за type="month"въвеждане позволява на потребителя да въведе месец и година:

Полето за type="week"въвеждане позволява на потребителя да въведе седмица и година:

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

В type="datetime-local"областта ви позволява да изберете дата и време.

Ето страница, за да ги тествате всички: //codepen.io/flaviocopes/pen/ZdWQPm

Средство за избиране на цвят

Можете да позволите на потребителите да изберат цвят с помощта на type="color"елемента:

Задавате стойност по подразбиране с помощта на valueатрибута:

Браузърът ще се погрижи за показване на избор на цвят на потребителя.

Обхват

Този входен елемент показва плъзгащ елемент. Хората могат да го използват, за да преминат от начална стойност към крайна стойност:

Можете да предоставите незадължителна стъпка:

Телефон

Полето за type="tel"въвеждане се използва за въвеждане на телефонен номер:

Основната точка за продажба при използване на telover textе на мобилни устройства, където устройството може да избере да показва цифрова клавиатура.

Посочете patternатрибут за допълнителна проверка:

URL

В type="url"областта се използва за въвеждане на URL адрес.

Можете да го проверите с помощта на patternатрибута:

В textareaмаркер

Най textareaелемент позволява на потребителите да влизат няколко реда текст. В сравнение с input, той изисква завършващ маркер:

Можете да зададете размерите, използвайки CSS, но също така и с помощта на rowsи colsатрибути:

Както при другите тагове на формуляра, nameатрибутът определя името в данните, изпратени до сървъра:

В selectмаркер

Този маркер се използва за създаване на падащо меню.

Потребителят може да избере една от наличните опции.

Всяка опция се създава с помощта на optionмаркера. Добавяте име към избраното и стойност към всяка опция:

 Red Yellow  

Можете да зададете опция деактивирана:

 Red Yellow  

Можете да имате една празна опция:

 None Red Yellow  

Опциите могат да бъдат групирани с помощта на optgroupмаркера. Всяка група опции има labelатрибут:

  Red Yellow Blue   Green Pink   

МАСИ

В ранните дни на уеб таблиците бяха много важна част от изграждането на оформления.

По-късно те бяха заменени от CSS и неговите възможности за оформление, а днес имаме мощни инструменти като CSS Flexbox и CSS Grid за изграждане на оформления. Масите вече се използват само за, познайте какво, изграждане на маси!

В tableмаркер

Определяте таблица с помощта на tableмаркера:

Вътре в таблицата ще дефинираме данните. Ние разсъждаваме по редове, което означава, че добавяме редове в таблица (а не колони). Ще дефинираме колони в реда.

Редове

С помощта на trмаркера се добавя ред и това е единственото нещо, което можем да добавим в tableелемент:

Това е таблица с 3 реда.

Първият ред може да поеме ролята на хедър.

Заглавки на колони

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

Помислете за документ на Excel / Google Sheets. Най-горният A-B-C-D...хедър.

Определяме заглавката, като използваме thмаркера:

Column 1Column 2Column 3

Съдържанието на таблицата

Съдържанието на таблицата се дефинира с помощта на tdтагове, вътре в другите trелементи:

Column 1Column 2Column 3
Row 1 Column 1Row 1 Column 2Row 1 Column 3
Row 2 Column 1Row 2 Column 2Row 2 Column 3

Ето как го правят браузърите, ако не добавите CSS стил:

Добавяне на този CSS:

th, td { padding: 10px; border: 1px solid #333; } 

прави таблицата да изглежда по-скоро като правилна таблица:

Раздели колони и редове

Един ред може да реши да обхване над 2 или повече колони, като използва colspanатрибута:

Column 1Column 2Column 3
Row 1 Columns 1-2Row 1 Column 3
Row 2 Columns 1-3

Или може да обхваща над 2 или повече реда, използвайки rowspanатрибута:

Column 1Column 2Column 3
Rows 1-2 Columns 1-2Row 1 Column 3
Row 2 Column 3

Заглавия на редове

Преди да обясня как можете да имате заглавия на колони, като използвате thмаркера в първия trтаг на таблицата.

Можете да добавите thтаг като първи елемент в, trкойто не е първият trот таблицата, за да има заглавия на редове:

Column 2Column 3
Row 1Col 2Col 3
Row 2Col 2Col 3

Още тагове за организиране на таблицата

Можете да добавите още 3 маркера в таблица, за да бъде тя по-организирана.

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

Тези маркери са

  • thead
  • tbody
  • tfoot

Те обвиват trетикетите, за да дефинират ясно различните секции на таблицата. Ето пример:

Column 2Column 3
Row 1Col 2Col 3
Row 2Col 2Col 3
Footer of Col 1Footer of Col 2

Надпис на таблицата

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

 Dogs age 
DogAge
Roger7

МУЛТИМЕДИЙНИ ЕТИКЕТИ: AUDIOИVIDEO

В този раздел искам да ви покажем audioи videoтагове.

В audioмаркер

Този маркер ви позволява да вграждате аудио съдържание във вашите HTML страници.

Този елемент може да предава поточно аудио, може би с помощта на микрофон getUserMedia(), или може да възпроизвежда аудио източник, който препращате, използвайки srcатрибута:

По подразбиране браузърът не показва никакви контроли за този елемент. Което означава, че аудиото ще се възпроизвежда само ако е настроено на автоматично възпроизвеждане (повече за това по-късно) и потребителят не може да види как да го спре или да контролира силата на звука или да се движи през записа.

За да покажете вградените контроли, можете да добавите controlsатрибута:

Контролите могат да имат персонализиран скин.

Можете да посочите MIME типа на аудио файла, като използвате typeатрибута. Ако не е зададен, браузърът ще се опита автоматично да го определи:

Аудио файлът по подразбиране не се възпроизвежда автоматично. Добавете autoplayатрибута за автоматично възпроизвеждане на аудиото:

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

В loopатрибута рестартира аудио прожектира в 0:00 ако е настроено; в противен случай, ако не присъства, звукът спира в края на файла:

Можете също да възпроизведете аудио файл, заглушен с помощта на mutedатрибута (не съм наистина сигурен каква е полезността на това):

С помощта на JavaScript можете да слушате различни събития, случващи се на даден audioелемент, най-основните от които са:

  • play когато файлът започне да се възпроизвежда
  • pause когато възпроизвеждането на аудио е било на пауза
  • playing когато аудиото се възобнови от пауза
  • ended когато е достигнат краят на аудио файла

В videoмаркер

Този маркер ви позволява да вграждате видео съдържание във вашите HTML страници.

Този елемент може да предава поточно видео, използвайки уеб камера чрез getUserMedia()или WebRTC , или може да възпроизвежда видео източник, който препращате, използвайки srcатрибута:

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

Което означава, че видеото ще се възпроизвежда само ако е настроено на автоматично възпроизвеждане (повече за това по-късно) и потребителят не може да види как да го спре, да го направи на пауза, да контролира силата на звука или да премине на определена позиция във видеото.

За да покажете вградените контроли, можете да добавите controlsатрибута:

Контролите могат да имат персонализиран скин.

Можете да посочите MIME типа на видео файла, като използвате typeатрибута. Ако не е зададен, браузърът ще се опита автоматично да го определи:

Видео файлът по подразбиране не се възпроизвежда автоматично. Добавете autoplayатрибута за автоматично възпроизвеждане на видеоклипа:

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

В loopатрибута рестартира видео прожектира в 0:00 ако комплект; в противен случай, ако не присъства, видеото спира в края на файла:

Можете да зададете изображение, което да бъде изображението на плаката:

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

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

С помощта на JavaScript можете да слушате различни събития, случващи се на даден videoелемент, най-основните от които са:

  • play когато файлът започне да се възпроизвежда
  • pause когато видеото е на пауза
  • playing когато видеото се възобнови от пауза
  • ended когато е достигнат краят на видео файла

РАМКИ

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

Технически, iframe създава нов вложен контекст на сърфиране. Това означава, че всичко в iframe не пречи на родителската страница и обратно. JavaScript и CSS не "изтичат" към / от iframes.

Много сайтове използват iframes за изпълнение на различни неща. Може да сте запознати с Codepen, Glitch или други сайтове, които ви позволяват да кодирате в една част на страницата, и виждате резултата в поле. Това е рамка.

Създавате такъв по този начин:

Можете да заредите и абсолютен URL адрес:

Можете да зададете набор от параметри за ширина и височина (или да ги зададете с помощта на CSS), в противен случай iframe ще използва настройките по подразбиране, поле 300x150 пиксела:

Srcdoc

В srcdocатрибут позволява да определите някои вградени HTML да се покаже. Това е алтернатива src, но скорошна и неподдържана в Edge 18 и по-ниски, както и в IE:

Пясъчник

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

Ако го пропуснем, всичко е позволено:

Ако го зададем на "", нищо не е позволено:

Можем да изберем какво да разрешим, като добавим опции в sandboxатрибута. Можете да разрешите множество такива, като добавите интервал между тях. Ето непълен списък с опциите, които можете да използвате:

  • allow-forms: позволява да се подават формуляри
  • allow-modalsпозволяват отваряне на модални прозорци, включително извикване alert()в JavaScript
  • allow-orientation-lock позволяват да се заключи ориентацията на екрана
  • allow-popupsпозволяват изскачащи прозорци, използване window.open()и target="_blank"връзки
  • allow-same-origin третирайте зареждания ресурс като същия произход
  • allow-scripts позволява на заредения iframe да изпълнява скриптове (но не и да създава изскачащи прозорци).
  • allow-top-navigation дава достъп до iframe до контекста на сърфиране от най-високо ниво

Позволява

Понастоящем експериментално и поддържано само от браузъри, базирани на Chromium, това е бъдещето на споделянето на ресурси между родителския прозорец и iframe.

Той е подобен на sandboxатрибута, но ни позволява да разрешим специфични функции, включително:

  • accelerometer дава достъп до интерфейса на акселерометъра на API на сензорите
  • ambient-light-sensor дава достъп до интерфейса на API за сензори AmbientLightSensor
  • autoplay позволява автоматично възпроизвеждане на видео и аудио файлове
  • camera позволява достъп до камерата от API на getUserMedia
  • display-capture позволява достъп до съдържанието на екрана с помощта на API на getDisplayMedia
  • fullscreen позволява достъп до режим на цял екран
  • geolocation позволява достъп до API за геолокация
  • gyroscope дава достъп до интерфейса на Sensors API Gyroscope
  • magnetometer дава достъп до интерфейса на сензорния API магнитометър
  • microphone дава достъп до микрофона на устройството с помощта на API getUserMedia
  • midi позволява достъп до уеб MIDI API
  • payment дава достъп до API за заявка за плащане
  • speaker позволява достъп до възпроизвеждане на аудио през високоговорителите на устройството
  • usb дава достъп до WebUSB API.
  • vibrate дава достъп до API за вибрации
  • vr дава достъп до WebVR API

Препращащ

При зареждане на вградена рамка браузърът му изпраща важна информация за това кой я зарежда в Refererзаглавката (забележете сингъла r, печатна грешка, с която трябва да живеем).

Погрешното изписване на препращащия източник възниква в първоначалното предложение на компютърния учен Филип Халам-Бейкър за включване на полето в спецификацията на HTTP. Погрешното изписване е заложено в момента на включването му в документа за стандарти за искане за коментари RFC 1945

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

  • no-referrer-when-downgrade това е по подразбиране и не изпраща препращащото устройство, когато текущата страница се зарежда през HTTPS и iframe се зарежда на HTTP протокола
  • no-referrer не изпраща заглавката на препращащия
  • origin препращащият се изпраща и съдържа само произхода (порт, протокол, домейн), а не изход + път, който е по подразбиране
  • origin-when-cross-originпри зареждане от един и същ източник (порт, протокол, домейн) във вградената рамка, препращащият се изпраща в пълната му форма (произход + път). В противен случай се изпраща само произходът
  • same-origin препращащият се изпраща само при зареждане от един и същ произход (порт, протокол, домейн) в iframe
  • strict-originизпраща произхода като препращащ, ако текущата страница е заредена през HTTPS и iframe също се зарежда на протокола HTTPS. Не изпраща нищо, ако iframe е зареден през HTTP
  • strict-origin-when-cross-originизпраща началото + път като препращащ, когато работи върху същия произход. Изпраща произхода като препращащ, ако текущата страница е заредена през HTTPS и iframe също се зарежда на протокола HTTPS. Не изпраща нищо, ако iframe е зареден през HTTP
  • unsafe-url: изпраща началото + път като препращащ, дори когато зарежда ресурси от HTTP и текущата страница се зарежда през HTTPS

ОБРАЗИ

Изображенията могат да се показват с помощта на imgмаркера.

Този маркер приема srcатрибут, който използваме за задаване на източника на изображението:

Можем да използваме широк набор от изображения. Най-често срещаните са PNG, JPEG, GIF, SVG и напоследък WebP.

Стандартът HTML изисква altатрибут да присъства, за да опише изображението. Това се използва от екранни четци, а също и от ботове на търсачките:

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

В figureмаркер

В figureмаркер често се използва заедно с imgмаркер.

figureе семантичен маркер, често използван, когато искате да покажете изображение с надпис. Използвате го по следния начин:

 A nice dog  

В figcaptionмаркер увива надписите.

Отзивчиви изображения с използване srcset

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

Ето пример, където даваме 4 допълнителни изображения за 4 различни размера на екрана:

В srcsetизползваме wмярката, за да посочим ширината на прозореца.

Тъй като правим това, ние също трябва да използваме sizesатрибута:

В този пример (max-width: 500px) 100vw, (max-width: 900px) 50vw, 800pxнизът в sizesатрибута описва размера на изображението във връзка с прозореца, с множество условия, разделени с точка и запетая.

Условието на носителя max-width: 500pxзадава размера на изображението в съответствие с ширината на прозореца за гледане. Накратко, ако размерът на прозореца е <500px, той изобразява изображението на 100% от размера на прозореца.

Ако размерът на прозореца е по-голям, но < 900px, той изобразява изображението на 50% от размера на прозореца.

И ако е дори по-голям, той прави изображението на 800px.

Най- vwмерна единица за измерване може да бъде ново за вас, и по-кратко може да се каже, че едно vwе 1% от ширината на прозореца, така че 100vwе 100% от ширината на прозореца.

Полезен уебсайт за генериране на srcsetи постепенно по-малки изображения е //responsivebreakpoints.com/.

В pictureмаркер

HTML също ни дава pictureмаркера, който върши много подобна работа srcsetи разликите са много фини.

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

Най-добрият случай на употреба, който открих, е при обслужване на WebP изображение, което е формат, който все още не се поддържа широко. В pictureмаркера посочвате списък с изображения и те ще бъдат използвани по ред, така че в следващия пример браузърите, които поддържат WebP, ще използват първото изображение и, ако не, ще се върнат към JPG:

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

В sourceтага вътре pictureможете да добавите mediaатрибут за задаване на медийни заявки.

Примерът, който следва вид работи като горния пример с srcset:

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

В pictureмаркер е от скоро, но сега е подкрепена от всички основни браузъри, с изключение на Opera Mini и IE (всички версии).

ДОСТЪПНОСТ

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

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

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

Какво ще стане, ако човек не може да види страницата ви, но въпреки това иска да използва съдържанието й? Първо, как правят това? Те не могат да използват мишката, те използват нещо, наречено екранен четец . Не е нужно да си представяте това. Можете да изпробвате едно сега: Google предоставя безплатното разширение ChromeVox за Chrome. Достъпността също трябва да се грижи за позволяването на инструменти за лесно избиране на елементи или навигиране през страниците.

Уеб страниците и уеб приложенията не винаги са изградени с достъпност като една от първите им цели и може би версия 1 е пусната недостъпна, но е възможно да се направи уеб страница достъпна след факта. По-рано е по-добре, но никога не е късно.

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

Какво означава това да направим HTML достъпен? Позволете ми да илюстрирам основните неща, за които трябва да помислите.

Забележка: има няколко други неща, за които трябва да се погрижите, които могат да отидат в темата на CSS, като цветове, контраст и шрифтове. Или как да направя SVG изображения достъпни. Тук не говоря за тях.

Използвайте семантичен HTML

Семантичният HTML е много важен и това е едно от основните неща, за които трябва да се грижите. Позволете ми да илюстрирам няколко често срещани сценария.

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

h1 h2 h3 h2 h2 h3 h4 

Използвайте strongи emвместо bи i. Визуално изглеждат еднакво, но първите 2 имат повече значение, свързано с тях. bи iса по-визуални елементи.

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

Таблицата трябва да има captionмаркер, който описва нейното съдържание:

 Dogs age 
DogAge
Roger7

Използвайте altатрибути за изображения

Всички изображения трябва да имат altетикет, описващ съдържанието на изображението. Това не е само добра практика, това се изисква от HTML стандарта и вашият HTML без него не е валидиран.

Добре е и за търсачките, ако това е стимул за вас да го добавите.

Използвайте roleатрибута

В roleатрибута ви позволява да зададете специфични роли на различните елементи в страницата си.

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

Това е много и за пълната справка на всеки от тях ви давам тази MDN връзка. Но не е нужно да присвоявате роля на всеки елемент на страницата. Екранните четци могат да правят заключения от HTML маркера в повечето случаи. Например не е нужно да се добави роля маркер към семантични тагове като nav, button, form.

Нека вземем navпримера за етикет. Можете да го използвате, за да определите навигацията по страни по следния начин:

  • Home
  • Blog

Ако сте били принудени да използвате divтаг вместо nav, бихте използвали navigationролята:

  • Home
  • Blog

И така, тук имате практически пример: roleсе използва за присвояване на значима стойност, когато тагът вече не предава значението.

Използвайте tabindexатрибута

В tabindexатрибута ви позволява да променяте реда, по който натискане на клавиша Tab избира "избираеми" елементи. По подразбиране само връзките и елементите на формуляра са „избираеми“ чрез навигация с помощта на клавиша Tab (и не е необходимо да tabindexги задавате ).

Добавянето tabindex="0"прави елемент избираем:

 ... 

Използването tabindex="-1"вместо това премахва елемент от тази навигация, базирана на раздели, и може да бъде доста полезно.

Използвайте ariaатрибутите

ARIA е съкращение, което означава Accessible Rich Internet Applications и определя семантиката, която може да се приложи към елементи.

aria-label

Този атрибут се използва за добавяне на низ за описание на елемент.

Пример:

...

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

aria-labelledby

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

Ако знаете как inputелемент може да бъде свързан с labelелемент, това е подобно.

Предаваме идентификатора на елемента, който описва текущия елемент.

Пример:

The description of the product

...

aria-describedby

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

Пример:

Pay now Clicking the button will send you to our Stripe form! 

Използвайте aria-hidden, за да скриете съдържанието

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

Добавянето на "атрибута ще каже на екранните четци да игнорират този елемент.

Къде да научите повече

Това е само въведение в темата. За да научите повече, препоръчвам следните ресурси:

  • //www.w3.org/TR/WCAG20/
  • //webaim.org
  • //developers.google.com/web/fundamentals/accessibility/

Стигнахте до края на наръчника по HTML.

Щракнете тук, за да получите PDF / ePub / Mobi версия на тази книга за четене офлайн !