html之列表与表格和表单(附演示效果

kgym1002

已于 2023-12-31 16:18:00 修改

阅读量1k

点赞数 25

文章标签： html 前端 java

于 2023-12-31 16:15:39 首次发布

本文链接：https://blog.csdn.net/kgym1002/article/details/135316553

版权

一、列表

无序列表
有序列表
自定义列表

（1）无序列表 Unordered List

列表项 List Item

<ul>

<li>苹果</li>

<li>香蕉</li>

<li>桃子</li>

</ul>

显示效果：

（2）有序列表 Ordered List

<ol>

<li>苹果</li>

<li>香蕉</li>

<li>桃子</li>

</ol>

显示效果：

（3）自定义列表 Description List

<dl>

<dt>水果</dt>

<dd>苹果</dd>

<dd>香蕉</dd>

<dd>桃子</dd>

</dl>

显示效果：

二、表格

（1）基本元素

table 属性：

border 边框宽度
width 表格宽度
height 表格高度

<table border="1">

<caption>

表格大标题

</caption>

<tr>

<th>姓名</th>

<th>年龄</th>

</tr>

<tr>

<td>Tom</td>

<td>23</td>

</tr>

<tr>

<td>Jack</td>

<td>24</td>

</tr>

</table>

演示效果：

（2）表格结构，可以省略

thead 表格头部
tbody 表格主体
tfoot 表格底部

<table border="1">
    <caption>
        表格大标题
    </caption>

    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Tom</td>
            <td>23</td>
        </tr>
        <tr>
            <td>Jack</td>
            <td>24</td>
        </tr>
    </tbody>
    
    <tfoot>
        <tr>
            <td>求和</td>
            <td>57</td>
        </tr>
    </tfoot>
</table>

演示效果：

（3）合并单元格

跨行合并（垂直）rowspan
跨列合并（水平）colspan

左上原则

上下合并，保留最上
左右合并，保留最左

Tips: 不能跨结构合并

<table border="1">
    <caption>
        表格大标题
    </caption>

    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td>Tom</td>
            <td rowspan="2">23</td>
        </tr>
        <tr>
            <td>Jack</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td colspan="2">求和: 57</td>
        </tr>
    </tfoot>
</table>

演示效果：

三、表单

输入框 input

type属性	输入框类型
text	文本框
password	密码框
radio	单选框
checkbox	多选框
file	文件选择
submit	提交按钮
reset	重置按钮
button	普通按钮

（1）text 文本框

placeholder 占位符

<input type="text" placeholder="文本框占位符" />

演示效果：

（2）password 密码框

placeholder 占位符

<input type="password" placeholder="密码框占位符" />

（3）radio 单选框

name 属性分组，一个分组只能有一个值被选中

checked 默认选中

<input type="radio" name="sex" value="1" />男
<input type="radio" name="sex" value="2" checked />女

演示效果：

（4）checkbox 多选框

checked 默认选中

<input type="checkbox" name="city" value="beijing" />北京
<input type="checkbox" name="city" value="shanghai" checked />上海

（5）file 文件选择

multiple 多选(按住 ctrl 多选)

<input type="file" /> 
<input type="file" multiple />

（6）按钮

submit 提交按钮
reset 重置按钮
button 普通按钮

需要配合 form 表单域使用

属性 value 修改按钮显示的值

<input type="submit" />
<input type="reset" />
<input type="button" value="普通按钮" />

演示效果：

button按钮标签

type取值

submit 提交按钮
reset 重置按钮
button 普通按钮(默认)

<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>
<button>普通按钮</button>

演示效果：

select下拉菜单

<select>
  <option>北京</option>
  <option>上海</option>
  <option selected>广州</option>
  <select></select>
</select>

演示效果：

option 选项

默认选中第一项，可以指定默认选中 selected

textarea多行文本域

type属性

cols 宽度列数
rows 高度行数

<textarea></textarea>

label标签

点击文字也可选中选项

两种使用方式等效

<input type="radio" name="sex" id="man" />
<label for="man">男</label>

<label><input type="radio" name="sex" />女</label>

演示效果：

无语义标签

div 块级标签，独占一行
span 行内标签

语义化标签

手机端常用

header 网页头部
nav 网页导航
footer 网页底部
aside 网页侧边栏
section 网页区块
article 网页文章

以上标签和 div 等效，多了语义化

字符实体

在网页中显示特殊字符

空格  
版权符 ©

<!-- 单词之间有5个空格，最后只显示一个空格 -->
hello world

<!-- 实现单词之间有5个空格 -->
hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;world

<!-- 版权符号 -->
&copy;

演示效果：

综合效果示例

<!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>Form Demo</title>
</head>

<body>
    <h2>个人信息</h2>
    <form action="">
        <p>姓名:
            <input type="text"
                   placeholder="姓名">
        </p>
        <p>性别:
            <label><input type="radio"
                       name="sex"
                       checked>男</label>
            <label><input type="radio"
                       name="sex">女</label>
        </p>
        <p>爱好:
            <label><input type="checkbox"
                       checked>足球</label>
            <label><input type="checkbox">篮球</label>
            <label><input type="checkbox">羽毛球</label>
        </p>

        <p>现居：<select>
                <option value="">北京</option>
                <option value="">上海</option>
                <option value="">广州</option>
                <option value="">深圳</option>
            </select>
        </p>

        <p>个人简介：
            <br />
            <textarea cols="60"
                      rows="10"></textarea>
        </p>

        <input type="submit"
               value="提交">
        <button type="reset">重置</button>
    </form>
</body>

</html>

欢迎大家指点。

kgym1002

关注

25
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
html之列表与表格和表单(附演示效果

列表项 List Item 显示效果：显示效果：显示效果： table 属性：演示效果：演示效果：左上原则演示效果：输入框 input placeholder 占位符演示效果：placeholder 占位符（3）radio 单选框name 属性分组，一个分组只能有一个值被选中checked 默认选中演示效果： checked 默认选中（5）file 文件选择multiple 多选(按住 ctrl 多选) （6）按钮submit
复制链接

扫一扫