Frontend basics
-
Upload
eleksdev -
Category
Technology
-
view
1.109 -
download
0
Transcript of Frontend basics
eleks.com eleks.com
HTML/CSS: основи
Поговоримо про Фронт-енд: що це? HTML CSS Інструменти розробника
eleks.com
Фронт-енд
eleks.com
HTML
HTML: HyperText Markup Language наслідується від SGML описується тегами (елементи в кутових
дужках)
HTML != XML не чутлива до регістру змішані правила закривання
HTML: Document Object Model (DOM) ієрархія елементів також граф об’єктів
HTML документ• DOCTYPE – тип
документа• html – опис
документа• head – дані про
документ• title – назва
документа• body – візуальний
вміст• h1 - заголовок• p - параграф
HTML: теги <div></div> - контейнер <a href=“http://someurl”></a> - посилання <img src=“path/to/image/” alt=“text” /> -
картинка <ul><li></li>…<li></li></ul> -
невпорядкований список <ol><li></li>…<li></li></ol> -
впорядкований список <table><tr><td></td></tr></table> - таблиці
Теги Парні (<div></div>, <p></p>, <a></a>) Непарні (<img />, <br />, <hr />)
Теги Лінійні (<span></span>, <img />, <a></a>) Блокові (<div></div>, <p></p>)
HTML приклад сторінки (колись)
HTML приклад сторінки (тепер)
HTML5: теги header nav section footer article aside ...
HTML: форми
HTML форми: основні теги label input textarea button
HTML форми: приклад
eleks.com
CSS
CSS: підходи Властивість style
Тег style
Каскадні таблиці стилів (CSS) – окремий файл
CSS: підключення до сторінки
CSS: правила
CSS: id, class селектори
CSS: селектори за атрибутами[disabled] вибирає усі елементи з атрибутом "disabled"[type='button'] вибирає усі елементи з типом a "button".[class~=key] вибирає усі елементи з класом "key" (але не e.g. "keyed", "monkey", "buckeye"). Еквівалентно .key.[lang|=es] вибирає усі елементи з атрибутом lang, що починається з “es” (ціле слово). Включає "es-MX".[title*="example" i] вибирає усі елементи з атрибутом title, що містить "example", ігноруючи регістр. a[href^="https://"] вибирає усі посилання з атрибутом href, що починається з https:// (не ціле слово).img[src$=".png"] вибирає усі картинки з атрибутом src, що закінчуються на “.png”
CSS: селектори псевдо-класівselector:pseudo-class { property: value;}
• :link• :visited• :active• :hover• :focus• :first-child• :last-child• :nth-child• :nth-last-child• :nth-of-type• :first-of-type• :last-of-type• :empty• :target• :checked• :enabled• :disabled
CSS: селектори, що базуються на відношенняхСелектор Вибрані елементи
A E Усі Е елементи, що є нащадками елемента А (діти, діти дітей…)
A > E Усі Е елементи, що є прямими нащадками елемента А (тільки діти)
E:first-child Будь-який елемент Е, що є першою дитиною свого батька
B + E Будь-який елемент Е, що є наступним братом елемента В
CSS: box-model
CSS: position Static – значення по замовчуванню, елементи
відображаються послідовно один за одним Relative – відображається як static, але
зміщений зі своєї позиції Absolute – елемент відображається абсолютно
відносно першого нестатичного предка Fixed – відображається як absolute, та не
змінює позицію при скролі.
CSS: display Block Inline Inline-block …
CSS: float Left – елемент займає крайню можливу ліву
позицію на лінії в якій він мав би з’явитись Right - елемент займає крайню можливу праву
позицію на лінії в якій він мав би з’явитись Clear – змушує елементи з’являтись під
плаваючими (floated) елементами
CSS: горизонтальне центрування для inline та inline-*
для block
CSS: вертикальне центрування для block
CSS: flexbox
eleks.com
Інструменти розробника
Chrome Developer Tools: DOM
Chrome Developer Tools: Network
Chrome Developer Tools: Sources
Chrome Developer Tools: Console
eleks.com
Питання
eleks.com
Inspired by Technology.Driven by Value.
Useful https://habrahabr.ru/post/202408/ (Как
сверстать веб-страницу. Часть 1) https://developer.mozilla.org/en/
(mozila developer network) http://caniuse.com/ (feature detection) https://www.sublimetext.com/ (text
editor)