HTML-div,span,form,input标签

本文详细介绍了HTML中常用的div、span、form和input标签的用途及用法。div作为布局容器,用于组织页面结构;span用于内联元素的组合和样式应用;form用于创建表单,收集用户输入;input则提供了多种类型,如文本、密码、按钮等,用于表单数据输入。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<html>
<head>
    <title>
        DIV+CSS网页布局示例
    </title>
    <style type="text/css">
    body{
        margin: 0px;
        padding: 0px;
        font-size: 12px;
        text-align: center;
    }
  .content{
      font-size: 20px;
  }
  #top{
      background-color: #FFC
  }
  #middle{
      background-color: #CFF
  }
  #bottom{
      background-color: #CCC
  }
  #right{
       font-size: 18px;
  }
    </style>
</head>
<body>
    <!--页面所有内容 -->
    <div id="all" style="width:auto;overflow: hidden;margin: 0px auto;">
          <!--主体内容 -->
          <div id=" main" style="height: 574px;">
              <!--top -->
               <div id="top" style="border: red solid 1px;height: 72px;">
                  <span class="content"><br>这里是标题栏</span>
               </div>  
               <!--middle -->
               <div id="middle" style="height: 500px;overflow: hidden">
                   <!--left -->
                   <div id="left" style="border: blue solid 1px;width: 252px;height: 500px;float:left; ">
                     <span class="content">
                         <a href="C:\Users\yuanyuan\Desktop\前端基础知识\signA.html">signA</a><br>
                         <a href="C:\Users\yuanyuan\Desktop\前端基础知识\signB.html">signB、C、D</a>
                     </span>
                   </div >
                   <!--right -->
                   <div id="right" style="border: green solid 1px;height: 500px;">
                      
                      <span class="content">
                          <b>span标签</b><p>用来组合文档中的行内元素,以便通过样式来格式化他们,也可以为它定义全局属性id,class,
                           以便于对它应用样式</p>
                           <b>登录表单</b>
                           <form name="login">
                               <label>账户</label><input type="text" name="user" size="20"/><br>
                               <label>密码</label><input type="password" name="password" size="20" /><br>
                                <input type="submit" value="login"/><br>
                            </form>
                         
                         
                      </span>
                          <b>form标签</b> <p>成对出现,常用属性:name,method,action </p> 
                              <b>input标签</b><p>单标签,常用属性:type(button,checkbox,file,hidden,image,password,rafio,reset,submit,text), name,size,value </p>   
                         
                   </div>
               </div>
          </div>
         <!--版本信息 -->
         <div id="bottom" style="border: red solid 1px; height: 50px;">
             <span class="content"> 这里是底部,版权所有翻版必究</span>
         </div> 
    </div>
</body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值