HTML Bullet Points – Как создать неупорядоченный список с помощью примера тега

html bullet points – kak sozdat neuporyadochennyj spisok s pomoshhyu

Мы постоянно используем списки в нашей повседневной жизни.

Мы создаем их, чтобы структурировать и организовывать наши дни и используем их для создания списков дел. Мы используем их в рецептах, чтобы не упустить ни одного шага. И мы используем их, когда хотим собрать предмет мебели.

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

Поэтому имеет смысл, что они также столь часто используемой и полезной функцией в веб-разработке интерфейса.

HTML содержит три типа списков: неупорядоченные, упорядоченные списки и списки с описанием.

В этой статье вы узнаете, как создавать неупорядоченные списки. Вы также увидите несколько способов, с помощью которых можно изменить стиль по умолчанию с помощью нескольких строк CSS.

Давайте начнем!

Как создать неупорядоченный список в HTML

Неупорядоченные списки HTML – это коллекции элементов, которые не должны быть в определенном порядке. Мы часто используем простые маркеры для перечисления этих элементов.

Вы создаете неупорядоченный список с помощью ul тег. Затем вы используете li тег, чтобы отобразить каждый из элементов, которые вы хотите включить в свой список.

The ul тег, что означает неупорядоченный списокявляется отцом li
тег. Это означает, что li тег – это ребенка с ul тег.

<ul>
    <li>Item</li>
    <li>Another Item</li>
    <li>Yet Another Item</li>
</ul>

Выход:

Скриншот-2021-09-30-4.43.47-PM

Это называется маркированным списком, поскольку стиль по умолчанию заключается в том, что у каждого элемента списка есть маркер.

Одно, о чем нужно помнить и помнить li есть только прямой ребенок ul.

Это значит, что после создания отверстия (<ul>) и закрытие (</ul>) для неупорядоченного списка, первым тегом, который вы включите, будет тег li тег.

Например, не делайте этого:

<ul>
    <a href="#">I am a link to something on the web!</a>
</ul>

Если вы хотите, чтобы элементы вашего неупорядоченного списка были ссылками, сделайте это:

<ul>
    <li>
        <a href="#">I link to somewhere on the web!</a>
    </li>
</ul>

Тег ссылки (a) является ребенком li тег и внук (!) из ul тег.

Как создать вложенный неупорядоченный список

Вложенный список – это список внутри другого списка.

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

Помните, что только прямой ребенок ul тег есть li.

Вот как вы создаете вложенный неупорядоченный список:

<ul><!-- start of  main list-->
  <li>HTML</li>
   <li>CSS</li>
    <li>JavaScript
            <ul><!-- start of nested list-->
                <li>Angular</li>
                <li>React</li>
                <li>Vue</li>
            </ul><!--end of nested list-->
     </li>
 </ul><!--end of  main list -->

Выход:

Скриншот-2021-09-30-5.33.53-PM

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

В приведенном выше примере я создал вложенный список между открытием и закрытием li который называется «JavaScript».

Обязательно добавьте закрывающий и открывающий тэги, поскольку это может быстро запутаться.

Хорошая практика, чтобы избежать неразберихи, — прокомментировать свой код. Имейте в виду, что вы должны использовать вложенные списки только тогда, когда они семантически имеет смысл.

Как изменить стиль по умолчанию для неупорядоченных списков

Как вы уже видели, по умолчанию стиль неупорядоченных списков – это маркеры у каждого элемента списка.

Но вы можете изменить стиль с помощью list-style-type имущество в отдельное .css файл.

Значение свойства по умолчанию таково disc.

Как стилизовать элементы списка с помощью кругов

Вы можете создавать элементы списка, стиль которых содержит круги вместо сплошных точек:

<ul>
    <li>Item</li>
    <li>Another Item</li>
    <li>Yet Another Item</li>
</ul>
ul {
    list-style-type: circle;
}

Выход:

Скриншот-2021-09-30-5.50.17-PM

Как стилизовать элементы списка с помощью квадратов

Вы также можете создать элементы списка, стиль которых имеет квадраты:

<ul>
    <li>Item</li>
    <li>Another Item</li>
    <li>Yet Another Item</li>
</ul>
ul {
    list-style-type: square;
}

Выход:

Скриншот-2021-09-30-18.03.39-PM

Как удалить стили из элементов списка

Вы даже можете вообще удалить стиль:

<ul>
    <li>Item</li>
    <li>Another Item</li>
    <li>Yet Another Item</li>
</ul>
ul {
    list-style-type: none;
}

Выход:

Скриншот-2021-09-30-6.05.01-PM

Это особенно полезно, если вы хотите создать стиль списка по горизонтали и создать панель навигации. Для этого потребуется дополнительный стиль.

Списки есть блокировать элементов. Изменив элементы списка inline а с помощью правила Flexbox вы можете складывать элементы друг у друга.

Тот же HTML:

<ul>
        <li>Item</li>
        <li>Another Item</li>
        <li>Yet Another Item</li>
    </ul>

И добавив несколько новых правил CSS:

ul {
    list-style-type: square;
    display:flex;
}

li{
    display:block;
    margin:10px;
}

Вы можете стилизовать элементы списка горизонтально:

Скриншот-2021-09-30-18.15.40

Как стилизовать элементы списка с помощью эмодзы

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

Чтобы сделать списки более интересными и веселыми, вы можете добавить смайлики с помощью CSS. ::before псевдоэлемент.

Вот HTML:

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Первым шагом является добавление list-style-type:none; правило к родителям ul пометьте тег и удалите значения по умолчанию padding и margin с меткой.

Вы добавляете эмодзы к li тег с помощью ::before псевдоэлемент. Вы можете выбрать из полного списка эмодзы в этой статье.

ul {
    list-style-type: none;
    padding:0;
    margin:0;
}

li::before{
    content: "💻";
}

Выход:

Скриншот-2021-09-30-at-6.28.49-PM

Чтобы предоставить каждому элементу списка разные смайлы, воспользуйтесь :nth-child() селектор в списке раньше в ::before псевдоэлемент:

ul {
    list-style-type: none;
    padding:0;
    margin:0;
}

/*first list item*/
li:nth-child(1)::before{
    content: "✍️";
}

/*second list item*/
li:nth-child(2)::before{
    content: "🎨";
}

/*third list item*/
li:nth-child(3)::before{
    content: "🔥";
}

Выход:

Скриншот-2021-09-30-6.38.15-PM

Вывод

И вот оно! Теперь вы знаете, как создавать неупорядоченные списки в HTML и видели некоторые способы их стилизации.

Чтобы продолжить свой путь изучения HTML, просмотрите следующие видео на YouTube-канале freeCodeCamp:

freeCodeCamp также предлагает бесплатную сертификацию адаптивного веб-дизайна на основе проектов.

Он идеально подходит для начинающих и не предполагает предварительных знаний. Вы начнете с абсолютно необходимых основ и совершенствуете свои навыки по мере прогресса. В итоге вы завершите пять проектов.

Спасибо за чтение и приятное обучение 🙂

Добавить комментарий

Ваш адрес email не будет опубликован.