前端开发:表格、列表、表单

发布于:2025-02-10 ⋅ 阅读:(23) ⋅ 点赞:(0)

1.表格标签

align 是表格相对于周围元素的对齐方式. align="center" (表格相对于网页剧中对齐)

border 表示边框. 1px 表示有边框(数字越大, 边框越粗), "" 表示没边框.

cellpadding: 内容距离边框的距离, 默认 1 像素

cellspacing: 单元格之间的距离. 默认为 2 像素

width / height: 设置尺寸

table 标签: 表示整个表格

tr: 表示表格的一行 t是table的缩写 r是row行的缩写;依次类推;

td: 表示一个单元格

th: 表示表头单元格. 会居中加粗

thead: 表格的头部区域         //thead就是为了区分表头和表身体的,只是范围;

tbody: 表格得到主体区域.

单元格合并

跨行合并 : rowspan="n"
跨列合并 : colspan="n"
1. 先确定跨行还是跨列
2. 找好目标单元格 ( 跨列合并 , 默认向右合并 ; 跨行合并 , 默认向下合并 )
3. 删除的多余的单元格
 举例:
<table align = "center" border = "1" cellpadding = "20" cellspacing = "0" width = "500"
height = "500" >
<thead>
    <tr>
        <th> 姓名 </th>
        <th> 性别 </th>
        <th> 年龄 </th>
    </tr>
</thead>
<tbody>
    <tr>
        <td> 张三 </td>
        <td rowspan="2" > </td>
        <td> 10 </td>
    </tr>
  <tr>
        <td> 张三 </td>
        <td> </td> //注释掉
        <td> 10 </td>
    </tr>
  <tr>
        <td> 张三 </td>
        <td colspan="2" > </td>
        <td> 10 </td>
    </tr>
</tbody>
</table>

2.列表标签

2.1无序列表

 快捷键:ul>li*4 回车        //快速生成4个标签

ul:“unordered list”(无序列表)

li:list列表

<h1>这是无序标签</h1>

<!-- disc  square   circle -->        //type类型有3种;实心圆,方块,空心圆;

    <ul type="disc">        

        <li>这是内容1</li>

        <li>这是内容2</li>

        <li>这是内容1</li>

        <li>这是内容1</li>

    </ul>

2.2有序列表 

ol:order list        //有序列表

li:list         //列表

他自带序号;也可以通过type属性进行自我设置;变成罗马数字

<!-- a 表示小写英文字母编号 A 表示大写英文字母编号 i 表示小写罗马数字编号

    I 表示大写罗马数字编号 1 表示数字编号(默认) -->

<ol type="a" start="2"> //从第二个数开始计数;

        <li>你好</li>

        <li>hello</li>

        <li>hi</li>

</ol>

 2.3自定义列表

<dl>自定义一个列表

<dt> 这个列表叫什么名字

<dd>每一个列表是什么;

 <h1>这是一个自定义列表</h1>

    <dl>

        <dt>自定义列表显示内容</dt>

        <dd>猫</dd>

        <dd>兔</dd>

        <dd>阿叶君</dd>

    </dl>

3.表单标签 

使用表单标签来完成和服务器的交互;

表单域 : 包含表单元素的区域 . 重点是 form 标签 . //表示的是一个区域标签;里面填写各种东西
表单控件 : 输入框 , 提交按钮等 . 重点是 input 标签

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域,此区域包含交互控件,将用户收集到的信息发送到 Web 服务器。

HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。


网站公告

今日签到

点亮在社区的每一天
去签到