HTML文本标签与列表标签的学习

deng_hongbin

已于 2024-05-20 09:20:42 修改

阅读量245

点赞数 3

文章标签： html 学习前端

于 2024-05-20 09:14:28 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_53598426/article/details/139013492

版权

1.文本标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本标签</title>
</head>
<body>
    <!--标题-->
    <h1>1号标题</h1>
    <h2>1号标题</h2>
    <h3>3号标题</h3>
    <h4>4号标题</h4>
    <h5>5号标题</h5>
    <h6>6号标题</h6>
    <hr> <!--分割线-->
    
    <h1><font color="red">《四大天王》</font></h1> <!--标题属性-->
    <h2>第一章</h2>
    <p>从前有座山<br>山上有座庙<br>庙里有个和尚</p> <!--p为换行但有间距，br为强制换行但无间距-->
    <hr> <!--分割线-->

    <p><b>从前有座山</b>,<strong>山上有座庙,庙里有个和尚</strong></p> <!--b与strong都是加粗强调，但strong可识别-->
    <hr> <!--分割线-->

    <p>
        <i>分久必合，</i><br>  <!--i与em为斜体但em有重音-->
        <em>合久必分。</em>    
    </p>

</body>
</html>

运行结果：
文本标签运行结果

2.列表标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>1.有序列表</h2>
    <ol>             <!--快捷方式：ol>li*3-->
        <li>西瓜</li>
        <li>番茄</li>
        <li>西红柿</li>
    </ol>
    <hr>   <!--分割线-->

    <h2>2.无序列表</h2>
    <ul>             <!--快捷方式：ul>li*3-->
        <li>奶茶</li>
        <li>咖啡</li>
        <li>水</li>
    </ul>
    <hr>   <!--分割线-->

    <h2>3.自定义列表</h2>
    <dl>              <!--快捷方式：dl>dt*3--> 
        <dt>裤子品牌</dt>                 <!--dt：列表标题 dd：对列表标题的描述--> 
        <dd>鸿星尔克、安踏、李宁</dd>
        <dt>衣服品牌</dt>
        <dd>北面、乔丹、贵人鸟</dd>
        <dt>运动鞋品牌</dt>
        <dd>耐克、阿迪达斯、匡威</dd>
    </dl>
    <hr>   <!--分割线-->

    <h2>4.嵌套列表</h2>
    <ol>
        <li>深圳
            <ul>
                <li>深圳北站</li>
                <li>深圳南站</li>
                <li>深圳站</li>
            </ul>
        </li>
        <li>广州
            <ul>
                <li>广州南站</li>
                <li>广州东站</li>
                <li>广州北站</li>
            </ul>
        </li>
    </ol>

</body>
</html>