HTML 정렬 목록

이 섹션에서는 HTML에서 정렬된 목록을 구현하는 방법을 알아봅니다. 정렬된 목록을 설명하거나 표시하는 방법은 무엇입니까? 매우 간단하고 쉽습니다. 콘텐츠의 정보 목록을 설명하는 데 사용됩니다. 그리고 또 다른 기술은 단일 목록에 여러 목록 요소가 포함될 수 있다는 것입니다.

HTML의 목록은 세 가지 유형으로 분류할 수 있습니다.

1. 주문목록
2. 순서가 지정되지 않은 목록
3. 정의 목록

이 글에서는 예제를 통해 순서가 지정된 목록 사양을 살펴보겠습니다. 순서가 지정된 목록은 목록이 생성될 때 특정 순서 정보를 정의합니다. 예를 들어 세로좌표 정보나 정보 번호를 표시합니다.

순서 목록 구문

정렬 목록은

라는 태그를 사용하여 생성됩니다. 요소이며

로 끝납니다. 태그.

순서목록 예시

아래에 언급된 몇 가지 예를 살펴보겠습니다.

예시 #1

<title>HTML Ordered List</title>


<p><strong>There are 6 different airlines:</strong></p>
<ol type="1">
<li>Jet Blue Airlines</li>
<li>Frontier Airlines</li>
<li>South West Airlines</li>
<li> Spirit Airlines</li>
<li> United Airlines</li>
<li>America Airlines</li> </ol>

출력:

이렇게 하면 다음과 같은 결과가 나옵니다

예시 #2

색상이 포함된 순서 목록입니다. 다음 예에서는 특정 카운터 속성을 사용하고

에서 자동 계산 목록 항목을 정의합니다. 계수 기능을 활성화하기 위한 CSS 내부 변수일 뿐입니다.

<title>HTML Ordered List with colors</title>


<style>
ol li {
counter-increment: list;
list-style-type: none;
position: relative;
}
ol li:before {
color: #ff0000;
content: counter(list) ".";
left: -22px;
position: absolute;
text-align: center;
width: 24px;
}</style>
<ol>
<li><span> Norway is a Scandinavian Country</span></li>
<li><span>Oslo is the capital city</span></li>
<li><span>norway is known for its beauty , hiking, fishing</span></li>
<li><span>Ranked among the toppest country in europe</span></li>
</ol><br>

출력:

HTML 순서 목록의 속성 유형

순서가 지정된 목록을 나타내기 위해 이 태그에는 5가지 중요한 속성 유형이 있습니다. HTML

태그는 순서가 지정된 목록의 항목 목록을 나타내며, 순서가 가장 중요한 경우 영숫자, 숫자 또는 단순히 알파벳 순서일 수 있습니다. Ordered 목록의 가능한 속성은 다음과 같습니다.

1. 유형 속성

이 속성은 목록에 사용할 번호 매기기 유형을 지정합니다.

• type ='a' – 알파벳 순서로 지정
• type ='A'- 대문자 알파벳 순서 제공
• type ='i' – 로마숫자 소문자 제공
• type =' I'- 대문자 로마 숫자 제공

이러한 유형의 번호 매기기는 다음과 같습니다.

나.  속성 유형='a.'

알파벳 소문자로 목록을 만들려면 이 유형을 사용합니다. 다음 예시에서는 순서가 지정된 목록을 소문자로 표시하고 이탤릭체로 표시했습니다.

예:

<title>HTML Ordered List types</title>


<style>
ol li span {
font-weight: normal;
}
</style>
<p>Did you know that:</p>
<p>Skills required to become a data Scientist</p>
<ol type="a">
<li><span><i> steps</i></span></li>
<li><span><b>There should be a prior knowledge in SAS and R programming.</b></span></li>
<li>
<span><b>They should have a strong calibre in creativity and analysis</b></span><b></b>
</li>
</ol>

출력:

 II. 속성 유형='A'

순서 목록은 알파벳 소문자의 속성 유형을 가질 수 있습니다. 아래 예에서는 목록 구조에서 이 속성을 사용하는 방법과 문자를 굵게 표시하는 방법을 보여줍니다. 정렬된 목록을 굵게 표시하려면

예:

<title> Example for Nested list</title>


<p> State capitals of the united States</p>
<style>
ol {
font-weight:bolder;
}
ol li span {
font-weight: normal;
}
</style>
<ol type="A">
<li> <span>Alabama
<ul>
<li>Montgomery</li>
</ul>
</span>
</li>
<li>
<span>Arizona
<ul>
<li>Phoenix</li>
</ul>
</span>
</li>
<li> <span>California
<ul>
<li>Sacramento</li>
</ul>
</span>
</li>
<li> <span>New jersey
<ul>
<li>Trenton</li>
</ul>
</span>
</li>
<li>
<span>Washington
<ul>
<li>Olympia</li>
</ul></span>
</li>
<li> <span>Pennsylvannia
<ul>
</ul></span> </li>
<li>Harisburg</li>
</ol>

출력:

III. 속성 유형='i.'

이 기능은 소문자 로마자를 나타냅니다.

예:

<title>HTML Ordered List types</title>


<p> EDUCBA HTML List Tutorial:</p>
<ol>
<li value="4">Ordered list</li>
<li>unordered list</li>
<li>Definition list
<ol type="i">
<li> <i>Introduction to list </i>
</li>
<li><i>Syntax a List</i></li>
<li>
<i> Types with an example</i>
</li>
</ol>
</li>
<li>Snapshots</li>
</ol>

출력:

IV. 속성 유형=' I.'

이 기능은 대문자 로마 숫자로 출력됩니다.

예:

<title>HTML Ordered List Demo</title>


<h2> List of Vegetables
<ol type="I">
<li>Carrot</li>
<li> Radish</li>
<li> Sweet Corn</li>
</ol>
<ol>
<li>Fruits List
<ol type="a">
<li>Pomegrante</li>
<li>Bananas</li>
<li>Pears</li>
</ol>
</li>

</ol>
</h2>

출력:

2. 시작 속성

시작 속성은 순서가 지정된 목록 번호의 시작 값을 정의합니다. 기본 숫자 '1'뿐만 아니라 처음부터 어떤 숫자로든 시작할 수 있습니다. 예: 시작=6. 현재 HTML5에서 사용되었습니다.

예:

다음 예에서는 스타일 유형을 upper_alpha로 사용하고 =3으로 시작했습니다. 따라서 출력은 'C'부터 표시됩니다.

<title> Example for Nested list</title>


<p> RICHEST COUNTRIES IN THE WORLD</p>
<style>
ol { list-style-type: upper-alpha;
font-weight:bolder;
}
ol li span {
font-weight: normal;}
</style>
<ol start="3">
<li>Quatar known for his oil and petrochemical reserves</li>
<li>Norway known for the beauty of nature with petroleum producer</li>
<li>Singapore with global trade center</li>
</ol>

출력: 

3. 역속성

이것은 HTML5에 도입된 새로운 속성으로, 웹 브라우저에서 항목이 역순으로 표시된다는 것을 나타냅니다. 사용하려면

카운터를 반전시키기 위해 어떤 값이든 취하는 부울 속성입니다. 선언
태그.

예:

<title>HTML Ordered List</title>


<h2 id="How-to-do-Balle-Technique">How to do Balle Technique</h2>
<ol>
<li>Turn out</li>
<li>Alignment</li>
<li>Pointed Toes</li>
</ol>
<hr>
<h2 id="Balle-Steps"> Balle Steps</h2>
<ol reversed="True">
<li>Seven Movements</li>
<li>Plier</li>
<li>Etendre </li>
<li>Glisser</li>
<li>Eliever</li>
</ol>

출력:



결론

그래서 순서대로 나열한 내용을 끝까지 요약해 보았는데 거의 모든 브라우저에서 지원됩니다. 물론 HTML 태그 요소에 목록을 얼마든지 만들 수 있습니다. 이 기사에서는 기본 구현을 이해하기 위해 선택된 예제에만 중점을 두었습니다. 따라서 이 주제를 배우는 것은

1. 여기에 사용된 태그는 기억하기 매우 쉽습니다.

위 내용은 HTML 정렬 목록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!