html: 表单form，表格table

表单：form

form表单作用：
用于收集用户信息的。
form标签就是用来创建表单的

form标签上的属性：
action：用来写数据的提交地址的（也就是服务器的地址）
method：用来写表单的提交方式的
get
post
name属性是用来给表单起名字的，主要是用来区分表单的。

表单控件要写在form标签里，服务器提交数据的时候才能收集到这个控件的信息

表单元素（表单控件）

表单元素（表单控件）： 表单元素上都带有value属性，意思是‘值’, type是‘类型’

            

            1.文本输入框<input type="text">

            2.密码输入框 <input type="password">

            3.提交按钮： <input type="submit">

            4.重置按钮： <input type="reset">

            5.普通按钮：

                <input type="button" value="按钮里的文字">

                <button>按钮里的文字</button>

            6.单选按钮、单选框：<input type="radio">

                要想真正形成单选的效果，必须给标签写一个name属性，属性值一样的即为同一组，
                一组中才能有单选效果

            7.多选按钮、多选框、复选框：<input type="checkbox">

                多选同一组的选项最好也起一样的name值。

            8.下拉菜单：select+option
                <select>
                   <option value="option1">选项1</option>
                   <option value="option2">选项2</option>
                   <option value="option3">选项3</option>
                </select>

                option是选项的意思。
                默认选项是第一个option，要想更改默认选项不建议调整标签的书写顺序，想把哪个
                选项设置为默认选项，只需要在该option的后面写一个selected属性即可

            9.文件选择框： <input type="file">

            10.多行文本输入框（文本域）：<textarea></textarea>

                默认是允许用户自行拖拽调整大小的。
                禁止拖拽：resize: none;这是一个css代码。

代码区域：

    <form action="">

        <input type="text" value="1111">

        <br> <br>

        <input type="password" value="2222">

        <br> <br>

        <input type="submit" value="登录">

        <input type="reset" value="取消">

        <br><br>

        <input type="button" value="点击">

        <button>文字</button>

        <br><br>

        男：<input type="radio" name="sex">

        女：<input type="radio" name="sex">

        <br><br>

        未婚：<input type="radio" name="hunyin">

        已婚：<input type="radio" name="hunyin">

        离异：<input type="radio" name="hunyin">

        丧偶：<input type="radio" name="hunyin">

        <br><br>

        敲代码：<input type="checkbox" name="hobby">

        看电视：<input type="checkbox" name="hobby">

        打游戏：<input type="checkbox" name="hobby">

        吃饭：  <input type="checkbox" name="hobby">

        <br><br>

        <select>

            <option>西安</option>

            <option>北京</option>

            <option selected>上海</option>

        </select>

        <br><br>

        <input type="file">

        <br><br>

        <textarea style="resize: none;"></textarea>

    </form>

效果图展示：

扩展：

lable标签：用来扩大用户的点击范围。当点击文字的时候也能选中框
步骤：
先把文字放到lable标签里面去
给框起id名字
把id名字给label的for属性
好处：扩大了用户的点击范围

<label for="dropdown">选择一个选项：</label>
<select id="dropdown">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

隐藏域：就是写了之后看不⻅，主要作用：是用来放一些不能给用户看的数据的
<input type="hidden" value="写一些自己要用的但是不给用户看的东⻄">
图像域
<input type="image" src="img/1.jpg">

表单分组（表单字段集）：
作用：相当于一个框，用来对表单元素进行分组的。
fieldset（父）-legend（子），一组里面只能有一个legend
fieldset：用来给表单分组的
legend：写分组标题的
align属性调节位置： left、center、right、justify

<form>
  <fieldset>
    <legend>个人信息</legend>
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" required><br>
    <label for="age">年龄：</label>
    <input type="number" id="age" name="age" required><br>
  </fieldset>

  <fieldset>
    <legend>联系方式</legend>
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" required><br>
    <label for="phone">电话：</label>
    <input type="text" id="phone" name="phone" required><br>
  </fieldset>

  <input type="submit" value="提交">
</form>

表格：table        自己不分组会自动创建 tbody标签

table标签就是用来创建表格的标签。
tr代表行
td代表列====单元格
th标签：表格内的表头单元格。===有加粗居中效果 caption：表格的标题标签

表格的css属性

写在 tr td 上标签属性
height：一整行的高度
bgcolor：背景颜色，只对本行中的单元格起作用
align：水平方向的对⻬，只对本行中的文本起作用
valign：垂直方向的对⻬，对本行中的文本起作用
width：设置一个单元格的宽度，会影响这个单元格一整列的宽度。
height：设置一个单元格的高度，会影响这个单元格所在的一整行的高度。
bgcolor：本单元格的背景颜色。
align：水平方向的对⻬
valign：垂直方向的对⻬
合并单元格的属性：行合并rowspan列合并colspan
css来控制这些样式也是可以的

写在table上
border：边框
width：表格宽
height：表格高
background-color：背景色
text-align：文字居中
border-spacing: 单元格与单元格的间距。====写给table标签的
border-collapse: collapse;    合并边框线。一般用来画细线表格。====写给table标签的
table-layout: fixed;表格的布局算法属性。让宽度固定，不自动计算。====写给table标签的
表格宽度的计算方式：默认情况下单元格的宽度是自动分配的，内容多就分的多，内容少就分的少
empty-cells:空格子显示方式。
hide：隐藏
show：显示