HTML 목록

HTML은 정렬된 목록, 정렬되지 않은 목록 및 정의된 목록을 지원합니다.

HTML 목록

< tr class="firstRow">

순서가 지정된 목록

첫 번째 목록 항목
有序列表
第一个列表项
第二个列表项
第三个列表项
无序列表
列表项
列表项
列表项
< /li>
두 번째 목록 항목
세 번째 목록 항목

순서가 지정되지 않은 목록

목록 항목
목록 항목
在线实例
< /li>
목록 항목<🎜>

<🎜 ><🎜><🎜><테이블 너비 ="100%" border="0">

온라인 예시<🎜>

1. 순서가 없는 목록
이 예는 순서가 없는 목록을 보여줍니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head> 
<body>

<h4>无序列表:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

2. 순서가 지정된 목록
이 예에서는 순서가 지정된 목록을 보여줍니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 
</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

(더 많은 예는 이 페이지 하단에서 찾을 수 있습니다.)

HTML 순서 없는 목록

순서 없는 목록은 항목 목록입니다. 굵은 점(일반적으로 작은 검은색 원)이 표시됩니다.

순서가 지정되지 않은 목록은 <ul> 태그 li>

</ul>

브라우저에 다음과 같이 표시됩니다.

커피

우유
HTML Ordered List

목록 항목에는 번호가 매겨져 있습니다.

<ol>

</ol>

브라우저에 다음과 같이 표시됩니다.

커피

우유
HTML 사용자 정의 목록

맞춤 목록은 <dl> 태그로 시작됩니다. 각 사용자 정의 목록 항목은 <dt>로 시작됩니다. 각 사용자 정의 목록 항목의 정의는 <dd>로 시작됩니다.

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

브라우저에 다음과 같이 표시됩니다.

Coffee

- 검은색 따뜻한 음료
우유
- 흰색 차가운 음료
주의사항- 유용한 팁

팁:

단락, 줄 바꿈, 이미지, 링크, 기타 목록 등은 목록 항목 내에서 사용할 수 있습니다.

예제 더보기

1. 다양한 유형의 정렬된 목록

이 예에서는 다양한 유형의 정렬된 목록을 보여줍니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>编号列表：</h4>
<ol>
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>大写字母列表：</h4>
<ol type="A">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写字母列表：</h4>
<ol type="a">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>罗马数字列表：</h4>
<ol type="I">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

<h4>小写罗马数字列表：</h4>
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>  

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

2. 다양한 유형의 정렬되지 않은 목록 이 예에서는 다양한 유형의 정렬되지 않은 목록을 보여줍니다.

인스턴스

아아아아

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

3. 중첩 목록
이 예에서는 목록을 중첩하는 방법을 보여줍니다. .

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<p><b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p>

<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>  

<h4>正方形列表：</h4>
<ul style="list-style-type:square">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

4. 중첩 목록 2
이 예에서는 더 복잡한 중첩 목록을 보여줍니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>嵌套列表：</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

5. 사용자 정의 목록
이 예는 정의 목록을 보여줍니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<h4>嵌套列表：</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요