HTML表格、列表、表单标签｜青训营笔记目录表格标签列表标签表单标签 1、各个列表项之间没有顺序级别之分，是并

一、表格标签

1.1表格的主要作用
表格主要用于显示、展示数据。不是用来布局页面的。
1.2表格的基本语法

    <table>
        <tr>
            <td>第一个单元格内的文字</td>
            <td>第二个单元格内的文字</td>
            ...
        </tr>
        <tr></tr>
        ...
    </table>

1、<table ></table>是用于定义表格的标签。
2、<tr></tr>用于定义表格中的行，必须嵌套在<table></table>标签中。
3、<td></td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
4、td是table data的缩写，即数据单元格的内容。

1.3表头单元格标签

    <th>表头</th>

<th>标签表示HTML表格的表头部分，会使得内容在单元格里居中且加粗。常用于表格的第一行。

1.4表格属性
表格属性.png
表格标签的属性如上图所示，这些属性要写在table标签里，示例如下：

    <table align="center" border="1" cellpadding="0" cellspacing="0" width="450">
    </table>

1.5表格结构标签
为了更好地表示表格的语义，将表格分割成表格头部和表格主体两大部分。
1、<thead></thead>:用于定义表格的头部。<thead>内部必须拥有<tr>标签,一般位于第一行。
2、<tbody></tbody>:用于定义表格的主体，主要用于放数据本体。
3、以上标签都是放在<table></table>标签中。

1.6单元格合并
1、跨行合并:rowspan=“合并单元格的个数”；最上侧单元格为目标单元格，写合并代码，再删除多余的单元格。
2、跨列合并:colspan="合并单元格的个数"；最左侧单元格为目标单元格，写合并代码，再删除多余的单元格。
示例：<td colspan="2"></td>;

1.7表格标签总结
学习了 table标签、tr行标签、td单元格标签、th表头单元格标签、thead表格头部区域标签、tbody表格主体区域标签。它们在一个表格里代表的区域如下图所示：
标签.png

二、列表标签

列表标签是用来布局的。分为无序列表、有序列表和自定义列表。
它们的样式如下图所示:
列表样式.png
2.1无序列表
<ul>标签表示无序列表，会以符号呈现列表项。列表项用<li>标签定义。
语法如下:

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

1、各个列表项之间没有顺序级别之分，是并列的。
2. <ul></ul>中只能嵌套<li></li>，不可以直接在<ul></ul> 标签中输入其他标签或者文字。
3.<li>与</li>之间相当于一个容器，可以容纳所有元素。
4. 无序列表会带有自己的样式属性，但在实际使用时使用 CSS 来设置。

2.2有序列表
<ol>标签表示有序列表，会以数字排序。列表项用<li>标签定义。
语法同2.1无序列表类似，如下：

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

<ol></ol>中只能嵌套<li></li>，不可以直接在<ol></ol> 标签中输入其他标签或者文字。
2.<li>与</li>之间相当于一个容器，可以容纳所有元素。
有序列表会带有自己的样式属性，但在实际使用时使用 CSS 来设置。

2.3自定义列表
自定义列表的列表项前没有任何项目符号。常用于对术语或名词进行解释和描述。
<dl>标签用于定义描述列表，会与<dt>(定义项目/名字)和<dd>(描述每项目/名字)一起使用。基本语法如下：

    <dl>
        <dt>名词1</dt>
        <dd>解释1</dd>
        <dd>解释2</dd>
        <dt>名词2</dt>
        <dd>解释1</dd>
        <dd>解释2</dd>
        ...
    </dl>

1.<dl></dl>里面只能包含<dt>和<dd>。

2.<dt>和<dd>个数没有限制，一般是一个<dt>对应多个<dd>。

三、表单标签

3.1表单的主要作用
表单的作用是收集用户信息。

3.2表单的组成
表单通常由表单域、表单控件(也称为表单元素)和提示信息3个部分组成。如下图所示:
表单组成.png

3.3表单控件(表单元素)

3.3.1<input>表单元素
<input>标签用于收集用户信息。
<input>标签包含一个type属性，不同的属性可以让输入字段拥有多种形式。

    <input type="属性值" />

type属性值有如下:
表单标签.png

除了type属性外，<input>标签还有其他属性，常用的如下:
常用属性.png 1.name和value是每个表单元素都有的属性值,主要给后台人员使用。
2.name是表单元素的名字, 要求单选按钮和复选框要有相同的name值。这样才可以实现多选一、多选多。
3.checked属性主要针对于单选按钮和复选框, 主要作用是使一打开页面,就默认选中某个表单元素。

3.3.2<lable>标签
<lable>标签为input元素定义标注。
<lable>标签用于绑定一个表单元素，当点击<lable>标签内的文本时，浏览器会自动将焦点转到或者选择对应的表单元素上，用来增加用户体验。

    <lable for="sex">男</label>
    <input type="radio" name="sex" id="sex" />

注意：<lable>标签的for属性应当与相关元素的id属性相同。

3.3.3<select>表单元素
可以使用<select>标签控件定义下拉列表。

    <select>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        ...
    </select>

1.<select>中至少包含一对<option>。
2.在<option>中定义selected =“selected"时当前项即为默认选中项。

3.3.4<textarea>表单元素
当用户输入内容较多时，可以使用<textarea>标签，用于定义多行文本输入。

    <textarea row="3" cols="20">
        文本内容
    </textarea>

1.通过<textarea>标签可以轻松地创建多行文本输入框。
2.cols=“每行中的字符数”rows=“显示的行数”,不过在实际开发中一般不会使用，都是用CSS来改变大小。

HTML表格、列表、表单标签 ｜ 青训营笔记

目录

一、表格标签

二、列表标签

三、表单标签

HTML表格、列表、表单标签｜青训营笔记