HTML——列表表格表单

weixin_52874695

已于 2023-12-19 16:26:09 修改

阅读量473

点赞数 8

分类专栏： html 文章标签： html 前端

于 2023-11-16 14:51:28 首次发布

本文链接：https://blog.csdn.net/weixin_52874695/article/details/134440753

版权

html 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

列表:布局内容排列整齐的区域

无序列表：---常用

1.格式:

<ul>

</ul>

2.特点：

1.列表项前面有一个小圆点。

2.列表项默认是垂直排列的---默认独立成--块元素标签

3.列表项的左边（40px）与上下（16px）默认的间距

注意：ul或者ol中只能放li标签，不能放其他标签

    <ul type="circle">
      <li>第一项</li>
      <li>第二项</li>
      <li>第三项</li>
    </ul>

效果:

有序列表:

1.格式:

<ol>

</ol>

作用：布局排列整齐的需要规定顺序的区域。

标签：ol嵌套li,ol是有序列表,

2.注意事项：

ol 标签里面只能包裹 li 标签

li 标签里面可以包裹任何内容

    <ol type="A">
      <li>第一项</li>
      <li>第二项</li>
      <li>第三项</li>
    </ol>

效果:

    <ol>
      <li>俄亥俄州列车脱轨十叙地震</li>
      <li>十叙地震</li>
      <li>俄乌局势</li>
      <li>全球旅游业复苏</li>
      <li>美警暴力持续不断</li>
    </ol>

效果:

自定义列表:

1.格式:

<dl>

<dl>

2.注意：

1.dl只能放dt和dd标签，不能放其他标签。

2.dt标题和dd内容是一组，可以有多组。

3.dt标题在同一组中使用一次，dd内容可以使用多次

    <dl>
      <dt>列表标题</dt>
      <dd>列表描述/详情</dd>
      <dd>列表描述/详情</dd>
      <dd>列表描述/详情</dd>
    </dl>

效果:

表格:

1.表格标签

table: 表格标签

tr: 表格行标签

td: 表格数据标签

th: 表格表头标签

thead: 表格头标签

tbody: 表格主体标签

tfoot: 表格尾标签

2.属性：

border: 表格边框

width: 表格宽度

height: 表格高度

align: 表格对齐方式

bgcolor: 表格背景颜色

cellpadding: 单元格内边距

cellspacing: 单元格外边距

colspan: 合并列

rowspan: 合并行

    <table
      border="1"
      cellspacing="0"
      cellpadding="5"
      align="center"
      width="200"
    >
      <tr align="center">
        <td>姓名</td>
        <td>语文</td>
        <td>数学</td>
      </tr>
      <tr align="center">
        <td>小刘</td>
        <td>59</td>
        <td>59</td>
      </tr>
      <tr align="center">
        <td>小刘</td>
        <td>59</td>
        <td>59</td>
      </tr>
      <tr align="center">
        <td>小刘</td>
        <td>59</td>
        <td>59</td>
      </tr>
    </table>

效果:

小案例:

    <table
      border="1"
      cellspacing="0"
      cellpadding="5"
      align="center"
      width="300"
      height="400"
    >
      <caption>
        <h1>优秀学生信息表格</h1>
      </caption>
      <tr width="300" height="50">
        <td>年级</td>
        <td>姓名</td>
        <td>学号</td>
        <td>班级</td>
      </tr>
      <tr>
        <td rowspan="2">高三</td>
        <td>张三</td>
        <td>110</td>
        <td>三年二班</td>
      </tr>
      <tr>
        <td>张三</td>
        <td>110</td>
        <td>三年二班</td>
      </tr>
      <tr width="300" height="50">
        <td>评语</td>
        <td colspan="3">你们都很优秀</td>
      </tr>
    </table>

效果:

表单:

块元素标签----独占一行

行内元素标签----不独占一行，同一行可以显示多个

表单：

1.作用：

用于收集用户的信息

2.应用场景：

3.语法格式：

3.1 表单定义：

method="提交方式"---get/post

action="提交地址"---提交到哪里去

3.2 表单元素：

input---单行文本输入框

type----

text---文本(disabled禁止更改)

password---密码

checkbox---复选框(checked---默认选中)

radio---单选框(checked---默认选中)

file---文件

submit---提交按钮

placeholder="提示信息"---提示信息

name="属性名"---属性名

value="属性值"---属性值

<textarea name="文本域名称" cols="30" rows="10"></textarea>---文本域

cols="10"---列数---宽度

rows="5" ---行数---高度

   <!-- 表单定义： -->
    <form action="/login.php" method="get">
      <!-- 表单元素： -->
      用户名:
      <input
        type="text"
        name="userName"
        placeholder="请输入你的用户名"
        value="admin(禁止更改用户名)"
        disabled
      />
      <br />
      密码：
      <input
        type="password"
        name="userPassword"
        placeholder="请输入你的密码"
        autofocus
      />
      <br />
      单选框：
      <input type="radio" name="ch" />
      <br />
      性别：
      <input type="radio" name="ch" value="男" />男
      <input type="radio" name="ch" value="女" checked />女
      <br />
      多选框：
      <input type="checkbox" name="ra" />
      <br />
      爱好：
      <input type="checkbox" name="ra" value="游戏" />游戏
      <input type="checkbox" name="ra" value="旅游" />旅游
      <input type="checkbox" name="ra" value="运动" />运动
      <input type="checkbox" name="ra" value="追剧" />追剧
      <br />
      上传文件：
      <input type="file" name="wj" />
      <br />
      个人简介：
      <textarea name="jj" id="" cols="30" rows="10"></textarea>
      <br />
      <!-- selected 属性实现默认选中功能 -->
      城市：
      <select name="city" id="">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州" selected>广州</option>
        <option value="深圳">深圳</option>
      </select>
      <br />
      <!-- 提交按钮 -->
      <!-- <input type="submit" /> -->
      按钮：
      <button type="button">普通按钮</button>
      <button type="submit">提交按钮</button>
    </form>

效果: