Html(table: 表格，form: 表单) 基础知识

HTMLtable: 表格，form: 表单

1、表格元素

1.1 数据标签

序号	标签	描述
1	<table>	声明表格, 必选
2	<tr>	定义表格中的行, 必选
3	<th>	定义表格头部中的单元格, 必选
4	<td>	定义表格主体中的单元格, 必选

1.2 结构标签

序号	标签	描述
1	<option>	定义表格标题, 可选
2	<thead>	定义表格头格, 只需定义一次, 可选
3	<tbody>	定义表格主体, 允许定义多次, 可选
4	<tfooter>	定义表格底, 只需定义一次, 可选

1.3 常用属性

序号	属性	所属标签	描述
1	border	<table>	添加表格框
2	cellpadding	<table>	设置单元格内边距
2	cellspacing	<table>	设置单元格边框间隙
2	align	不限	设置单元格内容水平居中
2	bgcolor	不限	设置背景色

实例—课程表表

代码块1：

<table border="1" width="480px" cellspacing="0" style="text-align:center;">
        <thead style="background-color: #f50303;height: 40px;font-size: 18px;">
            <!-- <th> -->
            <td>时间</td>
            <td>周一</td>
            <td>周二</td>
            <td>周三</td>
            <td>周四</td>
            <td>周五</td>
            <td>周六</td>
            <!-- </th> -->
        </thead>
        <tbody>
            <tr>
                <td rowspan = 4 style="background-color: #b2dcf8;">上午</td>
                <td>vs code编辑器</td>
                <td>css</td>
                <td>php</td>
                <td>js</td>
                <td>laravel</td>
                <td>layui</td>
            </tr>
            <tr>
                <!-- <td>上午</td> -->
                <td>vs code插件</td>
                <td>css</td>
                <td>php</td>
                <td>js</td>
                <td>laravel</td>
                <td>layui</td>
            </tr>
            <tr>
                <!-- <td>上午</td> -->
                <td>html入门</td>
                <td>css</td>
                <td>php</td>
                <td>js</td>
                <td>laravel</td>
                <td>layui</td>
            </tr>
            <tr>
                <!-- <td>上午</td> -->
                <td>html元素</td>
                <td>css</td>
                <td>php</td>
                <td>js</td>
                <td>laravel</td>
                <td>layui</td>
            </tr>

            <tr>
                <td colspan=7 style="text-align:center;background-color:#fafab3">中午休息</td>

            </tr>
            <tr>
                <td rowspan = 3 style="background-color: #b2dcf8;">下午</td>
                <td>html标签</td>
                <td>css</td>
                <td>php</td>
                <td>js</td>
                <td>laravel</td>
                <td>layui</td>
            </tr>
            <tr>
                <!-- <td>下午</td> -->
                <td>table</td>
                <td>css</td>
                <td>php</td>
                <td>js</td>
                <td>laravel</td>
                <td>layui</td>
            </tr>
            <tr>
                <!-- <td>下午</td> -->
                <td>form表单</td>
                <td>css</td>
                <td>php</td>
                <td>js</td>
                <td>laravel</td>
                <td>layui</td>
            </tr>
            <tr>
                <td>备注</td>
                <td colspan=7>放学要完成作业才能睡觉</td>
                <!-- <td>周二</td>
                <td>周三</td>
                <td>周四</td>
                <td>周五</td>
                <td>周六</td> -->
            </tr>

        </tbody>
        </table>

页面显示1：

2 form 表单

2.1 表单元素类型

序号	元素	名称	描述
1	<form>	表单容器	表单应该放在该标签内提交
2	<input>	输入控件	由type属性指定控件类型
3	<label>	控件标签	用于控制功能描述与内容关联
4	<select>	下拉列表	用于选择预置的输入内容
5	<datalist>	预置列表	用于展示预置的输入内容
6	<option>	预置选项	与 select、datalist 配合使用
7	<textarea>	文本域	多行文本框，常与富文本编辑器配合使用
8	<button>	按钮	用于提交表单

序号	元素	名称	描述
1	<form>	表单容器	表单应该放在该标签内提交
2	<input>	输入控件	由type属性指定控件类型
3	<label>	控件标签	用于控制功能描述与内容关联
4	<select>	下拉列表	用于选择预置的输入内容
5	<datalist>	预置列表	用于展示预置的输入内容
6	<option>	预置选项	与 select、datalist 配合使用
7	<textarea>	文本域	多行文本框，常与富文本编辑器配合使用
8	<button>	按钮	用于提交表单

2.2 表单元素属性

2.1.1 表单元素属性列表

序号	元素	属性
1	<form>	action、method
2	<input>	for
3	<label>	type、name、value、placeholder
4	<select>	name
5	<datalist>	id 与 input list=""关联
6	<option>	value、label、selected
7	<textarea>	cols、rows、name
8	<button>	type、name

2.1.2 表单元素属性含义

序号	属性	含义
1	name	元素/控件名称，用做服务器脚本的变量名称
2	value	提交到服务器端的数据
3	placeholder	输入框的提示信息
4	form	所属的表单，与<form name = ""> 对应
5	autofocus	页面加载时自动获取焦点
6	required	必填，必须项
7	readonly	改控件内容只读
8	disabled	是否禁用

2.1.3 input 元素 type 属性值

序号	属性	名称	描述
1	text	文本框	默认值
2	password	密码框	输入内容显示为*
3	radio	单选按钮	多个选项中仅允许提交一个选项，应设置默认值
4	checkbox	复选框	允许提交一个或多个选项，应设置默认值
5	hidden	隐藏域	页面不显示但数据仍会提交
6	file	文件上传	本地文件上传，有 accept、multiple 属性
7	submit	提交按钮	点击会提交按钮所有的表单
8	reset	重置按钮	重置输入控件中的内容为默认
9	button	自定义按钮	一般使用 js 脚本定义点击后的行为
10	email	邮箱	输入肉容必须是邮箱格式
11	number	整数	输入肉容必须是整数格式
12	url	URL 地址	输入肉容必须是有效的 URL 格式
13	seaech	搜索框	通常与 autocomplete 配合
14	date	日期控件	不同浏览器可能会有不同
15	color	调色板	可直接选择颜色
16	tel	电话号码	手机端会弹出数字键盘

实例—注册表单

代码块：

<form class="layui-form" action="" style="width: 480px; height: 320px;margin: 60px auto;background-color: #f2eada;">
        <!-- input 文本框 -->
        <div class="username">
            <label for="username">用户名:</label>
            <input type="text" id="username" placeholder="username">

        </div>
        <!-- 密码框 -->
        <div class="password">
            <label for="password">密码:</label>
            <input type="password" id="password" placeholder="password" value="">
        </div>
        <div class="passwordcopy">
            <label for="passwordcopy">重复密码:</label>
            <input type="password" id="passwordcopy" placeholder="passwordcopy" value="">
        </div>
        <!-- 邮箱 -->
        <div>
            <label for="email">邮箱:</label>
            <input type="email" name="email" id="email" placeholder="mail" value="">
        </div>
        <!-- 单选框 -->
        <!-- input name 值要一样，才能设置单选 -->
        <div>
            <label for="male">性别:</label>
            <input type="radio" name="gender" id="male" value="male" checked/><label
              for="male">男</label>    
            <input type="radio" name="gender" id="female" value="female" /><label
              for="female">女</label>
        </div>

        <!-- 复选框 -->
        <!-- name 值要是数组形式 -->
        <div class="checkboxs">
            <label for="">爱好:</label>
            <div style="display: flex;">
                <div>
                    <label for="shoot">编程</label>
                    <input type="checkbox" name="hobby[]" value="1">
                </div>
                <div>
                    <label for="shoot">学习</label>
                    <input type="checkbox" name="hobby[]" value="2">
                </div>
                <div>
                    <label for="shoot" name="hobby[]" value="3">游戏</label>
                    <input type="checkbox">
                </div>

            </div>
        </div>
        <!-- 下拉列表 -->
        <div class="selection">
            <label for="">选择会员等级:</label>

            <select name="level" id="">
                <option value="1">铜牌会员</option>
                <option value="2">金牌会员</option>
                <option value="3" selected>永久会员</option>
            </select>

        </div>

        <div class="button" style="margin: 18px auto;width:180px;display: flex;">
            <button style="width: 58%;margin-right: 4px;background-color: #1E9FFF;">提交</button>
            <button style="width: 58%;background-color: #1E9FFF;">清空</button>
        </div>

    </form>

页面显示1：