HTML 설명을 나열합니다
이름과 값의 그룹으로 구성하고, HTML5 이전 정의 목록 알려진 설명 목록. 설명 목록은 "용어 및 정의, 메타 데이터 주제와 가치, 질문과 답변, 또는 이름 값 데이터의 다른 그룹"그룹을위한 것입니다.
DL은 HTML 태그에 존재하고, HTML 2.0에서 표준화되었다; 여전히 현재.
정렬되지 않은 목록과 HTML의 정렬 된 목록의 예 :
정렬되지 않은 목록 :
- 목
- 목
- 목
- 목
순서가있는 목록 :
- 첫 번째 항목
- 두 번째 항목
- 세 번째 항목
- 네 번째 항목
정렬되지 않은 HTML 목록
순서가없는 목록은 시작 <ul> 태그입니다. 각 목록 항목은 시작 <li> 태그입니다.
목록 항목은 총알으로 표시됩니다 (small black circles) :
정렬되지 않은 HTML 목록 - Style 특성
style 속성은 마커의 스타일을 정의하기 위해, 정렬되지 않은 목록에 추가 할 수 있습니다 :
| 스타일 | 기술 |
|---|---|
| list-style-type:disc | 목록 항목이 총알으로 표시됩니다 (default) |
| list-style-type:circle | 목록 항목은 원으로 표시됩니다 |
| list-style-type:square | 목록의 항목은 사각형으로 표시됩니다 |
| list-style-type:none | 목록 항목은 표시되지 않습니다 |
Disc :
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> »그것을 자신을 시도 Circle :
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> »그것을 자신을 시도 Square :
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> »그것을 자신을 시도 None :
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> »그것을 자신을 시도 정렬 된 HTML 목록
정렬 된 목록은 시작 <ol> 태그입니다. 각 목록 항목은 시작 <li> 태그입니다.
목록 항목은 번호로 표시됩니다 :
정렬 된 HTML 목록 - Type 특성
type 속성은 마커의 유형을 정의, 정렬 된 목록에 추가 할 수 있습니다 :
| 유형 | 기술 |
|---|---|
| type="1" | 목록 항목이 번호로 번호가됩니다 (default) |
| type="A" | 목록 항목은 대문자로 번호가됩니다 |
| type="a" | 목록 항목은 소문자와 숫자됩니다 |
| type="I" | 목록 항목은 대문자 로마 숫자로 번호가됩니다 |
| type="i" | 목록 항목은 소문자 로마 숫자로 번호가됩니다 |
HTML 설명 목록
HTML은 설명 목록을 지원합니다.
설명리스트는 각 용어의 설명, 용어의리스트이다.
<dl> 태그는 상기 설명 목록을 정의 <dt> 태그 용어 정의 (name) , 및 <dd> 태그는 각 용어를 설명한다 :
예
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl> »그것을 자신을 시도 중첩 된 HTML 목록
목록 중첩 될 수 있습니다 (lists inside lists) :
예
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul> »그것을 자신을 시도 목록 항목 등 이미지와 링크와 같은 새로운 목록 및 기타 HTML 요소를 포함 할 수 있습니다
수평 목록
HTML 목록은 CSS와 여러 가지 방법으로 스타일을 지정할 수 있습니다.
한 인기있는 방법은 수평으로 표시 할 목록 스타일을하는 것입니다 :
예
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</body>
</html> »그것을 자신을 시도 약간의 여분의 스타일과 함께, 당신은 메뉴처럼 보이게 할 수 있습니다 :
예
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
} »그것을 자신을 시도 장 요약
- HTML 사용 <ul> 정렬되지 않은 목록을 정의하는 요소를
- 은 HTML 사용 style 글 머리 기호 스타일을 정의하는 속성을
- HTML 사용 <ol> 정렬 된 목록을 정의하는 요소를
- 은 HTML 사용 type 번호 매기기 유형을 정의하는 속성을
- HTML 사용 <li> 목록 항목을 정의하는 요소를
- HTML 사용 <dl> 설명 목록을 정의하는 요소를
- HTML 사용 <dt> 설명 용어를 정의하는 요소를
- HTML 사용 <dd> 설명 데이터를 정의하는 요소를
- 목록은 목록 안에 중첩 될 수 있습니다
- 목록 항목은 다른 HTML 요소를 포함 할 수
- CSS의 속성 디스플레이를 사용하여 수평 목록을 표시 인라인
연습으로 자신을 테스트!
연습 1» 연습 2» 연습 3» 운동 4» 운동 5» 운동 6»
HTML 목록 태그
| 꼬리표 | 기술 |
|---|---|
| <ul> | 정렬되지 않은 목록을 정의 |
| <ol> | 정렬 된 목록을 정의 |
| <li> | 목록 항목을 정의합니다 |
| <dl> | 설명의 목록을 정의합니다 |
| <dt> | 설명 목록의 용어를 정의 |
| <dd> | 설명 목록에 설명을 정의합니다 |