列表、表格、表单详解

列表、表格、表单没有语义的布局标签

一、列表

1、无序列表：

是一个没有特定顺序的列表项的集合，也称为项目列表。在无序列表中，各个列表之间属于并列关系，没有先后顺序之分，它们之间以一个项目符号来标记。使用无序列表标签 ul 的 type 属性（使用 CSS 的 list-style 来代替），用户可以指定出现在列表项前的项目符号的样式，主要有：disc（实心圆点）、circle（空心圆点）、square（实心方块）、none（无项目符号）

2、有序列表

第一,有序列表的标签是 ,有start属性 ,最大序号为999 无序列表的标签是,无start属性 第二,的显示方式是列表前面有序号(序号形式由type属性值决定) 的显示方式是列表前面没序号,只有圆点(圆点样式由type属性值决定

3、自定义列表

自定义列表这三个标签，必须同时使用

dl类比ul，相当于一个装列表项的一个容器

dt是列表项的标题

dd是列表标题下的列表项

dl	表示自定义列表的整体，用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容

★注意点:

· dI标签中只允许包含dt/dd标签

· dt/dd标签可以包含任意内容

4.2小结

★自定义列表由几个标签组成? 分别表示什么?

· dl标签:表示自定义列表的整体

· dt标签:表示自定义列表的主题

· dd标签:表示对于主题的每一项内容

★自定义列表标签的嵌套规范是什么?

· dI标签中只允许嵌套dt/dd标签

· dt/dd标签中可以嵌套任意内容

二、表格

1、表格基本使用+属性

1：border：表格的边框

2：align：表格水平位置，也可以用于tr和td中，表示的是单元格内容的水平位置

3：bordercolor：边框颜色

4：width：表格宽度，可以使用比例，也可以使用像素

5：height：表格高度

6：cellpadding：单元格的内容和边框之间的距离

7：cellspacing：两个单元格之间距离的大小

8：bgcolor：表格的背景色，也可以用于tr和td

9：background：表格的背景图片，也可以单独的用于某一个单元格

10：colspan：合并列，当前的单元格占几个列，横向合并，横跨几列

11：rowspan：合并行，单元格纵向跨越的行数

2、表格标题+表头单元格

表格（table）：

表格标签： table(它是块元素 )

表格中包括行和列，在HTML中表格中只能是行中包括列。建议在使用表格之前先吧列跟行都先算清楚再开始写想要的内容 。

其中的属性有很多：

样式名 描述

border 设置表格的外边框线的大小 （单位：像素）

rules 规定单元格的边框可见部分

cellspacing 设置单元格之间的间距

cellpaddingg 设置单元格的边缘线与内容之间的间距

tr 行

td 列

th 列（表头）修饰的会加粗

rowspan 合并行

colspan 合并列

需要注意的是：当规定了表头，表头设置跨行的操作时只能在表头中生效，否则不生效。

3、表格结构标签

caption

语法：

作用：定义表格的标题

默认样式：居中于表格之上

注意： caption 标签必须紧随 table 标签之后

thead

语法:

作用:用于组合 HTML 表格的表头内容

tbody

语法:

作用:用于组合 HTML 表格的主体内容

提示：一个表格允许包含多个

tfoot

语法：

作用：用于组合 HTML 表格的页脚内容

总结

每个表格只能定义一个标题

thead,tbody，tfoot通常配合适用,用于划分表格语义，实现长表格分步加载

注意：在一个表格中只能有一组thead/tfoot标签，可以有多个tbody标签

可以把多个单元格合并为一个单元格。

1.合并 单元格的方式：

跨行合并：rowspan。

跨列合并：colspan。

2.目标单元格：跨行合并时最上侧单元格为目标单元格，写合并代码。跨列合并时最左侧单元格为目标单元格，写合并代码。

3.合并单元格的步骤：

先确定是跨行合并还是跨列合并。

找到目标单元格，写合并代码，如rowspan="2"。

删除多余的单元格。

三、表单

1、input系列

使用场景：在网页中显示收集用户信息的表单效果，如登录页面、注册页面

代码：

                    <input type="text" name="" id="">

                input标签可以通过type属性值的不同，展示不同效果

        属性值：

                    text 文本框，用于输入单行文本

                    password 密码框，用于输入密码

                    radio 单选框，用于多选一

                    checkbox 多选框，用于多选多

                    file 文件选择，用于之后上传文件

                    submit 提交按钮，用于提交

                    reset 重置按钮，用于重置

                    button 普通按钮，默认无功能，之后配合js添加功能

                    placeholder 占位符，提示用户输入内容的文本

1.1.1文本框text

input标签单行文本域type="text"中可以添加的属性以及其描述

属性

描述

name

文本域的名称

maxlength

用户输入的最大字符长度

size

指定文本框的宽度，以字符个数为单位；文本框的缺省宽度是20个字符。

value

指定文本框的默认值

placeholder

规定用户填写输入字段的提示

1.1.2、密码框password

nput标签密码框模式下，默认状态是无法查看输入的密码的，都是小黑点替代，在与用户交互过程中会有诸多不便，使用户无法查看自己输入的密码，即使错误也不知道为啥错了。因此很多组件封装会加上小眼睛实现可视与隐藏的切换。

封装思路：

input标签没有小眼睛的图标，所以我们要加入小图标。

（1）父标签下包含input标签和小图标（两个小图标，一个隐藏一个可视）。父标签设置position：relative；属性。

（2）小图标设置position：absolute；属性，设置top、bottom、right、left等值调整到你想要的位置。

（3）js控制。给小图标定义点击事件，根据点击切换图标，同时切换type="text"和type="password"属性的input框。两个input框绑定同一个接收password值的字段。

1.1单选框radio

使用场景：在网页中显示多选一的单选表单控件

代码：

                <input type="radio" name="" id="" checked>

                name 用于分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中

                checked 默认选中此单选框

    例题：

    <p>单选框radio</p>
    性别：
    <input type="radio" name="sex" id="" checked>男
    <input type="radio" name="sex" id="">女

    效果图： 

1.2文件选择file

使用场景：在网页中显示文件选择的表单控件

代码：

                <input type="file" name="" id="" multiple>

                multiple 多文件选择

    例题：

    <p>文件选择</p>
    <input type="file" name="" id="" multiple>

    效果图：

1-3 提交按钮submit、重置按钮reset

使用场景：在网页中显示不同功能的按钮表单控件

属性值：

                submit 提交按钮，用于提交数据给后台服务器

                reset 重置按钮，点击之后恢复表单的默认值

    注意：

                1 如果需要实现以上按钮功能，需要配合form标签使用

                2 form标签用于包裹表单标签

    例题：

    <p>表单1</p>
    <form action="">
        用户名:
        <input type="text" name="" id="" placeholder="请输入用户名">
        <br> 密码：
        <input type="password" name="" id="" placeholder="请输入密码">
        <br>
        <input type="submit" name="" id="">
        <input type="reset" name="" id="">
    </form>

    效果图：

2、button系列

2 button按钮标签

使用场景：在网页中显示用户点击的按钮

代码：

                <button>按钮</button>

    属性值：

                submit 提交按钮，用于提交数据给后台服务器

                reset 重置按钮，点击之后恢复表单的默认值

                button 普通按钮，默认无功能，之后配合js添加功能

    注意：

                1 谷歌浏览器中button默认是提交按钮

                2 button标签是双标签，要便于包裹其他内容，比如文字、图片等

    例题：

    <p>button按钮</p>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">普通按钮，默认无功能，之后配合js添加功能</button>

    效果图：

3、select系列

使用场景：在网页提供多个选项的下拉菜单表单控件

代码：

                <select name="" id="">

                    <option value="" selected>选项</option>

                </select>

                select标签是下拉菜单的整体

                option标签是菜单的每一项选项

                selected 默认选中项

    例题：

    <p>select下拉菜单</p>
    <select name="" id="">
        <option value="" selected>北京</option>
        <option value="">上海</option>
        <option value="">广州</option>
        <option value="">深圳</option>
    </select>

    效果图： 

4、textarea系列

使用场景：在网页中提供可输入多行文本的表单控件

代码：

                <textarea name="" id="" cols="30" rows="10"></textarea>

                cols 文本域的可见宽度

                rows 文本域的可见行数

    注意：

                    1 右下角可以拖拽改变大小

                    2 实际开发时针对于样式效果推荐用CSS设置

    例题：

    <p>textarea文本域</p>
    <textarea name="" id="" cols="30" rows="10" placeholder="文本域的可见范围：10行30列"></textarea>

    效果图：

5、laber绑定表签

使用场景：常用于绑定内容与表单标签的关系

代码：

                <label for=""></label>

        使用方法一：

                    1 使用label标签把内容包裹起来

                    2 在表单标签上添加id属性

                    3 在label标签的for属性值等于表单中的id属性值

        使用方法二：

                    1 直接使用label标签把内容和表单标签一起包裹起来

                    2 把label标签的for属性删除

    例题：

    <p>法一</p>
    性别：
    <input type="radio" name="sex" id="nan"><label for="nan">男</label>
    <input type="radio" name="sex" id="nv"><label for="nv">女</label>
    <p>法二</p>
    <label><input type="radio" name="sex" id="">男</label>
    <label><input type="radio" name="sex" id="">女</label>

     效果图：