Как сохранить список элементов прямо в файле HTML?

Что такое основные HTML-теги Изучение

В этой статье мы обсудим различные методы сохранения списка элементов в файле HTML. Как правило, правильный отступ контента в браузере делает контент хорошо организованным и структурированным, улучшая общую читабельность, а также повышая интерактивность веб-сайта. Это стало возможным благодаря использованию семантических элементов HTML.

Семантический элемент объясняет значение фрагмента кода как для разработчика, так и для машиночитаемого способа. Списки HTML позволяют содержимому следовать правильной семантической структуре. Списки важны для визуального восприятия пользователя, так как они могут читать контент в правильном потоке, а не в беспорядочном тексте или абзацах. Это позволяет группировать элементы, которые связаны друг с другом в виде маркеров или нумерованных списков. В HTML есть 2 типа списков, а именно: неупорядоченный список и упорядоченный список.

Ненумерованные списки: по умолчанию он состоит из маленьких черных маркеров, представляющих список элементов. Список начинается с тега <ul> и содержит список элементов, начинающихся с тега <li>.

Синтаксис:

<ul>
    <li>List Items</li>
</ul>

Упорядоченный список: Упорядоченный список по умолчанию состоит из нумерованного списка. Список начинается с тега <ol> и содержит список элементов, начинающихся с тега <li>.

Синтаксис:

<ol>
    <li>List Items</li>
</ol>

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

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Types of Lists</title>
</head>
 
<body>
    <h2>Unordered list </h2>
    <ul>
        <li>DSA</li>
        <li>Algorithm</li>
        <li>Web Tech</li>
    </ul>
    <h2>Creating an Ordered list </h2>
    <ol>
        <li>Placement Courses</li>
        <li>Onlie Self-pace Course</li>
        <li>Offline-Classes</li>
    </ol>
</body>
 
</html>

Вывод:

Типы списков HTML

Типы списков HTML

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

Отступ списка:

Отступ — это метод форматирования, который помогает хорошо организовать и представить контент в правильной структуре на веб-странице. Это может помочь повысить интерактивность веб-страницы, а также улучшить взаимодействие с пользователем, что не только помогает улучшить читабельность, но и помогает улучшить рейтинг страницы, что, в свою очередь, достигает максимального количества пользователей.

Важность правильного отступа в списке:

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

Способы сохранить список элементов в виде прямой линии:

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

  • свойство text-indent
  • свойство margin-left и padding-left
  • отображать свойство
  • свойство типа списка

Есть несколько других подходов к выполнению этой задачи, но в этой статье мы обсудим 4 вышеуказанных свойства CSS.

Читайте также:  NSE (Nmap Scripting Engine) Учебное пособие

Свойство text-indent : это свойство используется для определения отступа первой строки в каждом блоке текста. Он также принимает отрицательные значения. Это означает, что если значение отрицательное, первая строка будет иметь отступ влево.

Синтаксис:

text-indent: length;

Пример: В этом примере описываются различные способы создания отступа в списке с помощью свойства text-indent.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Indenting the list using CSS Propert
    </title>
    <style>
    .sudo {
        text-indent: 5px;
    }
     
    .geeks {
        text-indent: 5em;
    }
     
    .gfg {
        text-indent: 30%;
    }
    </style>
</head>
 
<body>
    <h2>text-indent: 50px:</h2>
    <ol class="sudo">
        <li>
            The Best Data Structure and Algorithm Course
            Available Online From Skilled mentors at GFG.
        </li>
        <li>
            The course focuses on various MCQ's & 
            Coding question likely to be asked in 
            the interviews & make your upcoming 
            placement season efficient and 
            successful.
        </li>
    </ol>
    <h2>text-indent: 5em:</h2>
    <ol class="geeks">
        <li>
            The Best Data Structure and Algorithm Course
            Available Online From Skilled mentors at GFG.
        </li>
        <li>
            The course focuses on various MCQ's & 
            Coding question likely to be asked in 
            the interviews & make your upcoming 
            placement season efficient and 
            successful.
        </li>
    </ol>
    <h2>text-indent: 30%:</h2>
    <ol class="gfg">
        <li>
            The Best Data Structure and Algorithm Course
            Available Online From Skilled mentors at GFG.
        </li>
        <li>
            The course focuses on various MCQ's & 
            Coding question likely to be asked in 
            the interviews & make your upcoming 
            placement season efficient and 
            successful.
        </li>
    </ol>
</body>
 
</html>

Вывод:

Отступ списка с помощью свойства text-indent

Отступ списка с помощью свойства text-indent

свойство margin-left : используется для увеличения или уменьшения отступа вокруг списка снаружи блока. Например, если вы хотите создать отступ вокруг блока, вы можете использовать это свойство. Вы можете определить значение атрибута в px; является статическим измерением, указав значение в соответствии с требуемым отступом.

свойство padding-left : используется для увеличения или уменьшения заполнения внутри блока. Например, вы хотите увеличить или уменьшить внутреннее пространство блока, т. е. заполнение, вы можете использовать это свойство, определив значение атрибута в em; будучи относительным измерением, указав значение в соответствии с требуемым отступом.  

Синтаксис: 

<style>
    ul.o{      
        margin-left: 50px;
        padding-left: 50px;
    } 
</style>

Пример: В этом примере мы создали четыре списка. Первый список без отступа или, можно сказать, с отступом по умолчанию, второй список с отступом с использованием свойства margin-left, обеспечивающего положительное значение для смещения списка вправо, третий список с отступом с использованием свойства margin-left, обеспечивающего отрицательное значение, чтобы подтолкнуть список к левой стороне, а четвертый список имеет отступ с использованием свойства padding-left.

HTML

<!DOCTYPE html>
<html>
 
<head>
      <title>
        Indenting the list item in various format
      </title>
    <style>
    ul.o {
        margin-left: 50px;
    }
     
    ul.p {
        margin-left: -20px;
    }
     
    ul.m {
        padding-left: 20em;
    }
    </style>
</head>
 
<body>
    <h2>
        <strong>List without Indent</strong>
    </h2>
    <ul class="i">
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
    </ul>
    <h2>
        <strong>List with Indent using margin-left[+ve]</strong>
    </h2>
    <ul class="o">
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
    </ul>
    <h2>
        <strong>List with Indent using margin-left[-ve]</strong>
    </h2>
    <ul class="p">
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
    </ul>
    <h2>
        <strong>List with Indent using padding-left</strong>
    </h2>
    <ul class="m">
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
    </ul>
</body>
 
</html>

Вывод:

Читайте также:  Учебное пособие по Python для начинающих: создание проекта с нуля

Отступ списков HTML

Отступ списков HTML

Свойство list-style-type : используется для удаления типа списка, если это необходимо. С помощью этого свойства удаляются маркеры или числа перед элементами списка.

Синтаксис:

li {
    list-style-type: none;
}

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

Синтаксис:

li {
    display: inline-block;
}

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

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title> List items in a Straight Line </title>
    <style>
    ul.i {
        list-style-type: none;
    }
     
    li {
        display: inline-block;
    }
    </style>
</head>
 
<body>
    <h2>
        <strong> List items in a Straight Line</strong>
    </h2>
    <ul class="i">
        <li>DSA</li>
        <li>Web Tech</li>
        <li>Algorithm</li>
    </ul>
</body>
 
</html>

Вывод:

Элементы списка HTML по прямой

Элементы списка HTML по прямой

Оцените статью
bestprogrammer.ru
Добавить комментарий