Ширина div по контенту
@Invis1ble2, Если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом).
29 окт 2014 в 14:10
5 ответов 5
Сортировка: Сброс на вариант по умолчанию
Как уже было сказано либо inline-block либо inline, если div-ву нужны блочные свойства,то display: inline-block; , но в этом случае необходимо задавать еще vertical-align: top; что-бы блок не съезжал вниз при добавлении контента. А вообще сами можете потренироваться, почти в каждом браузере есть отладчик для разработчиков, в FireFox пишите атрибут и по очереди прокликиваете все значения, этот вариант просто незаменим для новичков, можно наглядно всё увидеть, как элементы ведут себя.
Отслеживать
1,087 3 3 золотых знака 15 15 серебряных знаков 40 40 бронзовых знаков
ответ дан 25 июл 2011 в 19:48
1,279 16 16 серебряных знаков 41 41 бронзовый знак
спасибо за советы, буду пробовать дело в том, что я действительно новичек в верстке
25 июл 2011 в 20:00
Эту задачу можно решить несколькими способами:
1 — С помощью display: inline-block; :
#l0_b1
тут контент с неизвестной шириной 2 — С помощью display: block; :
#l0_b1
тут контент с неизвестной шириной Используя float , не забывайте про clear: both
3 — С помощью display: inline-flex; :
#l0_b1
тут контент с неизвестной шириной 4 — С помощью display: table; :
#l0_b1
тут контент с неизвестной шириной И блоки, и флексы, и таблицы могут оборачивать блок по его ширине. В зависимости от вашей общей задачи, вы можете выбрать самый подходящий вам вариант.
HTML таблицы основы
Этот раздел познакомит вас с таблицами HTML, представив самые базовые понятия — строки и ячейки, заголовки, слияние строк и столбцов, а также объединение всех ячеек в столбце в целях стилизации.
| Начальные условия: | Знание основ HTML (читайте Введение в HTML — Introduction to HTML). |
|---|---|
| Цель: | Общее знакомство с таблицами HTML. |
Что такое таблица ?
Таблица — это структурированный набор данных, состоящий из строк и столбцов (табличных данных). Таблицы позволяют быстро и легко посмотреть значения, показывающие некоторую взаимосвязь между различными типами данных, например — человек и его возраст, или расписание в плавательном бассейне.
Люди постоянно используют таблицы, причём уже давно, как показывает документ по переписи в США, относящийся к 1800 году:
Так что не удивительно, что создатели HTML включили в него средства для структурирования и представления табличных данных в сети.
Как работает таблица?
Смысл таблицы в том, что она жёсткая. Информацию легко интерпретировать, визуально сопоставляя заголовки строк и столбцов. Например, посмотрите на приведённую ниже таблицу и найдите единственное личное местоимение, используемое в третьем лице , с полом ♀, выступающее в качестве объекта в предложении. Ответ можно найти, сопоставив соответствующие заголовки столбцов и строк.
| Субъект | Объект | |||
|---|---|---|---|---|
| Единствен. числ. | 1 Лицо | Я | меня | |
| 2 Лицо | ты | тебя | ||
| 3 Лицо | ♂ | он | его | |
| ♀ | она | её | ||
| o | оно | его | ||
| Множ.числ. | 1 Лицо | мы | нас | |
| 2 Лицо | вы | вас | ||
| 2 Лицо | они | их | ||
Если правильно представить таблицу HTML, интерпретировать её данные смогут даже люди, имеющие проблемы со зрением.
Оформление таблиц
Исходный код HTML (HTML source code) вышеприведённой таблице есть в GitHub; посмотрите его и живой пример (look at the live example)! Вы заметите, что таблица там выглядит иначе — это потому, что на сайте MDN к этим данным была применена таблица стилей, а приведённый в GitHub пример информации о стиле не имеет.
Не питайте ложных иллюзий — чтобы эффективно представлять таблицы в веб, необходимо придать им хорошую структуру в HTML и применить к ним таблицы стилей (CSS). В данном разделе мы сфокусируемся на HTML, чтобы узнать о том, что касается CSS, вам надо обратиться к статье Стилизация таблиц.
В этом разделе мы не фокусируемся на CSS, но всё же дали простейшую таблицу стилей CSS, чтобы сделать таблицы более читабельными. Эту таблицу стилей можно найти здесь, можно также использовать шаблон HTML, применяющий эту стаблицу стилей — вместе они дадут вам хорошую основу для экспериментов с таблицами HTML.
Примечание: Посмотрите также таблицу personal_pronouns с применённым к ней стилем, чтобы получить представление о том, как она выглядит.
Когда не надо использовать таблицы HTML?
HTML-таблицы следует использовать для табличных данных — это то, для чего они предназначены. К сожалению, многие используют таблицы HTML для оформления веб-страниц, например, одна строка для заголовка, одна для содержимого, одна для сносок, и тому подобное. Подробнее об этом можно узнать в разделе Вёрстка на Начальном обучающем модуле доступности. Это происходило из-за плохой поддержки CSS в разных браузерах; в наше время такое встречается гораздо реже, но иногда всё же попадается.
Короче говоря, использование таблиц в целях оформления вместо методов CSS является плохой идеей по следующим причинам :
- Таблицы, используемые для оформления, уменьшают доступность страниц для людей, имеющих проблемы со зрением: Скринридеры (Screenreaders (en-US)), используемые ими, интерпретируют HTML-теги и читают содержимое пользователю. Поскольку таблицы не являются средством для представления структуры таблицы, и разметка получается сложнее, чем при использовании методов CSS, скринридеры вводят пользователей в заблуждение.
- Таблицы создают путаницу тегов: Как уже упоминалось, оформление страниц с помощью таблиц даёт более сложную структуру разметки, чем специально предназначенные для этого методы. Соответственно, такой код труднее писать, поддерживать и отлаживать.
- Таблицы не реагируют автоматически на тип устройства: У надлежащих контейнеров (например, , , , или ) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходимо принимать дополнительные меры.
Упражнение: ваша первая таблица
Итак, мы уже достаточно говорили о теории, теперь возьмём конкретный пример и построим таблицу.
- Прежде всего, создайте локальную копию blank-template.html и minimal-table.css в новой папке на вашем компьютере.
- Содержимое любой таблицы заключается между двумя тегами : (en-US). Добавьте их в тело HTML.
- Самым маленьким контейнером в таблице является ячейка, она создаётся элементом (‘td’ — сокращение от ‘table data’). Введите внутри тегов table следующее:
td>Hi, I'm your first cell.td>
td>Hi, I'm your first cell.td> td>I'm your second cell.td> td>I'm your third cell.td> td>I'm your fourth cell.td>
tr> td>Hi, I'm your first cell.td> td>I'm your second cell.td> td>I'm your third cell.td> td>I'm your fourth cell.td> tr>
В результате получится таблица, которая будет выглядеть примерно так:
| Hi, I’m your first cell. | I’m your second cell. | I’m your third cell. | I’m your fourth cell. |
|---|---|---|---|
| Second row, first cell. | Cell 2. | Cell 3. | Cell 4. |
Примечание: Этот пример можно также найти на GitHub под названием simple-table.html (see it live also).
Добавление заголовков с помощью элементов
Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как «Person» и «Age» в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмём следующий пример. Сначала исходный код:
table> tr> td> td> td>Knockytd> td>Flortd> td>Ellatd> td>Juantd> tr> tr> td>Breedtd> td>Jack Russelltd> td>Poodletd> td>Streetdogtd> td>Cocker Spanieltd> tr> tr> td>Agetd> td>16td> td>9td> td>10td> td>5td> tr> tr> td>Ownertd> td>Mother-in-lawtd> td>Metd> td>Metd> td>Sister-in-lawtd> tr> tr> td>Eating Habitstd> td>Eats everyone's leftoverstd> td>Nibbles at foodtd> td>Hearty eatertd> td>Will eat till he explodestd> tr> table>
Теперь как выглядит таблица:
| Knocky | Flor | Ella | Juan | |
|---|---|---|---|---|
| Breed | Jack Russell | Poodle | Streetdog | Cocker Spaniel |
| Age | 16 | 9 | 10 | 5 |
| Owner | Mother-in-law | Me | Me | Sister-in-law |
| Eating Habits | Eats everyone’s leftovers | Nibbles at food | Hearty eater | Will eat till he explodes |
Проблема в том, что, хотя вы и можете представить, о чем идёт речь, ссылаться на эти данные не так легко, как хотелось бы. Лучше, чтобы строка и столбец с заголовками как-то выделялись.
Упражнение: заголовки
Попробуем улучшить эту таблицу.
Примечание: Законченный пример можно найти на dogs-table-fixed.html в GitHub (посмотрите живой пример).
Для чего нужны заголовки?
Мы уже частично ответили на этот вопрос — когда заголовки выделяются, легче искать данные и таблица выглядит лучше.
Примечание: По умолчанию к заголовкам таблицы применяется определённый стиль — они выделены жирным шрифтом и выровнены по центру, даже если вы не задавали для них стиль специально.
Заголовки дают дополнительное преимущество — вместе с атрибутом scope (который мы будем изучать в следующей статье) они помогают улучшить связь каждого заголовка со всеми данными строки или столбца одновременно, что довольно полезно
Слияние нескольких строк или столбцов
Иногда нам нужно, чтобы ячейки распространялись на несколько строк или столбцов. Возьмём простой пример, в котором приведены имена животных. Иногда бывает нужно вывести имена людей рядом с именами животных. А иногда это не требуется, и тогда мы хотим, чтобы имя животного занимало всю ширину.
Исходная разметка выглядит так:
table> tr> th>Animalsth> tr> tr> th>Hippopotamusth> tr> tr> th>Horseth> td>Maretd> tr> tr> td>Stalliontd> tr> tr> th>Crocodileth> tr> tr> th>Chickenth> td>Cocktd> tr> tr> td>Roostertd> tr> table>
Но результат не такой, как хотелось бы:
| Animals | |
|---|---|
| Hippopotamus | |
| Horse | Mare |
| Stallion | |
| Crocodile | |
| Chicken | Cock |
| Rooster |
Нужно, чтобы «Animals», «Hippopotamus» и «Crocodile» распространялись на два столбца, а «Horse» и «Chicken» — на две строки. К счастью, табличные заголовки и ячейки имеют атрибуты colspan и rowspan , которые позволяют это сделать. Оба принимают безразмерное числовое значение, которое равно количеству строк или столбцов, на которые должны распространяться ячейки. Например, colspan=»2″ распространяет ячейку на два столбца.
Воспользуемся colspan и rowspan чтобы улучшить таблицу.
- Сначала создайте локальную копию animals-table.html и minimal-table.css в новой папке на вашем компьютере. Код HTML содержит пример с животными, который вы уже видели выше.
- Затем используйте атрибут colspan чтобы распространить «Animals», «Hippopotamus» и «Crocodile» на два столбца.
- Наконец, используйте атрибут rowspan чтобы распространить «Horse» и «Chicken» на две строки.
- Сохраните код и откройте его в браузере, чтобы увидеть улучшения.
Примечание: Законченный пример можно посмотреть в animals-table-fixed.html на GitHub (живой пример).
Стилизация столбцов
И последняя возможность, о которой рассказывается в данной статье. HTML позволяет указать, какой стиль нужно применять к целому столбцу данных сразу — для этого применяют элементы и (en-US) . Их ввели, поскольку задавать стиль для каждой ячейки в отдельности или использовать сложный селектор вроде :nth-child() (en-US) было бы слишком утомительно.
Возьмём простой пример:
table> tr> th>Data 1th> th style="background-color: yellow">Data 2th> tr> tr> td>Calcuttatd> td style="background-color: yellow">Orangetd> tr> tr> td>Robotstd> td style="background-color: yellow">Jazztd> tr> table>
| Data 1 | Data 2 |
|---|---|
| Calcutta | Orange |
| Robots | Jazz |
table> colgroup> col /> col style="background-color: yellow" /> colgroup> tr> th>Data 1th> th>Data 2th> tr> tr> td>Calcuttatd> td>Orangetd> tr> tr> td>Robotstd> td>Jazztd> tr> table>
Мы определяем два «стилизующих столбца». Мы не применяем стиль к первому столбцу, но пустой элемент ввести необходимо — иначе к первому столбцу не будет применён стиль.
Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто ввести один элемент с атрибутом span, таким образом:
colgroup> col style="background-color: yellow" span="2" /> colgroup>
Подобно colspan и rowspan , span принимает безразмерное числовое значение, указывающее, к какому количеству столбцов нужно применить данный стиль.
Упражнение: colgroup и col
Теперь попробуйте сами.
Ниже приведена таблица уроков по языкам. В пятницу (Friday) новый класс целый день изучает голландский (Dutch), кроме того, во вторник (Tuesday) и четверг (Thursdays) есть занятия по немецкому (German). Учительница хочет выделить столбцы, соответствующие дням, когда она преподаёт.
| Mon | Tues | Wed | Thurs | Fri | Sat | Sun |
|---|---|---|---|---|---|---|
| 1st period | English | German | Dutch | |||
| 2nd period | English | English | German | Dutch | ||
| 3rd period | German | German | Dutch | |||
| 4th period | English | English | Dutch |
Заново создайте таблицу, проделав указанные ниже действия.
Посмотрите, что у вас получилось. Если застрянете, или захотите себя проверить, можете посмотреть нашу версию в timetable-fixed.html (посмотрите живой пример).
Итог
Здесь приведены практически все базовые сведения о таблицах HTML. В следующей статье вы получите более продвинутые сведения на эту тему.
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Цвета в вебе
Самый простой способ указания цвета в вебе — ключевые слова. Используются английские названия цветов. Самые популярные базовые цвета:
- Чёрный black
- Белый white
- Красный red
- Зелёный green
- Синий blue
На самом деле ключевых слов для цветов очень много. Нет особого смысла их все запоминать. Всегда можно заглянуть в таблицу цветов.
| IndianRed | LightCoral | Salmon | DarkSalmon |
| LightSalmon | Crimson | Red | FireBrick |
| DarkRed | Pink | LightPink | HotPink |
| DeepPink | MediumVioletRed | PaleVioletRed | Coral |
| Tomato | OrangeRed | DarkOrange | Orange |
| Gold | Yellow | LightYellow | LemonChiffon |
| LightGoldenrodYellow | PapayaWhip | Moccasin | PeachPuff |
| PaleGoldenrod | Khaki | DarkKhaki | Lavender |
| Thistle | Plum | Violet | Orchid |
| Fuchsia | Magenta | MediumOrchid | MediumPurple |
| RebeccaPurple | BlueViolet | DarkViolet | DarkOrchid |
| DarkMagenta | Purple | Indigo | SlateBlue |
| DarkSlateBlue | MediumSlateBlue | GreenYellow | Chartreuse |
| LawnGreen | Lime | LimeGreen | PaleGreen |
| LightGreen | MediumSpringGreen | SpringGreen | MediumSeaGreen |
| SeaGreen | ForestGreen | Green | DarkGreen |
| YellowGreen | OliveDrab | Olive | DarkOliveGreen |
| MediumAquamarine | DarkSeaGreen | LightSeaGreen | DarkCyan |
| Teal | Aqua | Cyan | LightCyan |
| PaleTurquoise | Aquamarine | Turquoise | MediumTurquoise |
| DarkTurquoise | CadetBlue | SteelBlue | LightSteelBlue |
| PowderBlue | LightBlue | SkyBlue | LightSkyBlue |
| DeepSkyBlue | DodgerBlue | CornflowerBlue | MediumSlateBlue |
| RoyalBlue | Blue | MediumBlue | DarkBlue |
| Navy | MidnightBlue | Cornsilk | BlanchedAlmond |
| Bisque | NavajoWhite | Wheat | BurlyWood |
| Tan | RosyBrown | SandyBrown | Goldenrod |
| DarkGoldenrod | Peru | Chocolate | SaddleBrown |
| Sienna | Brown | Maroon | White |
| Snow | HoneyDew | MintCream | Azure |
| AliceBlue | GhostWhite | WhiteSmoke | SeaShell |
| Beige | OldLace | FloralWhite | Ivory |
| AntiqueWhite | Linen | LavenderBlush | MistyRose |
| Gainsboro | LightGray | Silver | DarkGray |
| Gray | DimGray | LightSlateGray | SlateGray |
| DarkSlateGray | Black |
Как пишется
Скопировать ссылку «Как пишется» Скопировано
.selector color: black; background-color: AntiqueWhite;>.selector color: black; background-color: AntiqueWhite; >
Ключевые слова регистронезависимые — вы можете писать их как угодно и браузер всё равно вас поймёт.
RGB
Скопировать ссылку «RGB» Скопировано
Для задания цвета используется функция rgb ( ) , например, rgb ( 0 63 255 ) для синего. Каждое из трёх значений отвечает за отдельный канал RGB и может быть записано числом от 0 до 255 или в процентах. Для добавления прозрачности, после записи каналов нужно поставить слэш и записать нужное значение от 0 до 1 или в процентах, например rgb ( 0 63 255 / 0 . 5 ) для полупрозрачного синего.
Раньше синтаксис RGB отличался от современного и вы всё ещё можете встретить его в коде или выбрать для лучшей кроссбраузерности, см. Can I use. Для разделения каналов внутри функции нужно было использовать запятые rgb ( 0 , 63 , 255 ) , а для добавления прозрачности — специальную функцию rgba ( ) , которая принимала последним параметром прозрачность цвета, например rgba ( 255 , 0 , 0 , 0 . 5 ) .
HEX
Скопировать ссылку «HEX» Скопировано
Шестнадцатеричный код цвета в цветовой модели RGB, который начинается с # , например, #ff0000 . Сплошные цвета записываются в формате # R R G G B B или в сокращённом # R G B (если символы каждой группы одинаковые). Например #009900 или #090 . Если нужно указать прозрачность, она добавляется в конце в HEX-формате # R R G G B B A A или # R G B A , например #00990055 или #0905 .
Раньше нельзя было задать цвет в нотации # R G B A и приходилось использовать функцию rgba ( ) , но сегодня у этого способа неплохая кроссбраузерность. Проблема одна: мало кто сходу сможет рассчитать 50% в шестнадцатеричном формате, поэтому для указания прозрачности цвета чаще всего используют функцию rgb ( ) , где прозрачность можно задать в дробях или процентах.
Разные способы записи HEX-цветов в качестве значений:
.selector color: #FFF; border-color: #00000080; background-color: #ff00ff;>.selector color: #FFF; border-color: #00000080; background-color: #ff00ff; >
HSL
Скопировать ссылку «HSL» Скопировано
Цветовая модель HSL описывает те же цвета, что и RGB, но иначе: H — Hue (оттенок), S — Saturation (насыщенность), L — Lightness (светлота). Например, hsl ( 120 100 % 50 % ) для зелёного. Первое значение оттенка задаётся в градусах и его можно записать просто как 120 (как чаще всего и делают) или с указанием единиц поворота: deg , turn , grad , rad . Доступны значения от 0 до 360, если указываете поворот в градусах. Отрицательные значения не допускаются. Второе и третье значение указываются в процентах. Прозрачность добавляется так же, как в rgb , с помощью слэша со значением, например hsl ( 120 100 % 50 % / 0 . 5 ) полупрозрачный зелёный.
Синтаксис hsl ( ) отличался от современного точно так же, как rgb ( ) : нужны были запятые и специальная функция hsla ( ) для задания прозрачности цвета. Используйте старый синтаксис для лучшей совместимости и не удивляйтесь, если встретите его в коде.
HWB
Скопировать ссылку «HWB» Скопировано
H — hue (оттенок), W — whiteness (количество белого), B — blackness (количество чёрного). Первое значение оттенка задаётся в градусах и его можно записать просто как 120 (как чаще всего и делают) или с указанием единиц поворота: deg , turn , grad , rad . Доступны значения от 0 до 360, если указываете поворот в градусах. Второе и третье значения указываются в процентах. Допустимо указывать прозрачность цвета четвёртым параметром через слэш.
Если второй и третий параметры в сумме дают 100%, то они нормализуются до 100% автоматически.
.item color: hwb(45 45% 20% / 0.6);>.item color: hwb(45 45% 20% / 0.6); >
Ключевые слова
Скопировать ссылку «Ключевые слова» Скопировано
transparent
Скопировать ссылку «transparent» Скопировано
Ключевое слово transparent задаёт прозрачный цвет текста. Технически это равносильно записи любого цвета с нулевой прозрачностью rgb ( 0 0 0 / 0 ) , но бывают случаи, когда просто прозрачность и прозрачность цвета могут работать иначе, например, в градиентах.
current Color
Скопировать ссылку «currentColor» Скопировано
За ключевым словом current Color скрывается цвет, указанный в свойстве color элемента. Очень удобно указывать это слово в качестве значения других свойств, чтобы многократно не указывать один и тот же цвет.
Рассмотрим пример. Пусть цвет рамки элемента будет совпадать с цветом текста:
.element color: #6e4aff; border: 1px solid currentColor;>.element color: #6e4aff; border: 1px solid currentColor; >
Если мы захотим менять цвет текста и рамки по наведению курсора, то нам достаточно будет изменить значение одного свойства, а цвет рамки подстроится за счёт current Color :
.element:hover color: #09ff00;>.element:hover color: #09ff00; >
HTML для начинающих: вопросы и ответы
На собеседовании многие начинающие (и не только) претенденты на позиции, связанные с HTML, неожиданно понимают, что не могут ответить на одни и те же типовые, и казалось бы, элементарные вопросы. Но ведь когда-то этому должен настать конец? Думаю, ответ на этот вопрос вы точно знаете.
Мы собрали список вопросов и ответов по HTML, которые, скорее всего, зададут во время собеседования. Разобравшись в них, соискатель сможет продемонстрировать достаточно высокий уровень знаний о предмете. Если перед собеседованием кандидат хорошо подготовит ответы на эти вопросы и сможет быстро реагировать на них, это произведёт приятное впечатление и даст ему преимущество по сравнению с более «медленными» конкурентами.
Вопросы и ответы
Список вопросов
Что такое HTML?
HTML расшифровывается как HyperText Markup Language (язык гипертекстовой разметки). Это язык разметки документов во Всемирной паутине (World Wide Web, WWW). HTML — это стандартизированный язык, позволяющий составлять форматированный текст. Браузер интерпретирует его и отображает на экране элементы веб-страниц.
Из чего состоит форматированный текст HTML?
В первую очередь, HTML — это контент и теги. Теги позволяют задать способ отображения контента на веб-страницах.
Что такое HTML-тег?
Тег — это специальное служебное слово, заключенное в угловые скобки. Его ещё называют «элемент HTML». Тегов в языке HTML много и каждый что-то делает с контентом, который обычно находится внутри скобок или между тегами.
Если тег парный, то тегу <ТЕГ>соответствует .
Парными являются все теги?
Нет, не все. Существуют одиночные теги, например, — для изображений. В этом случае контент вместе с другими служебными словами (например, для
это может быть src=”url изображения”) размещается между скобками, но после слова img.
Какие основные виды списков применяют при создании веб-страницы?
При создании веб-страницы можно использовать:
- Menu list (список меню — ).
- Directory list (список директорий — ).
- Ordered list (нумерованный список —
-
).
- Unordered list (маркированный список —
). - Definition list (список определений — ).
Зачем использовать списки в HTML?
Списки делают информацию более наглядной и удобной для восприятия. Более того, внутри списков (точнее, для произвольного отображения элементов списка) тоже можно использовать различные теги.
Можем ли мы писать комментарии в HTML-коде? Как?
Да, можем. Для этого текст комментария нужно поместить внутри .
Почему некоторые символы на веб-странице иногда отображаются некорректно?
Чаще всего символы отображаются некорректно из-за проблем с кодировкой. То есть причина — в настройках браузера или веб-сервера.
Что такое Image Map?
В HTML Image Map — это технология, которая позволяет привязывать ссылки к фрагментам изображения. Щелкая мышью на отдельных частях изображения, пользователь может переходить по той или иной ссылке на разные веб-страницы.
Что такое white-space?
White-space — это свойство, позволяющее менять количество пробелов между словами при отображении веб-страницы. По умолчанию любое количество пробелов в HTML-коде браузер интерпретирует как один пробел.
В чём главное преимущество white-space?
При написании HTML-кода разработчику не нужно беспокоиться о лишних пробелах, которые он мог ввести: браузер при отображении веб-страницы уберёт все лишние пробелы.
Разработчик может добавлять в код пробелы не только случайно, но и специально: чтобы код стал более читабельным.
Можно ли присваивать значения не всем атрибутам тега?
Да, в этом случае браузер будет использовать значения по умолчанию. Если вас не устраивает то, как он отобразил веб-страницу, то, возможно, следует явно указать значения некоторых атрибутов.
Как разместить знак copyright на веб-странице, ведь его нет на клавиатуре?
Знак copyright относится к спецсимволам. Чтобы разместить его на веб-странице, нужно в соответствующем фрагменте HTML-кода набрать на клавиатуре последовательность © или ©.
Как создать ссылки на разные фрагменты (разделы) одной и той же веб-страницы?
Для этого нужно найти в HTML-коде начало нужного нам фрагмента. В этом месте создать так называемый «якорь» при помощи атрибута name тега и дать имя ссылке на фрагмент, используя атрибут href и знак #:
href=»#имя_ссылки_на_фрагмент»
Можем ли мы выравнивать элементы списка в HTML-файле?
Да, мы можем хранить элементы списка прямо в HTML-файле используя отступы. Отступ можно также использовать для любого вложенного списка внутри родительского.
Адрес какой веб-страницы обычно считается адресом сайта?
Обычно это одна из страниц верхнего уровня, главная страница. Из неё пользователь переходит на страницы, расположенные на более низких уровнях. И их адрес чаще всего формируется на основе адреса главной страницы.
Зачем мы используем альтернативный текст (атрибут alt тега ![]()
) для изображений?
Альтернативный текст отображается при отключенной загрузке графики в браузере пользователя или в случае проблемы при загрузке конкретного изображения. Этот текст даёт понять, что должно было быть изображено на этой картинке.
Могут ли файлы HTML хорошо работать в каком-нибудь редком или ультрасовременном браузере?
Конечно, файлы HTML могут и должны хорошо работать в любом браузере, потому что браузер должен соответствовать стандартам HTML. Если разработчики решили не поддерживать некоторые функции стандарта, это остаётся на их совести.
Как вы думаете гиперссылка может быть только текстовой?
Нет, гиперссылка может быть не только текстовой, но и, например, графической. Это означает, что мы можем преобразовать изображение в ссылку, которая направит пользователя на другую страницу. Гиперссылка вообще не зависит от типа контента, который лежит «под ней».
Что из себя представляют атрибуты тега < li>— элемента списка?
- type устанавливает вид маркера нумерованного или маркированного списка;
- value — число, с которого будет начинаться нумерованный список.
Для чего нужны таблицы стилей (CSS)?
Таблицы стилей позволяют задать чёткие правила, которые определяют внешний вид контента, тех или иных HTML-элементов и всей страницы в целом. Более того, одни и те же правила можно применять сразу к нескольким веб-страницам, что упрощает сохранение и, при необходимости, изменение единого стиля сайта.
Какие типы нумерации в списках вы знаете?
В качестве нумерующих элементов могут выступать следующие значения:
- арабские числа (1, 2, 3, . );
- прописные латинские буквы (A, B, C, . );
- строчные латинские буквы (a, b, c, . );
- прописные римские числа (I, II, III, . );
- строчные римские числа (i, ii, iii, . ).
Как задать разные цвета для фрагментов текста веб-страницы?
Чтобы задать разные цвета для фрагментов текста, нужно поместить каждый из фрагментов внутрь парного тега font:
какой-то текстовый фрагмент цвета “color”Где хранятся числовые коды символов в HTML?
В таблице ASCII. При отображении веб-страницы браузер берет числовые коды символов из HTML-документа и заменяет их на соответствующий символ из таблицы.
Каковы преимущества группировки нескольких флажков (элементов checkbox)?
Есть несколько преимуществ группировки флажков:
- это помогает лучше организовать, структурировать их;
- это позволяет обращаться к конкретным флажкам из группы, используя id;
- это позволяет создать другую группу флажков на этой же веб-странице, не боясь перепутать названия или идентификаторы флажков.
Как перекрытие тегов влияет на отображение контента?
Перекрытие тегов в HTML приводит к распознаванию только первого тега. Но такие проблемы возникают только тогда, браузер пытается распознать теги без текста.
Если между тегами нет текста, каков будет результат? Приведите пример?
Если между тегами нет текста, то контент будет невозможно отформатировать. Например, одиночные теги, такие как < img>, не требуют ввода текста, и, следовательно, в таком случае форматирование не потребуется.
Как указать цвета для границ таблицы?
Это можно сделать в таблице стилей, а в случае ее отсутствия будет использован цвет текста.
Можем ли мы создать ссылку, которая ведет на другую веб-страницу?
Да, для этого нужно использовать атрибут href.
Могут ли таблицы стилей помочь выровнять изображение и задать способ позиционирования текста относительно него?
Да, таблица стилей может содержать правила для позиционирования текста и изображений.
Может ли одна гиперссылка вести на разные страницы?
Нет, одна гиперссылка может вести только на одну веб-страницу, адрес которой вы укажете.
Есть ли разница между маркированным списком и списком директорий и меню?
Да, разница заключается в том, что неупорядоченный список имеет атрибуты для изменения стиля маркера.
Как изменить цвет маркера?
Можно ли ввести какие-то ограничения на размер текстовых полей в HTML?
Стандартный размер составляет 20-25 символов. Но используя атрибуты size или maxsize, можно задать другие ограничения. Например:
Чем ограничен максимальный размер текстового поля?
Шириной окна браузера.
Что будет, если установить нулевой размер текстового поля?
Браузер будет использовать значение по умолчанию.
Каковы сходства между атрибутами border и rules?
Что такое marquee? Как мы можем применить это?
Marquee помогает в настройке прокрутки текста на веб-странице. Чтобы активировать прокрутку, вам нужно использовать тег .
Что делает тег
?
Функция тега
состоит в том, чтобы отделять фрагменты текста друг от друга.
Есть ли другой способ разделить текст без использования
?
Да, существуют другие способы разделения текста. Можно использовать тег
или тег .
Может ли текст отображаться вне окна браузера?
По умолчанию текст не может отображаться за пределами браузера, но, если текст является частью ячейки таблицы с предварительно определённой шириной, то он может выходить за пределы окна браузера.
В чем разница между активными и неактивными ссылками?
Активная ссылка имеет фокус, то есть на неё наведена мышь. В остальных случаях фокус находится где-то в другом месте.
Имеет ли таблица стилей ограничения по количеству правил?
Нет, таблицы стилей не ограничивают количество правил для селектора. Однако каждое новое правило необходимо отделять от других с помощью точки с запятой.
Есть у таблиц стилей какая-либо иерархия правил?
Да, существует иерархия, которая включает в себя четыре уровня (от самого приоритетного к наименее приоритетному):
-
Встроенный стиль: прикрепляется непосредственно к элементу, для которого создается стиль. Пример:
Можем ли мы сгруппировать разные селекторы с разными именами классов?
Да, для этого нужно просто написать имена классов через запятую.
Можно ли подключить внешний файл CSS в браузере?
Нет, внешний файл CSS можно подключить с помощью тега в самом HTML-документе.
Может ли свойство list-style-type влиять на абзац?
Нет, свойство list-style-type не может влиять на абзац, оно скорее проигнорирует его.
Что такое элемент canvas?
Элемент HTML5 canvas можно использовать для вставки изображений, градиентов и комплексной анимации. Он также может помочь в создании 2D-изображений непосредственно внутри исходного кода HTML-документа.
Вывод
Приведенные выше ответы на вопросы могут дать вам представление о том, что у вас могут спросить. Вы можете преодолеть страх и обрести уверенность, что поможет вам получить желаемую работу. Ответы, изложенные выше, в основном достаточно чёткие и короткие. Но этого достаточно, чтобы интервьюер понял, что кандидат в теме.
Заключение
В дополнение к подготовке ответов, изложенных выше, также рекомендуем пообщаться с другом или родственником, который недавно проходил собеседование. Это поможет вам получить информацию о тенденциях в отрасли и ожиданиях работодателей. Таким образом, вы можете соответствующим образом улучшить свои навыки и способности, а потом использовать это, чтобы предложить работодателю свои услуги и правильно подать себя в соответствии с его ожиданиями.
Общение с людьми, которые недавно проходили собеседования, а также ответы на вопросы, изложенные выше, помогут вам позиционировать себя как более достойного кандидата и повысить свои шансы на оффер.
- Блог компании VDSina.ru
- Веб-разработка
- HTML