이 섹션에서는 HTML의 목록 요소를 배웁니다. 이 목록은 비교적 많은 비율의 웹 사이트 디자인을 설명하며 디스플레이 정보는 매우 깔끔하고 직관적이므로 사용자가 이해하기 쉽습니다. 목록 요소의 고급 역할은 후속 CSS 스타일 학습에서 광범위하게 사용됩니다.
데이터 구성을위한 목록웹 페이지의 표시를 제어하는 많은 HTML 태그를 학습 한 후 독자는 처음에 순수한 기사 페이지를 만들 수 있습니다. 이 섹션에서는 HTML의 목록 요소를 배웁니다. 이 목록은 비교적 많은 비율의 웹 사이트 디자인을 설명하며 디스플레이 정보는 매우 깔끔하고 직관적이므로 사용자가 이해하기 쉽습니다. 목록 요소의 고급 역할은 후속 CSS 스타일 학습에서 광범위하게 사용됩니다.
4.4.1 목록의 구조 구성HTML의 목록 요소는 목록 태그로 둘러싸인 구조이며 포함 된 목록 항목은 <li> </li>로 구성됩니다. 특정 구조는 그림 4.17에 나와 있습니다.
4.4.2 정렬되지 않은 목록 만들기이름에서 알 수 있듯이, 순서가없는 목록은 목록 구조의 목록 항목에 순서가없는 목록 양식입니다. 대부분의 웹 애플리케이션은 지정되지 않은 목록을 사용하며 목록 태그는 <ul> </ul>입니다. 작문 방법은 다음과 같습니다.
<ul>
<li> 목록 항목 1 </li>
<li> 목록 항목 2 </li>
<li> 목록 항목 3 </li>
<li> 목록 항목 4 </li>
<li> 목록 항목 5 </li>
</ul>
4.4.3 주문 목록을 작성하십시오이름에서 알 수 있듯이, 주문 된 목록은 목록 구조의 목록 항목에 일련의 목록이 있음을 의미합니다. 위에서 아래로 1, 2, 3 또는 a, b, c 등과 같은 다양한 시퀀스 번호가있을 수 있습니다. ul_ol.htm이라는 d :/ web/ directory에서 웹 페이지 파일을 작성하고 코드 4.17에 표시된대로 코드를 작성하십시오.
코드 4.17 목록 설정 : ul_ol.htm
<html>
<헤드>
<title> 목록 설정 </title>
</head>
<body>
<font size = 5>
웹 프론트 데스크 기술
<ul>
<li> html </li>
<li> css </li>
<li> JavaScript </li>
<li> 플래시 </li>
</ul>
웹 배경 학습
<ol>
<li> asp </li>
<li> asp.net </li>
<li> php </li>
<li> cgi </li>
<li> 루비 </li>
<li> 파이썬 </li>
</ol>
</font>
</body>
</html>
브라우저 주소 표시 줄에 http : //localhost/ul_ol.htm을 입력하면 브라우징 효과가 그림 4.18에 나와 있습니다.
그림 4.18 목록 설정