20210708学习总结html | 列表、表格和表单

20210708学习总结 | html列表、表格和表单

列表

无序列表

基本样式

    <ul>
        <li>无序列表项</li>
        <li>无序列表项</li>
        <li>无序列表项</li>
    </ul>

实际应用

常见网站导航栏

· 注意：ul内只能嵌套li，不能嵌套其他标签，且li内仍能嵌套ul，但至多为三层

例:

    <ul>
        <li>
            <ul>
                <li>
                    <ul>
                        <li>无序列表项</li>
                        <li>无序列表项</li>
                    </ul>
                </li>
                <li>无序列表项</li>
            </ul>
        </li>
        <li>无序列表项</li>
        <li>无序列表项</li>
    </ul>

有序列表

基本样式

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

属性

type 属性值：{1、a、A、i、I（罗马数字）}

star 属性值：数字

（star的值代表type从第几个数字开始）

实际开发不常用

自定义列表

基本样式

<dl>
    <dt>自定义列表项</dt>
    <dd>自定义列表描述</dd>
    <dd>自定义列表描述</dd>
    <dd>自定义列表描述</dd>
</dl>

注意：dt和dd是同级，应上下对齐

实际应用：网站尾导航（例：小米官网）

表格

基本样式

    <table>
        <caption>表格标题</caption>
        <thead>
            <tr>
                <th>表头</th>
                <th>表头</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>单元格</td>
                <td>单元格</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>表尾</td>
                <td>单元格</td>
            </tr>
        </tfoot>
    </table>

注意：thead,tbody,tfoot在实际应用中尽量不要省略

原因：当我们有一个大的table需要显示的时候，就会需要它们。因为table是当整个表都下载完才显示的，如果页面的table内容比较多，下载完需要很多时间，这样很容易使用户失去浏览兴趣。所以我们就要借助上面的标签来“提高页面显示效果”。thead，tbody，tfoot，很显然他们分别是“表头”，“表体”，“表尾”。他们的显示顺序是从头到尾的。

合并单元格

跨行合并：rowspan（竖着）=“合并单元格的个数”

跨列合并：colspan（横着）=“合并单元格的个数”

将多个内容合并的时候，会有多余的东西，把它删除。例如把 3个 td 合并成一个， 那就多余了2个，需要删除。

• 合并的顺序 先上、先左
• thead和tbody里的单元格不能合并

属性

border：表格边框

cellspacing：边框间隙

cellpadding：内容同单元格之间的间距（单元格内边距）

width：表格宽

weigth：表格高

align：表格在网页中的对齐方式 （属性值：light center right）

细框表格css设置

在css样式中设置表格table：

border-collapse:collapse

表单

表单控件

input

type属性值：

text 单行文本输入框

password 密码输入框

radio 单选

checkbox 多选

button 普通按钮

submi 提交按钮

reset 重置按钮

image 图片形式按钮

file 文件域

name属性用于区分不同属性，一组属性应保持一致

checked属性表示默认被选中（常用于单选、多选）

label属性为文本提示标签（点击也可输入信息）

value属性为在输入框内的默认信息

placeholder属性为输入框的提示信息

multipe属性可以设置上传多个文件

表单域

form

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

eg：提交方式目前有两种：GET和POST，GET和POST是HTTP协议中的两种发送请求的方法。
HTTP是超文本传输协议（Hyper Text Transfer Protocol）是关于数据如何在万维网中如何通信的协议。

每个表单都应有自己的表单域

文本域

textarea

属性

cols 可见宽度的字符数

rows 可见行数的数字

disabled 禁用区域

maxlength 规定文本区域允许的最大字符数

readonly 设置文本域只读

eg：文本域可以被用户调节宽高

css样式设置

resize：none；设置文本域不可被调节

下拉菜单

select

属性

multiple 多选

size 规定下拉列表可见项的数量

selecte 默认下拉列表被选中的项

disabl 禁用下拉列表

下拉分组

optgroup

属性

label 组名（注意区别前面的label）