HTML 학습을 위한 HTML 목록 소개(코드 예제)-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML 학습을 위한 HTML 목록 소개(코드 예제)

青灯夜游

Oct 16, 2018 pm 04:26 PM

html li ol 목록

이 글에서는 간단한 코드 예제를 통해 HTML 학습을 위한 HTML 목록을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1, 렌더링.

둘, 코드.

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>html 列表</title></head><body>    <!--无序列表-->    <h4>An Unordered list</h4>    <ul>        <li>Cofferr</li>        <li>tea</li>        <li>Mide</li>    </ul>    <!--有序列表-->    <ol start="50">        <li>Cooffee</li>        <li>Tea</li>        <li>Mike</li>    </ol>    <!--自定义列表-->    <dl>        <dt>Coffer</dt>        <dd>--black hot drink</dd>        <dt>mike</dt>        <dd>--white cold drink</dd>    </dl>    <!--不同类型的有序列表-->    <h4>Numbered list:</h4>    <ol>        <li>apples</li>        <li>bananas</li>        <li>lemons</li>        <li>orange</li>    </ol>    <h4>letters list:</h4>    <ol type="A">        <li>apples</li>        <li>bananas</li>        <li>lemons</li>        <li>orange</li>    </ol>
    <h4>Lowercase  letters list:</h4>
    <ol type="a">
        <li>apples</li>
        <li>bananas</li>
        <li>lemons</li>
        <li>orange</li>
    </ol>
    <h4>Roman numbers list:</h4>
    <ol type="I">
        <li>apples</li>
        <li>bananas</li>
        <li>lemons</li>
        <li>orange</li>
    </ol>
    <h4>lowercase Roman numbers list:</h4>
    <ol type="i">
        <li>apples</li>
        <li>bananas</li>
        <li>lemons</li>
        <li>orange</li>
    </ol>
    <!--不同类型的无序列表-->
    <p><b>Note:</b> The type attribute of the ul tag is deprecated in HTML 4, and is not supported in HTML5. Therefore we have used the style attribute and the CSS list-style-type property, to define different types of unordered lists below:</p>
    <h4>disc bullets list:</h4>
    <ul style="list-style-type:disc">
        <li>Apples</li>
        <li>bananas</li>
        <li>lemons</li>
        <li>orange</li>
    </ul>
    <h4>circle bullets list:</h4>
    <ul style="list-style-type:circle">
        <li>Apples</li>
        <li>bananas</li>
        <li>lemons</li>
        <li>orange</li>
    </ul>
    <h4>square bullets list:</h4>
    <ul style="list-style-type:square">
        <li>Apples</li>
        <li>bananas</li>
        <li>lemons</li>
        <li>orange</li>
    </ul>
    <!--嵌套列表-->
    <h4>A list inside a list:</h4>
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <ul>
            <li>black tea</li>
            <li>green tea</li>
        </ul>
        <li>Mike</li>
    </ul>
    <!--嵌套列表2-->
    <h4>lists inside a list</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>mick</li>
    </ul>
    <!--自定义列表-->
    <h4>A definition List</h4>
    <dl>
        <dt>coffee</dt>
        <dd>-black hot drink</dd>
        <dt>mike</dt>
        <dd>-white cold drink</dd>
</body>

</html>

로그인 후 복사

참고: "루키 튜토리얼"

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면 HTML 비디오 튜토리얼, Html5 비디오 튜토리얼, 부트스트랩 비디오 튜토리얼을 방문하세요!

위 내용은 HTML 학습을 위한 HTML 목록 소개(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.