• html02-标签继续学习

    1.列表标签

            1.1 列表标签的使用场景

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

            1.2无序列表

    2.     <ul>
    3.         <li>北京li>
    4.         <li>上海li>
    5.         <li>天津li>
    6.     ul>

            1.3 有序列表

    2.         <ol>
    3.             <li>北京li>
    4.             <li>上海li>
    5.             <li>天津li>
    6.         ol>

            1.4 自定义列表

    2.         <dl>
    3.             <dt>帮助中心dt>
    4.             <dd>账户管理dd>
    5.             <dd>购物指南dd>
    6.             <dd>订单操作dd>
    7.         dl>

    2.表格标签

            2.1表格的基本标签

                    场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表
                    基本标签：
    标签名说明
    table表格整体，可用于包裹多个tr标签
    tr表格每行，可用于包裹多个td标签
    td表格单元格，可用于包裹内容

                    注意点：

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

            2.2 表格相关属性

            场景：设置表格基本展示效果
            常见相关属性：
    属性名属性值效果
    border数字边框宽度
    weight数字表格高度
    width数字表格宽度

              注意点：
                    实际开发时针对于样式效果 推荐用CSS设置

            2.3 表格标题和表头单元格标签

            场景：在表格中表示整体大标题和一列小标题
            其他标签：
            
    标签名名称说明
    caption表格大标签表示表格整体大标题，默认在表格整体顶部居中位置显示
    th表头单元格表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示
              注意点：
                    caption标签书写在table标签内部
                    th标签书写在tr标签内部（用于替换td标签）

            2.4 表格标签的结构

            场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
              结构标签：
            
    标签名名称
    thead表格头部
    tbody表格主体
    tfoot表格底部

             注意点：
                    表格结构标签内部用于包裹tr标签
                    表格的结构标签可以省略

            2.5 合并单元格

    3.表单标签

            3.1 input 标签

            场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页
            标签名：input
                    input标签可以通过 type属性值的不同 ，展示不同效果
            
    表签名type属性值说明属性
    inputtext文本框，用于输入单行文本

    placeholder

    （提示用户输入内容的文本）

    inputpassword密码框，用于输入密码

    placeholder

    （提示用户输入内容的文本）

    inputradio单选框，用于多选一

    name（分组，有相同name的为一组，一组只有一个被选中）

    checked（默认选中）

    inputcheckbox多选框，用于多选多checked（默认选中）
    inputfile文本选择，用于之后上传文件multiple（多文件选择）
    inputsubmit提交按钮，用于提交
    inputreset重置按钮，用于重置
    inputbutton普通按钮，默认无功能，之后配合js添加功能
    submit、reset、button
    如果需要实现以上按钮功能，需要配合form标签使用
    form使用方法：用form标签把表单标签一起包裹起 
    1. 昵称：<input type="text">
    2.     <br>
    3.     <br>
    4.     密码:  <input type="password" placeholder="请输入密码：">
    5.     <br>
    6.     <br>
    7.     性别： <input type="radio" name="sex" checked>男 <input type="radio" name="sex">女
    8.     <br>
    9.     <br>
    10.     爱好： <input type="checkbox">敲代码 <input type="checkbox">熬夜 <input type="checkbox"> 掉头发
    11.     <br>
    12.     <br>
    13.     <input type="file" multiple>
    14.     <br>
    15.     <br>
    16.     <input type="submit">
    17.     <input type="reset">
    18.     <input type="button" value="普通按钮">

    3.2 select下拉菜单标签

    1.  
    2.         <select>
    3.             <option selected>北京option>
    4.             <option>天津option>
    5.             <option>上海option>
    6.         select>

            3.3 textarea文本域标签

  • 相关阅读:
    新登录接口独立版变现宝升级版知识付费小程序-多领域素材资源知识变现营销系统
    （杂谈）关于UIE的一点感想
    mysql创建数据库时的常见约束
    93.（cesium之家）cesium动态单体化-倾斜摄影（楼栋）
    kubernetes namespace pod label deployment介绍与命令
    【谐云课堂】Cilium 流量治理功能与部署实践
    【语义分割】语义分割概念及算法介绍
    Docker容器获取宿主机信息
    Spring Cloud Alibaba【认识分布式事物、分布式事务产生的场景、什么是两阶段提交、XA方案、Seata方案、业务说明、下载启动Seata服务】（十）
    SpringBoot 集成JWT实现登录认证
  • 原文地址：https://blog.csdn.net/weixin_69039908/article/details/133927715