Home > List of blog posts > 详细了解列表、表格、表单、框架知识

Blogger Information

Blog 45

fans 3

comment 0

visits 45539

Special Recommendation

More>

Related recommendations

一、列表

1.列表有3种：

无序列表

<h3>购物车</h3>
<ul>
    <li>牛奶一箱</li>
    <li>蛋糕一个</li>
    <li>苹果10斤</li>
</ul>

有序列表

<h3>购物车</h3>
<ol>
    <li>牛奶一箱</li>
    <li>蛋糕一个</li>
    <li>苹果10斤</li>
</ol>

自定义列表

<dl>
    <dt>名称：</dt>
    <dd>php中文网</dd>
    <dt>地址：</dt>
    <dd>河南省信阳市浉河区</dd>
    <dt>联系</dt>
    <dd>电话：<a href="tel:18937109272">18937109272</a></dd>
    <dd>邮箱：<a href="mailto:734564242@qq.com">734564242@qq.com</a></dd>
</dl>

二、表格

table标签定义表格，一个HTML表格由table以及一个或多个tr、th或者td组成
tr元素定义表格行，th元素定义表头，td元素定义表格单元格。

一个表格的基本结构：

<table class="table">
    <!-- 表格标题 -->
    <caption>
        商品信息表
    </caption>
    <!-- 表头 -->
    <thead>
        <!-- 每添加一组表格数据，必须先添加一行 -->
        <tr>
            <td>ID</td>
            <td>品名</td>
            <td>单价</td>
            <td>单位</td>
            <td>数量</td>
            <td>金额</td>
        </tr>
    </thead>
    <!-- 一个表格可以有多个tbody，但是只能有一个thead -->
    <tbody>
        <tr>
            <td>1</td>
            <td>iPhone 12 mini</td>
            <td>5499</td>
            <td>部</td>
            <td>100</td>
            <td>549900</td>
        </tr>
    </tbody>
</table>

总结：
1.一个表格可以有多个tbody，但是只能有一个thead。
2.每添加一组表格数据，必须先添加一行。
3.所有的数据必须填充到td/th中，th是td元素的一个加强版，th比td多了个加粗和居中的效果。
备注：
VS Code快捷键PDF文档：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

三、表单与常用控件

form表单用于向服务器传送数据，一个表单可以包含input元素，例如：文本框、单选框、复选框、按钮等。
表单的基本格式：

<form action="" method="POST" class="register">
    <!-- 这里面可以放input元素 -->
</form>

action 处理表单的程序。
method：表单数据提交类型，默认为GET：数据直接显示在url地址中；POST：表单数据在请求头体中。

控件：
3.1 文本类型控件：

单行文本框：

<label for="username">账号：</label>
<!-- type：控件类型 -->
<!-- name：数据的变量名，后端服务器接收前端传递的参数时就用该变量 -->
<!-- value：数据值 -->
<input type="text" name="username" id="username" value="admin" required>

邮箱型文本框：

<!-- 邮箱型文本框 -->
<label for="email">邮箱：</label>
<input type="email" name="email" id="email" value="html@html.cn" required>

密码型文本框/非明文：

<!-- 密码型文本框/非明文 -->
<label for="password">密码：</label>
<input type="password" name="password" id="password" value="" placeholder="密码不少于6位" required>

3.2 单选框和复选框

3.2.1 单选框

<label for="">性别：</label>
<div>
    <!-- 一组单选按钮必须公用同一个名称的name值，否则无法实现值的唯一性 -->
    <!-- checked：表示默认值 -->
    <input type="radio" name="gender" value="male" id="male">
    <label for="male">男</label>
    <input type="radio" name="gender" value="male" id="male">
    <label for="female">女</label>
    <input type="radio" name="gender" value="male" id="male" checked>
    <label for="secret">保密</label>
</div>

注意：
单选框（radio）的name值必须全部相同，这样才能保证值的唯一性，默认选中使用checked属性。
3.2.2 复选框

<label for="#">兴趣：</label>
<div>
    <input type="checkbox" name="hobby[]" value="basketball" id="basketball">
    <label for="basketball">篮球</label>
    <input type="checkbox" name="hobby[]" value="game" id="game">
    <label for="game">游戏</label>
    <input type="checkbox" name="hobby[]" value="travel" id="travel">
    <label for="travel">旅游</label>
    <input type="checkbox" name="hobby[]" value="program" id="program">
    <label for="program">编程</label>
</div>

3.2.3 下拉列表/下拉框

<label for="">学历：</label>
<select name="edu" id="eud">
    <option value="1">初中</option>
    <option value="2">高中</option>
    <option value="3" selected>本科</option>
    <option value="4">研究生</option>
    <option value="5" label="老司机">博士</option>
</select>

注意：
如果option里有label值，label属性的优先级于option里的内容。因此，上述列表第5项应该显示“老司机”。
HTML5中新属性：

属性	值	描述
multiple	multiple	可以选择多个选项
size	数值，如：2	下拉框里可见的选项数量

3.2.4 文件域与隐藏域

上传文件需要注意两点：

请求类型必须为POST；
将表单form数据编码设置为：enctype=”multipart/form-data”；

<form action="" method="POST" class="register" enctype="multipart/form-data">
    <label for="user-pic">头像：</label>
    <!-- 隐藏域，在前端页面是无法看到的，它的值是用于后端处理的 -->
    <input type="hidden" name="MAX_FILE_ZIE" value="80000" />
    <input type="file" name="user_pic" id="user-pic" />
    <!-- 头像占位符 -->
    <div class="user-pic" style="grid-column: 2;"></div>
    <!-- 提交按钮 -->
    <button>提交</button>
</form>

enctype有3个值：

值	描述
application/x-www-form-urlencoded	默认值，在发送之前编码所有字符
multipart/form-data	使用上传文件空间时必须用该值
text/plain	将空格转换为“+”，但不对特殊字符编码

隐藏域：在前端页面是无法看到的，它的值是用于后端处理的

<input type="hidden" name="MAX_FILE_ZIE" value="80000" />

3.2.5 文本域（多行文本框）

<label for="comment">备注：</label>
<textarea name="comment" id="comment" cols="30" rows="10"></textarea>

四、表单的form属性

如果控件写在form表单外部，则控件需要使用form属性，即：form=”表单id值”，才能在提交表单的时候传递控件的值，否则无法传递。

<form action="check.php" method="get" id="register">
  <div class="box">
      <!-- 使用form属性，将控件与它所属的表单进行关联/绑定 -->
      <label for="email">邮箱:</label>
      <input type="email" form="register" name="email" id="email" placeholder="demo@email.com" />
      <label for="password">密码:</label>
      <input type="password" form="register" name="password" id="password" placeholder="至少8位" />
      <button form="register">提交</button>
  </div>
</form>
<label for="username">帐号:</label>
<input type="text" name="username" id="username" placeholder="不能为空" />

如上述代码，账号的input控件里没有写form属性，在提交的时候是无法提交username值，只能提交email和password的值。
如果不把表单控件写到form内部，这样会方便js获取表单元素的值，但是这样写会影响布局，造成布局混乱，建议还是按照标准的写法，写到form表单内部。

作业：用表格写一个课程表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/table.css">
    <title>表格：行与列的合并</title>
</head>
<body>
    <table class="lesson">
        <!-- 表格标题 -->
        <caption>
            xxxx小学课程表
        </caption>
        <!-- 表头 -->
        <thead>
            <tr>
                <th colspan="2"></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>
        <!-- tbody -->
        <tbody>
            <tr>
                <td rowspan="4">上午</td>
                <td>1</td>
                <td>语文</td>
                <td>数学</td>
                <td>音乐</td>
                <td>社会</td>
                <td>科学</td>
            </tr>
            <tr>
                <td>2</td>
                <td>数学</td>
                <td>语文</td>
                <td>音乐</td>
                <td>语文</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>3</td>
                <td>美术</td>
                <td>音乐</td>
                <td>音乐</td>
                <td>数学</td>
                <td>音乐</td>
            </tr>
            <tr>
                <td>4</td>
                <td>社会</td>
                <td>体育</td>
                <td>音乐</td>
                <td>体育</td>
                <td>语文</td>
            </tr>
            <tr class="rest">
                <td colspan="7">中午休息</td>
            </tr>
            <tr>
                <td rowspan="4">下午</td>
                <td>5</td>
                <td>语文</td>
                <td>数学</td>
                <td>音乐</td>
                <td>社会</td>
                <td>科学</td>
            </tr>
            <tr>
                <td>6</td>
                <td>数学</td>
                <td>语文</td>
                <td>音乐</td>
                <td>语文</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>7</td>
                <td>课外活动：</td>
                <td colspan="4">各班自行组织，自愿参加</td>
                <!-- <td>音乐</td>
                <td>数学</td>
                <td>音乐</td> -->
            </tr>
        </tbody>
    </table>
</body>
</html>

效果：

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

前端开发环境搭建，初识HTML

2020-12-09 13:22:40