web前端之初级html-学习笔记二分享

治秃用霸王

已于 2022-09-16 22:51:10 修改

阅读量193

点赞数

文章标签： html 学习 servlet

于 2022-09-08 00:28:35 首次发布

本文链接：https://blog.csdn.net/weixin_52112965/article/details/126756466

版权

初级html笔记学习二

二、HTML标签学习
5、列表标签(*)
目标：能够使用无序列表、有序列表、自定义列表标签，首先网页中列表结构的搭建

       学习路径：
       1、列表应用的场景
           场景：在网页中按照行展示关联性的内容。如：新闻列表、排行表、账单等等
           特点：按照行的方式，整齐显示内容
           种类：无序列表、有序列表、自定义列表

       2、无序列表
           场景：在网页中表示一组无顺序之分的列表，如新闻列表
           ul       表示无序列表的整体，用于包裹li标签
           li       表示无需列表的每一项，用于包含每一行的内容

特点：列表的每一项前默认显示圆点标识

           注意：
               ul标签中只允许包含li标签
               li标签可以包含任意内容


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序列表</title>
</head>
<body>
    <h1>水果列表</h1>
    <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
        <li>哈密瓜</li>
        <li>火龙果</li>
    </ul>
</body>
</html>

       3、有序列表
           场景：在网页中表示一组有顺序之分的列表，如：排行榜
           ol       表示有序列表的整体，用于包裹li标签
           li       表示有序列表的每一项，用于包含每一行的内容

特点：列表的每一项前Morris显示序号标识

           注意：
               ol标签中只允许包含li标签
               li标签可以包含任意内容


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表</title>
</head>
<body>
    <h1>帅气排行榜</h1>
    <ol>
        <li>胡歌</li>
        <li>我</li>
        <li>世界上的其他人</li>
    </ol>
</body>
</html>

       4、自定义列表
           场景：在网页的底部导航中通常会使用自定义列表实现

           dl   表示自定义列表的整体，用于包裹dt/dd标签
           dt   表示自定义列表的主题
           dd   表示自定义列表的针对主题的每一项内容

特点dd前会默认显示缩进效果

           注意：
               dl标签中只允许包含dd/dt标签
               dd/dt标签可以包含任意内容


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义列表</title>
</head>
<body>
    <dl>
        <dt>帮助中心</dt>
        <dd>账号管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
    </dl>
</body>
</html>

   6、表格标签(*)
       目标：能够使用表格相关的标签和属性，实现网页中表格结构的搭建
       学习路径：
           1、表格的基本标签
               场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表

               table   表格整体，用于包裹多个tr
               tr       表格每行，可用于包裹td
               td       表格单元格，可用于包裹内容

注意：
标签的嵌套关系：table>tr>td


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格基本使用</title>
</head>
<body>
    <!-- table > tr > td -->
    <table border="6" width="666" height="666">
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>评语</td>
        </tr>
        <tr>
            <td>小哥哥</td>
            <td>100分</td>
            <td>小哥哥真聪明</td>
        </tr>
        <tr>
            <td>小姐姐</td>
            <td>100分</td>
            <td>小姐姐真聪明</td>
        </tr>
        <tr>
            <td>总结</td>
            <td>没我聪明</td>
            <td&g