html学习4

1. 表格的结构标签

thand 表格的头部

tbody 表格的主体

tfoot 表格的底部

（常用于长表格）

2. 结构标签

<header>头部</header>

<nav>导航</nav>

<main>主体

<artide>文章</artide>

<aside>侧导航</aside>

<section>普通布局</section>

</main>

<foot>底部</foot>

3. 表单

使用场景：网站搜索框、登录注册

表单元素：

input 输入框标签

<form action="">
    <!--input标签要写在form标签内-->
    <!--每组input标签后加入br标签，使页面更整洁-->   
    账号<input type="text">
    密码<input type="text"><br>
    <!--创建一个输入框-->
    <input type="text" name="" id="" value="只读" readonly><br>
    <!--创建一个只允许用户读的输入框-->
    <input type="text" name="" id="" value="禁用" disabled><br>
    <!--创建一个禁止用户使用的输入框-->
    <input type="radio" name="sex" id="">男<br>
    <input type="radio" name="sex" id="">女<br>
    <!--创建单选框，若单选框的name属性相同，则用户只能在这组单选框中选取一个-->
     爱好：<input type="checkbox" name="" id="">花
     <input type="checkbox" name="" id="">鸟
     <input type="checkbox" name="" id="">虫
     <input type="checkbox" name="" id="">鱼<br>
    <!--设置一组多选框-->
      <input type="date" name="" id="">
    <!--设置日期输入框-->
        <input type="button" value="按钮">
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <!-- 三种按钮，提交按钮会清除页面所有输入信息并刷新，重置按钮只会清除页面所有输入信息 -->
        数字<input type="number" name="" id=""><br>
    <!--数字输入框-->
        邮箱<input type="email" name="" id=""><br>
    <!--邮箱输入框，会在页面提交是检测邮箱是否书写正常-->
        手机<input type="tel" name="" id="">
     <!--手机号输入框-->
        上传文件<input type="file" name="" id="">       
         <!-- 上传文件输入框，默认上传一个文件 -->
        <select name="" id="">
            <option value="">安徽</option>
            <option value="">上海</option>
            <option value="">山西</option>
            <option value="">陕西</option>
        </select>
        <!-- 下拉框，option标签为下拉内容 -->
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <!-- 文本框，cols属性代表几行，rows属性代表几列 -->
        <button type="">按钮</button>
        <button type="button">普通按钮</button>
        <button type="submit">提交按钮</button>
        <button type="reset">重置按钮</button>
        <button type=""><img src="" alt=""></button>
        <!-- button标签为，双标签按钮，按钮中可以添加图片 -->
</form>