前端学习html2

最新推荐文章于 2024-11-07 10:38:40 发布

苗苗大佬

最新推荐文章于 2024-11-07 10:38:40 发布

阅读量85

点赞数

分类专栏：前端接口测试文章标签： html python css

本文链接：https://blog.csdn.net/weixin_39349045/article/details/119282695

版权

接口测试同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

本文介绍了HTML中<label>元素与<input>的绑定，展示了点击<label>可以选中<input>的交互效果。同时，讨论了<textarea>的使用和<select>的默认选中选项设置。还探讨了HTML列表<ul>、<ol>、<dl>的结构以及表格的创建和合并单元格的方法。

摘要由CSDN通过智能技术生成

label
    for属性和input的id是绑定到一起的。
    绑定后，点击label，会自动选中input

 <div>
   <label for="unname"> 用户名：</label>
   <input type="text" id="unname">
 </div>

textarea

    <div>
        <span>请输入意见：</span>
        <label for="name"></label>
        <textarea name="name id="name" cols="30" rows="10"></textarea>

    </div>

现象：
在这里插入图片描述
select
selected属性可以控制默认值

        <form action="http:www.baidu.com">
                <select name="miao">
                        <option value="1">单肩</option>
                        <option value="2" selected>双肩</option>  
                    </select>
                <input type="submit" id="miao">
        </form>
        
     </div>

在这里插入图片描述

https://v3.bootcss.com/getting-started/

    <div>
         <ul>
             <li>miaomiao</li>
             <li>dingdongdong</li>
         </ul>
         <ol>
                <li>miaomiao</li>
                <li>dingdongdong</li>
         </ol>
         <dl>
             <dd>名字</dd>
             <dt>李苗苗</dt>
             <dt>丁栋栋</dt>
         </dl>
     </div>

在这里插入图片描述

 <div>
       <table>
           <thead>
               <th>姓名</th>
               <th>年龄</th>
           </thead>
           <tbody>
               <tr>
                    <td>xiaozhang</td>
                    <td>18</td>
               </tr>
               <tr>
                   <td>xiaowang</td>
                   <td>30</td>
               </tr>

           </tbody>
       </table>
     </div>

在这里插入图片描述

表格会有变化

在这里插入图片描述

合并

     <div>
       <table border="1px">
           <thead>
               <th>姓名</th>
               <th colspan="2">身高测量</th>
           </thead>
           <tbody>
               <tr>
                    <td>xiaozhang</td>
                    <td>18</td>
                    <td>18.9</td>
               </tr>
               <tr>
                   <td>xiaowang</td>
                   <td>30</td>
                   <td>30.1</td>
               </tr>

           </tbody>
       </table>
     </div>

在这里插入图片描述
合并

 <div>
       <table border="1px">
           <thead>
               <th>姓名</th>
               <th colspan="2">身高测量</th>
           </thead>
           <tbody>
               <tr>
                    <td>xiaozhang</td>
                    <td rowspan="2">18</td>
                    <td rowspan="2">30</td>
               </tr>
               <tr>
                   <td>xiaowang</td>
               </tr>