[达内小学期] HTML标签2

最新推荐文章于 2024-06-15 21:20:00 发布

GzmObject

最新推荐文章于 2024-06-15 21:20:00 发布

阅读量129

点赞数 1

文章标签： html javascript html5

本文链接：https://blog.csdn.net/GzmObject/article/details/125612909

版权

表格

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>

表单元素 :

文本框

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

密码框

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

邮箱

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

网址

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

数字

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

在这里插入图片描述

滑块

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

在这里插入图片描述

搜索框

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

按钮

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

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

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

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

    <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>

各种按钮

            <!-- 普通按钮 -->
            <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="上传文件">

GzmObject

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[达内小学期] HTML标签2

table : 表示表格整体tr : 表示行td : 表示列表格中的内容不仅限于文本标签嵌套关系如图常用属性 :表格标题和表头 :跨行合并_跨列合并 :在表格单元标签添加相应的属性即可 HTML表单使用场景 :在网页中收集用户信息使用标签含有属性 :表单元素 :文本框密码框邮箱网址数字滑块搜索框按钮单选按钮一组单选按钮名称需要相同复选框一组复选框名称也需要相同3.下拉列表不再使用而是...
复制链接

扫一扫