Html маркированный список не с 1. Маркированный список

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

Стандартом пятой версии html поддерживается 3 вида списков: нумерованные списки, маркированные списки и списки определений . Также предоставляется возможность вкладывать списки друг в друга, создавая вложенные многоуровневые списки .

Нумерованный список

Нумерованный список - это набор элементов (пунктов списка), имеющих определённую последовательность. Каждый пункт нумерованного списка имеет уникальный маркер, указывающий на порядок следования данного пункта относительно других пунктов списка. По умолчанию маркерами пунктов нумерованного списка являются числа. Первый пункт идёт под числом 1, второй под числом 2 и так далее.

Самыми распространёнными примерами нумерованных списков являются рецепты приготовления различных блюд. Так как любой рецепт - это нумерованный список, с чёткой последовательностью действий.

Для создания нумерованных списков в HTML используется тег

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

   Нумерованный список:

   1. Кофе
   2. Чай
   3. Молоко
   Попробовать »

   Примечание: тег

   в качестве дочерних элементов может содержать только теги
   1. , то есть всё содержимое нумерованного списка должно размещаться внутри элементов
   2. . Тег
   3. , в свою очередь, не имеет ограничений на содержимое, поэтому в нём можно размещать абзацы, картинки, ссылки, таблицы, другие списки и т.д.

      Маркированный список

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

      Для создания маркированных списков в HTML применяется тег

      , внутри которого располагаются элементы самого списка (как и в случае с нумерованными списками используется тег
      • , который содержит в себе всё отображаемое содержимое списка):

        Маркированный список:

        • Кофе
        • Чай
        • Молоко
        Попробовать »

        Виды маркеров

        Виды маркеров нумерованного списка можно изменить с помощью атрибута type . Данный атрибут поддерживает пять видов маркеров:

        Маркированные списки не имеют атрибута type , поэтому средствами HTML изменить вид маркера у маркированного списка не получится. Для изменения вида маркера, в этом случае, можно воспользоваться CSS свойством list-style-type , с помощью которого, помимо значения по умолчанию, можно выбрать ещё два вида маркера: circle или square .

        Изменение маркеров у списков:

        Нумерованный список c атрибутом type="a":

        1. Яблоки
        2. Бананы
        3. Лимоны

        Нумерованный список c атрибутом type="I":

        1. Яблоки
        2. Бананы
        3. Лимоны

        Виды маркеров маркированных списков:

        • Яблоки
        • Бананы
        • Лимоны
        • Яблоки
        • Бананы
        • Лимоны
        Попробовать »

        CSS свойство list-style-type , помимо видов маркеров для маркированных списков, имеет множество различных видов маркеров и для нумерованных списков. Но не всегда изменения одного стандартного вида маркера на другой бывает достаточно для того, чтобы красиво оформить список. Для оформления списков лучше использовать CSS, который позволяет не только изменять вид маркера, но и заменять маркеры на картинки, контролировать их расположение и управлять отступом. Как всё это делать вы можете посмотреть .

        Горизонтальный список

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

        Чтобы создать горизонтальный список, надо для пунктов списка прописать CSS свойство display со значением inline или inline-block , в зависимости от того, какие ещё свойства вы собираетесь использовать.

        Нумерованный список

        1. Яблоки
        2. Бананы
        3. Лимоны

        Маркированный список:

        • Яблоки
        • Бананы
        • Лимоны
        Попробовать »

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

        Как горизонтальный список превратить в горизонтальное меню, вы можете посмотреть .

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

        , а каждый пункт списка начинается с тега
        • , как показано ниже.
          • Первый пункт
          • Второй пункт
          • Третий пункт

          В списке непременно должен присутствовать закрывающий тег

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

      В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице.

      Пример 11.1. Создание маркированного списка

      ---

      • Чебурашка
      • Крокодил Гена
      • Шапокляк
      • Крыса Лариса

      ---

      Результат данного примера показан на рис. 11.1.

      Рис. 11.1. Вид маркированного списка

      Обратите внимание на отступы сверху, снизу и слева от списка. Такие отступы добавляются автоматически.

      Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется атрибут type тега

      . Допустимые значения приведены в табл. 11.1
      Табл. 11.1. Стили маркеров списка

      Тип списка	Код HTML	Пример
      Список с маркерами в виде круга		Первый Второй Третий
      Список с маркерами в виде окружности		Первый Второй Третий
      Список с квадратными маркерами		Первый Второй Третий

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

      Создание списка с квадратными маркерами показано в примере 11.2.

      Пример 11.2. Вид маркеров

      Изменение убеждений

      • изменение религиозной веры (на выбор: буддизм, конфуцианство, индуизм). Специальное предложение - иудаизм и мусульманство вместе;
      • изменение веры в непогрешимость любимой партии;
      • убеждение в том, что инопланетяне существуют;
      • предпочтение политического строя, как самого лучшего в своем роде (на выбор: феодализм, социализм, коммунизм, капитализм).

      Результат данного примера показан на рис. 11.2.

      Маркированный и нумерованный список в программе Word пакета Microsoft Office создается очень легко. Более того, программа распознает введение некоторых символов, и нумерованный или маркированный список начинает создаваться автоматически.

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

      Инструменты для создания различных списков находятся во вкладке «Главная» в разделе «Абзац». В MS Word есть возможность создания разных видов списков.

      Для создания маркированного списка нужно нажать на кнопку «маркеры» в вышеназванном меню, при этом не имеет значения, где в этот момент расположен курсор, в начале строки или в ее середине. В любом случае маркером будет отмечен весь абзац, в котором располагался курсор в это время.

      

      Определение формата маркера

      При нажатии стрелочки справа от кнопки «маркеры» появляется выпадающее меню, в котором отображаются последние использованные маркеры, библиотека маркеров и маркеры, используемые в документах по умолчанию. Определение нового маркера возможно здесь же. Под этим понимается выравнивание маркера и знак маркера, в качестве которого можно использовать символы и различные рисунки (при необходимости нужные маркеры можно загрузить из разных источников).

      Создание нумерованного списка

      Для создания нумерованного списка предназначена следующая кнопка «Нумерация» блока инструментов создания списков. Работает эта кнопка также как и кнопка «Маркер», достаточно установить курсор в нужном месте текста или в начале нового абзаца.

      

      Определение формата номера

      Определение формата номера списка делается точно также как и для маркеров, то есть нажатием стрелочки справа от значка «Нумерация». В библиотеке нумерации представлены нумерация арабскими и римскими цифрами, а также буквенная нумерация. Изменить формат нумерации, здесь возможно только изменяя параметры шрифта.

      Создание многоуровневого списка

      Если маркированный или нумерованный список уже создан, то в окне «Определение формата …» появляется возможность изменить его уровень, так как становится активной соответствующая кнопка в выпадающем меню. Для создания многоуровневого списка предназначена третья кнопка меню списков, при нажатии на которую, выпадает меню с различными стилями многоуровневых списков. Задать определенный уровень списка можно следующим способом: установить курсор в нужную строку и в выпадающем меню и нажать на «Изменить уровень списка». Среди появившихся вариантов нужно выбрать требуемый, и кликнуть по нему мышкой.

      

      Создание списка из готового текста

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

      Автоматическое создание списка

      Каждый, пробовавший набирать текст в MSWord, наверное замечал, что если в начале нового абзаца вставить звездочку * или знак единицы с точкой 1., то программа автоматически создает маркированный или нумерованный список. Так в программе реализовано автоматическое создание списка.

      Таким образом, в программе Word Office имеется возможность создания маркированных и нумерованных списков, а также многоуровневых списков. Создание списков при помощи специальных инструментов, а не вручную, позволяет сохранить форматирование текста, которое иногда нарушается при открытии файла в других версиях тестового редактора.

      Маркированный список.

      Маркированный список -каждый элемент списка располагается с новой строки, при этом слева, сверху и снизу создаются определенные отступы. Каждый пункт списка начинается с маркера, в качестве маркера может использоваться закрашенный кружок (используется по умолчанию), окружность или квадратик.

      Нумерованные списки.

      Нумерованные списки представляют собой списки, в которых каждый пункт имеет порядковый номер, создаются нумерованные списки.По умолчанию нумерация производится арабскими цифрами.

      В приложении Word можно автоматически создавать маркированные и нумерованные списки при вводе либо можно быстро добавить маркеры или нумерацию к существующим строкам текста.

      Ввод маркированного или нумерованного списка

      Введите знак * (звездочка), чтобы начать маркированный список, или 1. , чтобы начать нумерованный список, а затем нажмите клавишу ПРОБЕЛ или TAB.

      Введите текст.

      Нажмите клавишу ВВОД, чтобы добавить следующий элемент списка.

      В приложении Word будет автоматически вставлен следующий маркер или номер.

      Чтобы завершить ввод списка, дважды нажмите клавишу ВВОД. Чтобы удалить последний маркер или номер в списке, нажмите клавишу BACKSPACE.

      Действия в ситуации, когда маркеры или числа не проставляются автоматически

      Откройте вкладку Файл и нажмите кнопку Параметры .

      Нажмите кнопку Параметры автозамены и откройте вкладку Автоформат при вводе .

      В разделе Применять при вводе установите флажки стили маркированных списков и стили нумерованных списков .

      Добавление маркеров и нумерации в список

      Выделите элементы, к которым необходимо добавить маркеры или нумерацию.

      На вкладке Начальная страница в группе Абзац выберите команду Маркированный список или Нумерованный список .

      

      Нумерация

      Примечания

      Различные стили маркеров и форматы нумерации можно найти, щелкнув стрелку рядом с полями Маркеры или Нумерация на вкладке Главная в группе Абзац .

      Преобразование одноуровневого списка в многоуровневый

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

      Щелкните любой элемент, который необходимо переместить на другой уровень.

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

      

      

      7. Параметры форматирования списков.

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

       списки с нумерацией;

       списки с пометками.

      Номера в списке автоматически корректируются при внесении нового элемента. Имеются возможности сортировки списков. Специальное поле Применить к позволяет применить оформ­ление либо к текущему абзацу, либо только к участку текста, если текст был выделен.

      Для создания списка нужно выбрать те абзацы, которые Вы хотите сделать элементами списка, или установить курсор ввода в тот абзац, с которого будет начинаться список. Затем выполните команду Список из меню Формат .

      В зависимости от того, какой тип списка Вам нужен, активизируйте страницу Мар­кированный для списка с пометками, Нумерованный - для списка с нумерацией или Многоуровневый - для списка со сложной ну­мерацией.

      Доброго всем времени суток, мои дорогие друзья и читатели. Вчера я справлял и хочу сказать, что прошло всё хорошо, как и планировалось — в семейном кругу. Ну это так и должно было быть. Всё таки сидели в семейном кругу. Ну 19 июня буду отмечать уже с друзьями, так что будет продолжение банкета. Но сегодня мы наконец можем вернуться в рабочие будни (правда я в отпуске) и продолжить изучение html языка.

      Вы знаете? Вчера мы как раз с супругой составляли список того, что нужно покупать в дом, на день рождения, на отдых, и мне как раз пришло в голову: «О. А следующую статью я как раз посвящу спискам в html.» Вообще существует два основных типа, поэтому каждому типу я захотел посвятить отдельную статью. И вот сегодня мы будем изучать маркированный список html.

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

      Компьютерные комплектующие:

      • Материнская плата
      • Оперативная память
      • Жесткий диск
      • Видеокарта
      • И т.д.

      Давайте теперь посмотрим как это всё воспроизвести в html

      Чтобы делать такие списки, нам нужно будет использовать два парных .

      • — unordered list (неупорядоченный список). Этот тег ставится в начале списка и закрывается в самом конце. Он сообщает нам, что здесь будет находиться маркированный неупорядоченный список.
        • — list item (пункт списка). В эти теги заключается каждый элемент списка.

        На деле процедура создания маркированного списка очень легкая и я покажу вам на примере:

        • Peugeot
        • Opel

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

        

        Атрибуты

        Ну и конечно я не могу не рассказать вам про , относящиеся к данным тегам. Правда на самом деле эти атрибуты в html уже не используются, так как всё тоже самое проще и удобнее проделывать через стили, то есть CSS. Но я всё равно хотел бы рассказать вам для общего развития, поэтому я познакомлю вас с атрибутом type и его значениями.

        Атрибут type ставится для того, чтобы изменить вид маркера, но как я и говорил в сегодняшних реалиях его уже не принято ставить, хотя он всё равно является рабочим.

        

        • — это значение стоит по умолчанию, так что его вообще нет смысла прописывать. Маркеры выглядят как черные закрашенные кружочки;
          • — благодаря этому значению маркер останется круглым, но будет уже не закрашенным;
            • — в данном случаем маркеры превратятся в маленькие черные квадратики.

              Попробуйте сами посмотреть, как это работает и вы увидите все изменения.

              

              Вложенный список

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

              Сделать это абсолютно несложно, просто в тот тег

            • , который мы хотим расширить добавляем новый контейнер списка
              , и уже туда вставляем очередной набор тегов
              • между которыми и будут написаны модели автомобилей. Все понятно? Если нет, то смотрим, как это выглядит в коде.

                

                Теперь сохраняем и запускаем всё это дело в браузере. Смотрите, что у нас получилось: теперь в каждом элементе списка есть еще один новый cписок. Этого-то мы и добивались. И если вы заметили, то маркеры по умолчанию ставятся другие, нежели родительские. Это сделано специально, чтобы не путаться, но вы можете поставить нужный атрибут и выбрать свой маркер. Я думаю, что тут всё должно быть понятно.

                

                Но в дальнейшем мы изучим CSS и будем делать уже всё в соответствии, как и надо. Благодаря стилям можно намного улучшить отображение списка и даже сделать собственный маркер. Видите меню у меня на блоге (Главная, Все статьи, Об авторе и т.д.)? Да и вообще можно зайти практически на любой сайт и увидеть подобное меню. Так вот, все эти пункты меню — это элементы списка, только он обработаны через CSS.

                

                Ну в общем я думаю, что суть вы уловили. Но если вы хотите хорошо разбираться в HTML и CSS, то я вам настоятельно рекомендую посмотреть курс "HTML5 и CSS3 с нуля до профи ". Благодаря этому курсу вы с легкостью изучите все основы html и css, а также научитесь самостоятельно верстать несколько типов сайтов: сайты-визитки, блоги, интернет-магазины, и даже лендинги. Курс действительно потрясающий.

                С уважением, Дмитрий Костин.