表格标签--列表标签--表单标签

表格标签

概述

表格主要用于显示/展示数据，因为它可以让数据显示的非常的规整，可读性非常好。
Pink老师的总结:表格不是用来布局页面的而是用来展示数据的.
个人理解：功能多样，混用其他标签有时候会有很大的好处

1.2框架
    <table>  定义表格标签
    <thead> 表格的头部区域
    <tbody> 表格的主体区域
    <tr>     行   
    <th>     表头单元格(加粗居中)
    <td>     单元格

表格属性(css可以设置)

属性一般都写在标签名后面一个空格后的位置，且在尖括号包裹范围内。

属性名	属性值	描述
align	left 、center、right	规定表格相对周围元素的对齐方式。
border	1或	规定表格单元是否拥有边框，默认为””，表示没有边框
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素。
width	像素值或百分比	规定表格的宽度。

合并单元格(精确到td/th)

合并单元格方式:
跨行合并 :rowspan=”合并单元格的个数,最上面一各写合并代码
跨列合并 :colspan=”合并单元格的个数,做左侧一个写合并代码
要删除多余的单元格

列表标签

分类:无序列表有序列表自定义列表

(重点)无序列表（后面比较常用）

    ul > li
    <ul>
        <li></li>
         <li></li>
        <li></li>
    </ul>


1.无序列表的各个列表项之间没有顺序级别之分，是并列的.
2.<ul></ul> 中只能嵌套 <li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的.(记得上次实验好像直接被挤掉了)
3.<li>与</li>之间相当于一个容器，可以容纳所有元素，但在实际使用时，我们会使用CSS 来设置
4.无序列表带有自己的样式属性（例如旁边多个小点点），但在实际使用时，我们会使用CSS 来设置

(理解)有序列表

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

自定义(重点)

1.框架
<dl>
    <dt></dt>头部 
    <dd></dd>
    <dd></dd>
    <dd></dd>
</dl>
    1. <dl></dl>里面只能包含 <dt> 和 <dd>
    2. <dt>和<dd>个数没有限制，经常是一个<dt> 对应多个<dd>。

表单

概述

在 HTML中，一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息3个部分构成

表单域(form标签)

表单域是一个包含表单元素的区域

在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递
<form></form>会把它范围内的表单元素信息提交给服务器

from标签说明

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

属性	属性值	作用
action	url地加	用于指定接收并处理表单数据的服务器程序的url地址
method	get	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域。

表单元素

input输入表单元素

<input> 表单元素概述
    input是输入的意思，而在表单元素中 <input> 标签用于收集用户信息
    在<input>标签中，包含一个type属性，根据不同的 type属性值，输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)
<input type="属性值” />

type取值

input其他属性:

属性	属性值	描述
name	由用户自定义	定义 input 元素的名称
value	由用户自定义	规定 input 元素的值
checked	checked	规定此 input 元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度。

__说明__：

name和value是每个表单元素都有的属性值主要给后台人员使用

name 表单元素的名字要求单选按钮和复选框要有相同的name值

checked属性主要针对于单选按钮和复选框主要作用一打开页面,就要可以默认选中某个表单元素

maxlength是用户可以在表单元素输入的最大字符数一般较少使用

label标签 :比较特殊,它形成的区域专门用来链接到input的标签,即点击label域就直接转到对应id的input当中.

<label for="man">man or woman?</label>
<input type="text" name="sex" id="man" />

select下拉表单元素

概念

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表

语法:

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

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

textarea文本域元素

概述

特大号文本框,用来做留言反馈评论等

语法

<textarea rows="3" COls="20">
文本内容
</textarea>

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

小小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>

</head>
<body>
    <form action="ks.php" method="post">
        <!-- 文本框 -->
        <!-- label标签:使用户点击文字时,可以将文字通过for链接到对应id的input表单当中
        也就是说,点击就默认选择到对应的input当中 -->
        <label for="usernames">用户名：</label>
        <input type="text" name="username" value="请输入用户名" id="usernames"><br>
        <!-- 密码框 -->
        密码: <input type="password" name="passwd" id=""><br>
        <!-- 单选按钮 -->
        <!-- 同"name"可以使得这个圆圈实现单选 -->
        性别: 男 <input type="radio" name="sex" id="man"> 女 <input type="radio" name="sex" id="woman"> <br>
        <!-- 复选按钮 -->
        爱好:吃饭<input type="checkbox" name="eat" id="">
        <!-- 默认被选中:checked -->
        睡觉<input type="checkbox" name="sleep" id="" checked="checked">
        打豆豆<input type="checkbox" name="play" id= ""><br>
        <!-- 普通按钮 -->
        <input type="button" value="点击获取验证码">
        <input type="text" value="请输入验证码">
        <br>
        <!-- 文件域  -->
        请点击上传文件:
        <input type="file" name="" id="">
        <br>
        籍贯: <select name="" id="">
            <option value="">广东</option>
            <option value="">北京</option>
            <option value="">上海</option>
            <!-- selected="selected" ==> 变更为默认选中的方法 -->
            <option value="" selected="selected">湖北</option>
            <option value="">湖南</option>
            <option value="">广西</option>
            <option value="">西藏</option>
        </select><br>
        <!-- 超级文本框,会实时反馈标签内的文本 -->
        备注: <br><textarea name="" id="" cols="30" rows="10">
注册完成后您有什么需要做的事情嘛?
        </textarea>
        <br>
        <!-- 将表单发送到后台并且返回处理结果 -->
        <input type="submit" value="点击按钮提交">
        <input type="reset" value="点击重置表单">

    </form>
</body>
</html>