1. 图片
? ? ?<img src="./images/bear.jpg" alt="小熊">?
?2. 链接
? ? <a href="https://www.zqzip.com" target="_blank">中青网</a>?
?3. 列表；ul+li 无序列表?
? ? <ul>
? ? ? ? <li>我是无序列表1</li>
? ? ? ? <li>我是无序列表2</li>
? ? ? ? <li>我是无序列表3</li>
? ? </ul>?
?ol+li ；有序列表
? ? ?<ol>
? ? ? ? <li>我是有序列表1</li>
? ? ? ? <li>我是有序列表2</li>
? ? ? ? <li>我是有序列表3</li>
? ? </ol>?
自定义列表；dl+dt+dd ； dt+dd 名词解释
? ??<dl>?
? ? ? ?
? ? ? ? <dt>地址: </dt>
? ? ? ? <dd>合肥市政务新区</dd>
? ? ? ? <dt>邮箱:</dt>
? ? ? ? <dd>admin@php.cn</dd>
? ? ? ? <dd>zhulaoshi@php.cn</dd>
? ? </dl>?
?? ? <!-- 1. 应用场景1: 导航 -->
? ? <ul class="nav">
? ? ? ? <li class="item"><a href="">link1</a></li>
? ? ? ? <li class="item"><a href="">link2</a></li>
? ? ? ? <li class="item"><a href="">link3</a></li>
? ? </ul>
? ? <!-- 2. 图文列表 -->
? ? <ul class="nav" style="display: flex; list-style: none;">
? ? ? ? <li class="item">
? ? ? ? ? ? <a href="#">
? ? ? ? ? ? ? ? <img src="./images/bear.jpg" alt="">
? ? ? ? ? ? ? ? <a href="">四个小伙伴</a>
? ? ? ? ? ? </a>
? ? ? ? </li>
? ? ? ? <li class="item"><a href=""><a href="#">
? ? ? ? ? ? <img src="./images/dog.jpg" alt="">
? ? ? ? ? ? <a href="">二个恩爱的小夫妻</a>
? ? ? ? </a></a></li>
? ? ? ? <li class="item"><a href=""><a href="#">
? ? ? ? ? ? <img src="./images/duck.jpg" alt="">
? ? ? ? ? ? <a href="">孤独的丑小鸭</a>
? ? ? ? </a></a></li>
? ? </ul>?
|