Making lists in html

See the Pen definition-list by Amrish Kushwaha (@isamrish) on CodePen.

Что такое вложенные списки?

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

See the Pen nested-list by Amrish Kushwaha (@isamrish) on CodePen.

Стиль списка

Для придания стилей списку используются три CSS-свойства.

list-style-type

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

Это свойство может принимать несколько значений:

• disc (круг)
• square (квадрат)
• circle (окружность)
• decimal (арабские цифры)
• lower-alpha (строчные латинские буквы, =lower-latin)
• lower-roman (римские цифры в нижнем регистре)
• lower-latin (строчные латинские буквы, =lower-alpha)
• lower-greek (строчные греческие буквы)
• upper-alpha (заглавные латинские буквы, =upper-latin)
• upper-roman (римские цифры в верхнем регистре)
• upper-latin (заглавные латинские буквы, =upper-alpha)

С полным списком возможных значений свойства list-style-type можно ознакомиться здесь.

list-style-image

Это свойство используется, чтобы в качестве маркера списка установить изображение. Свойство может принимать два значения: url изображения или none.

See the Pen list-style-image by Amrish Kushwaha (@isamrish) on CodePen.

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

list-style-position

Это свойство служит для определения положения маркера относительно элементов списка. Свойство list-style-position может принимать два значения: inside (внутри) и outside (снаружи).

Пример применения значения inside

Пример применения значения outside

А теперь давайте поиграем с цветами списка

Расцвеченный маркированный список

Вариант 1: элементы списка и маркеры имеют один цвет.

Вариант 2: элементы списка и маркеры имеют разные цвета.

Расцвеченный нумерованный список

Вариант 1: элементы списка и их номера имеют один цвет.

Вариант 2: элементы списка и их номера имеют разные цвета.

Надеемся, статья вам понравилась. Если знаете о списках еще что-то интересное, добавляйте в комментарии!

Источник

How to Make Lists in HTML

This article is part of the Beginner Web Developer Series. The series is targeted to people who’d like to start serious web development, as well as people who are already web developers and want to solidify their knowledge of fundamentals while possibly filling in some holes. If you find yourself tinkering with HTML, CSS, or Javascript until you sort of get it to work, this series is for you. The material in this series is closely tied to my top-rated Coursera course.

As a regular busy person you probably have tons of lists:

• To Do list
• Shopping list
• Ingredients list
• The let’s list other lists list 😁

There is a long list of deep yearning reasons that make lists appeal to our list-loving natures. (I should make a list of those reasons, shouldn’t I? 🤣)

Alright, alright. I am done with that list of corny jokes. 🤣

Jokes aside, lists are a great organizational tool, not only visually, but structurally as well. (As I’ve harped on in this series for a while now, HTML defines structure of our document, not how it visually appears.)

So, let’s learn how to create a list in HTML.

Unordered List

Below is the start of an HTML document containing a list of things ( unordered-lists-before.html )

tag (line 12 and 23). Then each individual item in the list gets surrounded by an
tag.

All is well until we get to the Cookies item. (How true that is!) Stores usually sell the cookies in its own section, so it only makes sense that we make a separate list for all of the different types of cookies we need to get.

If we look at this page in the browser, we can now see our list(s):

Even though HTML isn’t responsible for how something appears, the browser is nice enough to provide default styles for our main list with filled-in bullet points and hallowed-out bullet points for our cookie sub-list.

Let’s Validate

Let’s use an online HTML validator, recommended by the WHATWG, to validate our HTML code.

1. Go to the following link: https://html5.validator.nu/
2. From the drop down that says Address, choose Text Field
3. Erase everything in the text area
4. Copy and paste the HTML code of the unordered-lists-after.html file into that text area and then click the Validate button.

As you can see from the screenshot below, the validator reports our HTML code as valid:

Here is what the validator would output:

tag which isn’t first wrapped inside of an
tag.

Ordered List

There are lists that absolutely require a particular order in which the items must be listed.

For an example of this, let’s take a look at my secret Double Oreo cookie eating procedure/recipe (offered free to the readers of this article) ( ordered-lists-after.html ):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
 
    charset="utf-8"> Ordered Lists   Ordered list Oreo cookie eating procedure:  Open box Take out cookie Make a Double Oreo  Peel off the top part Place another cookie on top of the half with the cream Peel off the top part of another cookie Place the part with the cream on top of the middle cookie   Enjoy!     
 
 tags (which stand for ordered list) instead of the
 tags. Note that I am also using an ordered list ( ol ) for the inner sublist detailing the Double Oreo recipe.
 
 
For completeness, let’s take a look at what this page looks like in the browser:
 
 
By the way, if you closely follow this secret recipe, you should end up with a Double Oreo cookie that looks something like this:
 
 
And you thought I was joking about that, didn’t you? Please! Cookies are no joking matter! (Ok, I AM joking. 😂)
 
Just to show you what the Double Oreo cookie looks like on the inside, here it is.
 
 
The things I put myself through for my audience! 😁
 
Summary
 
Let’s give a quick summary of what we’ve covered in this article:
 
 
Lists provide a natural and commonly used grouping of content
 
Very often, lists are used for structuring navigation portion of the web page
 
Cookies are an essential part of web development
 
 
Resources
 
Questions?
 
If something is not clear about what I wrote in this article, please ask away in the comments below!
 
Источник
 
Читайте также:  Jquery ajax json and html