Что такое инлайновые элементы?
В HTML строчные элементы это те, которые занимают только то пространство, которое ограничено тегами, определяющими строчный элемент (необходимое для отображения их содержимого) и не нарушая потока содержимого (не требующее новой строки после каждого элемента).
Как правило, inline элементы могут содержать только данные и другие встроенные элементы. Вы не можете помещать элементы блока внутри встроенных элементов.
В HTML строчные элементы это те, которые занимают только то пространство, которое ограничено тегами, определяющими строчный элемент (необходимое для отображения их содержимого) и не нарушая потока содержимого (не требующее новой строки после каждого элемента).
Как правило, inline элементы могут содержать только данные и другие встроенные элементы. Вы не можете помещать элементы блока внутри встроенных элементов.
В чем заключаются отличие чекбокса от радио кнопок? Как связать радиокнопки в группу?
Чекбоксов всегда можно выбрать несколько, даже если они относятся к одному вопросу. Т.е. выбрать один, несколько, все или даже не выбрать ни одного. Семантически чекбокс спрашивает согласны ли вы конкретно с тем что в нём написано или нет. Если да - отмечайте галочкой.
А радиобаттон, если он относится к одному вопросу/полю, всегда можно выбрать только один. (Их может быть несколько групп, но выбрать можно только один в каждой группе.) Семантически радиобаттон спрашивает с каким из вариантом в данной группе вы согласны больше всего.
Чтобы связать радиокнопки в группу, нужно задать им аттрибут name с одинаковым значением.
Чекбоксов всегда можно выбрать несколько, даже если они относятся к одному вопросу. Т.е. выбрать один, несколько, все или даже не выбрать ни одного. Семантически чекбокс спрашивает согласны ли вы конкретно с тем что в нём написано или нет. Если да - отмечайте галочкой.
А радиобаттон, если он относится к одному вопросу/полю, всегда можно выбрать только один. (Их может быть несколько групп, но выбрать можно только один в каждой группе.) Семантически радиобаттон спрашивает с каким из вариантом в данной группе вы согласны больше всего.
Чтобы связать радиокнопки в группу, нужно задать им аттрибут name с одинаковым значением.
😣 На рынке жёсткий дефицит фронтендеров
Хочешь быстро влиться во фронтенд и через пару лет хвастаться ЗП > 200к?
Вот план для старта:
1. Веб-верстка - 3 месяца
2. JavaScript - 3 месяца
3. Система контроля версий GIT - 1 месяц
4. Онлайн-сессии по вебразработке - 1 месяц
5. Vue.js - 2 месяца
6. React.js - 2 месяца
7. Защита дипломного проекта
8. 💰Трудоустройство💰
Это программа курса Профессия Frontend разработчик от Skillbox.
Да - трудоустройство они тоже берут на себя.
Тут можно получить курс со скидкой 50% 👇
Хочешь быстро влиться во фронтенд и через пару лет хвастаться ЗП > 200к?
Вот план для старта:
1. Веб-верстка - 3 месяца
2. JavaScript - 3 месяца
3. Система контроля версий GIT - 1 месяц
4. Онлайн-сессии по вебразработке - 1 месяц
5. Vue.js - 2 месяца
6. React.js - 2 месяца
7. Защита дипломного проекта
8. 💰Трудоустройство💰
Это программа курса Профессия Frontend разработчик от Skillbox.
Да - трудоустройство они тоже берут на себя.
Тут можно получить курс со скидкой 50% 👇
👎1
Какое значение свойства display у элемента button по умолчанию?
Anonymous Quiz
26%
inline
33%
inline-block
35%
block
6%
none
Что такое тег label и как с ним работать?
label определяет текстовую метку для элемента input. По своему виду метка ничем не отличается от обычного текста, однако она позволяет пользователю выбрать элемент формы простым кликом по тексту, расположенному внутри элемента label, а не по самому элементу input. Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега label. Значение атрибута for должно быть эквивалентно значению атрибута id того элемента формы, к которому будет относится метка.
Атрибутом "for" можно не пользоваться, если элемент input будет находиться внутри элемента label.
Пример
label определяет текстовую метку для элемента input. По своему виду метка ничем не отличается от обычного текста, однако она позволяет пользователю выбрать элемент формы простым кликом по тексту, расположенному внутри элемента label, а не по самому элементу input. Чтобы определить к какому элементу формы относится текущая метка, необходимо использовать атрибут for тега label. Значение атрибута for должно быть эквивалентно значению атрибута id того элемента формы, к которому будет относится метка.
Атрибутом "for" можно не пользоваться, если элемент input будет находиться внутри элемента label.
Пример
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male">
<br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female">
</form>
<p>или тоже самое только без использования атрибута for</p>
<form>
<label>Male<input type="radio" name="sex" id="male"></label>
<br>
<label>Female<input type="radio" name="sex" id="female"></label>
</form>Изучаем программирование на JavaScript
Если до этого момента вы не написали ни строчки кода, не беда – эта книга поможет в доступной форме войти в курс дела. Вы узнаете, почему браузеры по-разному реагируют на программы JavaScript и как писать универсальный, понятный всем код. Учебник подойдёт начинающим программистам – формат не покажется скучным или однообразным.
Если до этого момента вы не написали ни строчки кода, не беда – эта книга поможет в доступной форме войти в курс дела. Вы узнаете, почему браузеры по-разному реагируют на программы JavaScript и как писать универсальный, понятный всем код. Учебник подойдёт начинающим программистам – формат не покажется скучным или однообразным.
Д. Крокфорд – Как устроен JavaScript
Специалист в области JS в доходчивой форме объясняет основы и устройство языка: имена, числа, логические значения, символы и прочее. У всех новичков бывают трудности с типизацией – эта книга поможет научиться их избегать. В конце вас ждут объектно-ориентированный подход, программирование без классов и функции высшего порядка.
Специалист в области JS в доходчивой форме объясняет основы и устройство языка: имена, числа, логические значения, символы и прочее. У всех новичков бывают трудности с типизацией – эта книга поможет научиться их избегать. В конце вас ждут объектно-ориентированный подход, программирование без классов и функции высшего порядка.
Как изучить React и построить международную карьеру?
🔥Максим Иванов, разработчик Minecraft и Battlefield, запускает авторский курс по React.
Курс стартует 1 ноября, но уже можно начать учиться бесплатно не выходя из Телеграма:
⭐️Как сделать клон Minecraft на React (делаем 3d-игру на компонентах)
⭐️Как делать формы любой сложности на React и react-hook-form
⭐️Как освоить реакт быстро, не тратя время на булщит? 💩
⭐️Как попасть в интересный проект? Самая короткая дорога от hello world до удаленки за баксы 🔥
⭐️Как справиться с застреванием в процессе обучения и в карьере
💥Инсайт: Как всех обогнать. Прокачиваем карьеру. Как в этом помогает блог и привычка описывать свои шаги.📝
Чтобы получить доступ материалам, переходи в наш Телеграм-бот. Он заботливо выдаст все видео.
🔥Максим Иванов, разработчик Minecraft и Battlefield, запускает авторский курс по React.
Курс стартует 1 ноября, но уже можно начать учиться бесплатно не выходя из Телеграма:
⭐️Как сделать клон Minecraft на React (делаем 3d-игру на компонентах)
⭐️Как делать формы любой сложности на React и react-hook-form
⭐️Как освоить реакт быстро, не тратя время на булщит? 💩
⭐️Как попасть в интересный проект? Самая короткая дорога от hello world до удаленки за баксы 🔥
⭐️Как справиться с застреванием в процессе обучения и в карьере
💥Инсайт: Как всех обогнать. Прокачиваем карьеру. Как в этом помогает блог и привычка описывать свои шаги.📝
Чтобы получить доступ материалам, переходи в наш Телеграм-бот. Он заботливо выдаст все видео.
Что такое БЭМ и в чем его польза?
БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».
Что такое Блок?
Это Функционально независимый компонент страницы, который может быть повторно использован. В HTML блоки представлены атрибутом class.
Что такое элемент?
Составная часть блока, которая не может использоваться в отрыве от него.
Элементы можно вкладывать друг в друга.
Допустима любая вложенность элементов.
Элемент — всегда часть блока, а не другого элемента
БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».
Что такое Блок?
Это Функционально независимый компонент страницы, который может быть повторно использован. В HTML блоки представлены атрибутом class.
Что такое элемент?
Составная часть блока, которая не может использоваться в отрыве от него.
Элементы можно вкладывать друг в друга.
Допустима любая вложенность элементов.
Элемент — всегда часть блока, а не другого элемента
Что такое data-атрибуты, и привести примеры, когда они полезны?
data - атрибуты позволяют хранить дополнительную информацию в стандартных элементах HTML
любой атрибут, чьё имя начинается с data-, является data - атрибутом
Также можно использовать селекторы атрибутов в CSS для изменения стилей в соответствии с данным:
data - атрибуты позволяют хранить дополнительную информацию в стандартных элементах HTML
любой атрибут, чьё имя начинается с data-, является data - атрибутом
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
</article>
Чтобы получить data-атрибут можно взять свойство объекта dataset с именем, равным части имени атрибута после data- (обратите внимание, что дефисы в имени преобразуются в camelCase). var article = document.getElementById('electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"
Каждое свойство является строкой и может быть прочитано и записано.Также можно использовать селекторы атрибутов в CSS для изменения стилей в соответствии с данным:
article[data-columns='3']{ width: 400px; }
article[data-columns='4']{ width: 600px; }