html5 多个单表格

文章目录

• 合并单元格步骤：
• 无序列表（unordered list）：
• 有序列表（ordered list）：
• 自定义列表（ordered list）：
• 表单的组成:
• **表单标签**：
• input(单标签)：
• label标签：
• select标签：
• textarea标签：
• 综合案例：

合并单元格步骤：

1.确定是跨行还是跨列合并

2.找到目标单元格（即合并的第一格），写上合并方式=合并的单元格数量，比如：<td colspan=“2”></td> 3.删除多余的单元格（即被合并的单元格）。否则表格紊乱。

示例如上图。

表格（table）是用来显示数据的，那么列表就是用来布局的。

三大列表：有序、无序、自定义列表

无序列表（unordered list）：

ul只能嵌套li(列表项目)，li（list item）相当于一个容器，可以容纳所有元素。

有序列表（ordered list）：

除了有序，和有序列表没有区别。

ol里面嵌套li。

自定义列表（ordered list）：

dlDefinition List（定义列表）：用于定义描述列表。
dtDefinition Term（定义术语）:定义项目/名字。
ddDefinition Description（定义描述）:描述一个项目/名字。
基本语法：

<dl>
        <dt>水果</dt>
        <dd>西瓜</dd>
        <dd>草莓</dd>
    </dl>

后面运用CSS可以做成下面的样子

表单的组成:

表单域：包含表单元素的区域（就是form标签）

<form>标签用于定义表单域，以实现用户信息的收集和传递给服务器。

<form action="url地址" method="提交方式 get/post" name="表单域名称(用以区分同一页面的多个表单域)">
        各种表单元素控件
    </form>

表单标签：

**

input(单标签)：

**
<input type="text">：文本输入框。
<input type="password">：显示***，密码输入框。
<input type="checkbox">：复选框，默认是小方格，可以选择多个。
<input type="radio">：单选框，默认是小圆圈，只能选择一个(通过设置相同的name属性来实现)。
input 除type外的其他属性：

属性	属性值	描述
name	name=“控件的名称”	定义input元素的名称，主要是用来区分其他的控件（相当于起名字）
size	size=“控件的长度”	表示文本框在页面里能够显示出来的长度（就是你能看见文本框里面有多少个字符）
maxlength	maxlength=“最长的字符数”	表示文本框里面最多可以输入的字符数
value	value=“自定义值”	用于定义input元素的值（在其他如radio的type中设置不会显示在页面，但后台会接受这个值）
checked	value=“checked”	主要针对单选按钮和复选框，打开页面就默认选中某个表单元素（例：默认选中同意注册条款的复选框）

<!-- submit 提交按钮可以把表单域form里面的表单元素 里面的值 提交给服务器 -->
        <input type="submit" value="免费注册"></br>
        <!--reset 重置按钮还原表单元素初始的默认状态 -->
        <input type="reset" value="重置按钮"> </br>
        <!-- button 普通按钮 button 后期结合JS搭配使用 -->
        <input type="button" value="获取短信验证码"></br>
        <!-- file 文件域  使用场景：上传文件使用的 -->
        上传头像：<input type="file" > </br>

label标签：

label标签 用户绑定一个input表单元素，当点击label标签内的文本时，浏览器会自动将光标转到对应的表单元素上。增加用户体验
核心：标签的for属性应当与相关元素的id属性相同 示例：点击文字 “女”，单选按钮会被选上

<label for="boy">男</label> <input type="radio" name="sex" value="男" id="boy">	
 <label for="girl">女</label> <input type="radio" name="sex" value="女" id="girl">  </br>

select标签：

多个选项的下拉列表，节约页面空间。

<h4>下面是下拉表单</h4>
        籍贯：
        <select name="address" id="">
            <option value="江西">江西</option>
            <option value="广东">广东</option>
            <option value="深圳" selected="selected">深圳</option>
            <option value="景德镇">景德镇</option>
        </select>

1. select中至少包含一对option
2. option中的selected属性可以设置默认选中项目。selected="selected"

textarea标签：

<h4>下面是文本域</h4>
    <textarea name="" id="" cols="1" rows="10">文本内容</textarea>

实际开发中不会使用，都是用CSS来改变你大小

综合案例：

已完成。没什么问题（我承诺那里不是自定义列表，先用个h4再用个ul即可）

html结束了（虽然只是一些入门的知识点）。CSSgo