HTML学习笔记(列表)

最新推荐文章于 2024-06-07 08:21:52 发布

Re_Dreamer

最新推荐文章于 2024-06-07 08:21:52 发布

阅读量714

点赞数 1

分类专栏：网页前端之路文章标签： html 前端

本文链接：https://blog.csdn.net/kedat/article/details/121415542

版权

网页前端之路专栏收录该内容

3 篇文章 0 订阅

订阅专栏

无序列表：

有序列表：

自定义列表：

无序列表：<ul></ul>

可嵌套<li></li>,最好不要加入其余如<p></p>,<a></a>等元素，但<li></li>中可以

且部分属性相似于表格

代码：

<!DOCTYPE html>
<html>
    <head>
        <title>列表</title>
    </head>
    <body>
    <ul align="center">
            <h1>小说排行</h1>
            <li>123<a href='#' target="_blank"> we</a><p>er</p></li>
            <li>213</li>
            <li>312</li>
    </ul>
    </body>
</html>

演示：

有序列表：<ol></ol>

与无序列表类似，(貌似可嵌套于无序列表,但没什么用)

<!DOCTYPE html>
<html>
    <head>
        <title>列表</title>
    </head>
    <body>
        <ul align="center">
        <ol>
            <h1>小说排行</h1>
            <li>123<a href='#' target="_blank"> we</a><p>er</p></li>
            <li>213</li>
            <li>312</li>
        </ol>
        </ul>
    </body>
</html>

自定义列表：<dl></dl>(仅可包含dd和dt)

<dt>名词</dt>

<dd>解释1</dd>

<dd>解释2</dd>

dd与dt为并列关系而非包含

<!DOCTYPE html>
<html>
    <head>
        <title>列表</title>
    </head>
    <body>
        <dl>
            <dt>了解更多</dt>
            <dd><a href='#'>必应一下</a></dd>
            <dd><a href='#'>贴吧求助</a></dd>
            <dt>关注我</dt>
            <dd><a href='#'>csdn</a></dd>
            <dd><a href='#'>百度贴吧</a></dd>
        </dl>
    </body>
</html>

Re_Dreamer

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记(列表)

无序列表：<ul></ul>可嵌套<li></li>,最好不要加入其余如<p></p>,<a></a>等元素，但<li></li>中可以且部分属性相似于表格代码：<!DOCTYPE html><html> <head> <title>列表</title> </head&gt
复制链接

扫一扫