前端学习第五课（表格、表单、列表使用）

表格、表单、列表使用

表格：用于展示数据，让数据显示规范；列表：用于布局，让页面布局规范整齐；表单：用于收集用户信息；

一、表格table使用（了解）

1.创建表格

<!-- 表格元素 ，输入table创建-->

    <table>

        <!-- 表格行标签，输入tr创建 -->

        <tr>

            <!-- 单元格标签，输入td创建 -->

            <td>name</td>

            <td>age</td>

            <td>sex</td>

        </tr>

        <tr>

            <td>sky</td>

            <td>13</td>

            <td>male</td>

        </tr>

    </table>

实现效果：

表格属性：

cellspace:单元格与单元格之间的距离

cellpadding：单元格与单元格边框的距离

width：单元格宽度

height：单元格高度

例：<table width="500" height="300" cellpadding="20" cellspace="0" > 

th标签标识表头 ：使内容加粗显示

<tr>

            <!-- th标签标识表头 -->

            <th>name</th>

            <th>age</th>

            <th>sex</th>

</tr>

caption表格标题：为表格加一个标题

 <!-- 表格的标题 -->

       <caption>信息表</caption>

效果如下：

 2.合并单元格

使用colspan合并列属性

 例如<td colspan="4">合并4列内容</td>

使用rowspan合并行属性

例如<td rowspan="2">合并行内容1</td>

3.表格总结

 目前table使用较少，但要能读懂代码，table渲染效率低，占用字节较多等缺点，不如直接使用div进行生成。

二、列表使用（重点）

        容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表列表最大的特点就是 整齐 、整洁、 有序，跟表格类似，但是他可组合自由度会更高。

1.无序列表

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

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

<ul>

        <li><a href="http://www.news.cn/world/2022-01/01/c_1128225181.htm ">世界最大自贸区正式启航 为世界经济发展增添动力</a></li>

        <li><a href="https://mp.weixin.qq.com/s/cam_XbpijRxog_TjBdpgZQ" >壮美！2022年第一缕阳光穿过万里长城</a></li>

        <li>美国专家：未来几周美恐将刮起“疫情风暴”</li>

        <li>中央网信办所属部分在京事业单位2022年度公开招聘公告</li>

        <li>2022年春运购票日历来了！1月3日开抢</li>

    </ul>

显示效果如下：

2.有序列表

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>
所有特性基本与ul 一致。 但是实际中比 无序列表 用的少很多。

例如：

<ol>

        <li>aa1</li>

        <li>aa2</li>

        <li>aa3</li>

        <li>aa4</li>

        <li>aa5</li>

    </ol>

显示效果如下;

3.自定义列表

 使用dl、dt、dd进行设置，基本语法如下：

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

例如：

<!-- 自定义列表 -->

    <dl>

        <dt>gis</dt>

        <dd>地理信息系统（Geographic Information System或 Geo－Information system，GIS）有时又称为“地学信息系统”。它是一种特定的十分重要的空间信息系统。它是在计算机硬、软件系统支持下，对整个或部分地球表层（包括大气层）空间中的有关地理分布数据进行采集、储存、管理、运算、分析、显示和描述的技术系统。</dd>

        <dt>rs</dt>

        <dd>RS技术即遥感技术（Remote Sensing，简称RS），遥感技术是指从高空或外层空间接收来自地球表层各类地理的电磁波信息，并通过对这些信息进行扫描、摄影、传输和处理，从而对地表各类地物和现象进行远距离控测和识别的现代综合技术。可用于植被资源调查、作物产量估测、病虫害预测等方面。</dd>

    </dl>

显示效果如下：

 4.列表总结

三、表单标签使用

        表单目的是为了收集用户信息。在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。一个完整的表单由表单控件、提示信息和表单域三部分构成。

a.在表单控件中，包含了具体的表单功能项，如文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

b.提示信息指一些表单中的说明性文字，用于提示用户进行天蝎和操作。

c.表单域相当于一个容器，用于容纳所有表单控件和提示信息。

fom表单语法格式：

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

action属性用于将表单数据提交给对应的服务器

        有get、post两种方法

get提交数据发送给服务器的方法，将数据放置到url地址里，提交的数据是比较小的；

post提交的数据是放到请求的正文里，提交数据更多，更安全，效率比get低；

1.input控件

语法：<input type="属性值" value="你好">

 常用属性：

required必须设置有值；

readonly设置为只读；

disabled禁用输入，此时提交数据不包含它；

2.label标签

在html中，<label>标签通常和<input>标签一起使用，<label>标签为input元素定义标注（标记）。<label>标签的作用是为鼠标用户改进了可用性，当用户点击<label>标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上；<label>标签在单选按钮和复选按钮上经常被使用，使用该标签后，你点击单选按钮或复选按钮的文本也是可以选中的。

用法：<label for="关联控件的id" form="所属表单id列表">文本内容</label>

关联控件的id一般指的是input元素的id；在html5中还新增了一个属性form，form属性是用来规定所属的一个或多个表单的 id 列表，以空格隔开；当<label>标签不在表单标签<form>中时，就需要使用form属性来指定所属表单；

3.textarea控件（文本域）

通过textarea控件可以轻松地创建多行文本输入框.

cols="每行中的字符数" rows="显示的行数" 我们实际开发不用

语法：

<textarea >
  文本内容
</textarea>

文本框和文本域区别