[达内小学期] HTML标签2

表格

table : 表示表格整体
tr : 表示行
td : 表示列

表格中的内容不仅限于文本
标签嵌套关系如图

        <!-- 表格标签 -->
        <table border="ipx">
            <!-- table row  一行-->
            <tr>
                <!-- table data cell  一列 -->
                <td>第一个单元格</td>
                <td>第二个单元格</td>
            </tr>

            <tr>
                <td>第一个单元格</td>
                <td>第二个单元格</td>
            </tr>
        </table>

常用属性 :

• border 边框宽度
• width 表格宽度
• height 表格高度

表格标题和表头 :

• 表格标题
• <th> 表头单元格

        <!-- 表格标签 -->
        <table border="ipx" >
            <caption>雷电将军</caption>
            <!-- table row  一行-->
            <tr>
                <th>雷电将军</th>
                <th>雷电将军</th>
            </tr>
            <tr>
                <!-- table data cell  一列 -->
                <td><img src="L1.PNG" alt=""></td>
                <td><img src="L2.PNG" alt=""></td>
            </tr>

            <tr>
                <td><img src="L3.PNG" alt=""></td>
                <td><img src="L4.PNG" alt=""></td>
            </tr>
        </table>

跨行合并_跨列合并 :
在表格单元标签添加相应的 属性即可
colspan rowspan

  <table border="ipx">
            <!-- 跨行合并 -->
            <tr>
                <th>学生</th>
                <th>成绩 </th>
            </tr>
            <tr>
                <td rowspan="2">张三</td>
                <td>90</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>95</td>
            </tr>
        </table>

        <table border="ipx">
            <!-- 跨列合并 -->
            <tr>
                <th colspan="2">学生_成绩</th>
                <!-- <th>成绩 </th> -->
            </tr>
            <tr>
                <td>张三</td>
                <td>90</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>95</td>
            </tr>
        </table>

HTML表单

使用场景 :
在网页中收集用户信息

使用标签<form>

含有属性 :

• get : 会伴随用户信息
• post : 不伴随用户信息
• 实际开发通常使用post方式

    <body>
        <form action="day2.html" method="get">
            名字 ： <input type="text" name="name">
            <input type="submit" name="button" value="提交">
        </form>
        <br>
        
        <form action="day2.html" method="post">
            名字 ： <input type="text" name="name">
            <input type="submit" name="button" value="提交">
        </form>
    </body>

表单元素 :

1. 文本框

   <input type="text" name="name">
    type="text"表示他是一个文本框
    value  文本框的初始值
    size   文本框的长度
    maxlength 文本框可输入最多的字符 
   

2. 密码框

   密码 ： <input type="password" name="pwd" value="请输入密码">
   具体属性和 文本框类似
   

3. 邮箱

       <!-- 会自动验证 -->
        邮箱 :<input type="email" name="email" value="xxxx@qq.com">
   

4. 网址

       <!-- 和邮箱一样也会自动验证 -->
      网址 :<input type="url" name="url_1" value="www.xxx.com">
   

5. 数字

     数字 : <input type="number"  name="num" min="0" max="100" step="10" value="请输入数字">
   

   

6. 滑块

   滑块 : <input type="range" name="huakuai" min="0" max="50" step="50" >
   

   

7. 搜索框

         搜索框: <input type="search" name="search">
   

按钮

1. 单选按钮在这里插入代码片
   一组单选按钮名称需要相同

   <input type="radio" name="sex" value="男" checked> 男
   <input type="radio" name="sex" value="女">女

	checked: 表示单选按钮的选中状态,默认选中第一个

2. 复选框
   一组复选框名称也需要相同

    <input type="checkbox" name="spt" > 篮球
    <input type="checkbox" name="spt" > 足球
    <input type="checkbox" name="spt" > 乒乓球

3.下拉列表
不再使用input 而是select

            <select name="城市">
                <option>北京</option>
                <option>上海</option>
                <option>深圳</option>
            </select>   

4. 各种按钮

            <!-- 普通按钮 -->
            <input type="button" name="btn" value="普通按钮">

            <br>
            <!--重置按钮 -->
            <input type="reset" name="butRest">
            <br>
            <!-- 提交按钮 -->
            <input type="submit" name="button" value="提交">
            <br>
             <!-- 图片按钮 -->
            <input type="image" src="L1.PNG">

文本域

  <!-- 文本域 -->
        <textarea name="txtarea" cols="30" rows="10">
            文本内容
        </textarea>

文件

        <!-- 文件 -->
        <input type="file" name="subfile" value="上传文件">