HTML 정렬 목록

WBOY원래의: 2024-09-04 16:43:281095검색

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

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

주문목록
순서가 지정되지 않은 목록
정의 목록

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

순서 목록 구문

정렬 목록은

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

HTML 정렬 목록

순서목록 예시

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

예시 #1

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Ordered List</title>
</head>
<body>
<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>
</body>
</html>

출력:

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

HTML 정렬 목록

예시 #2

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Ordered List with colors</title>
</head>
<body>
<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/>
</body></html>

출력:
HTML 정렬 목록

HTML 순서 목록의 속성 유형

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

1. 유형 속성

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

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

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

나. 속성 유형='a.'

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

예:

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Ordered List types</title>
</head>
<body>
<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</span></i></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</span><b></li>
</ol>
</body>
</html>

출력:

HTML 정렬 목록

II. 속성 유형='A'

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