HTML-div,span,form,input标签

最新推荐文章于 2024-03-15 21:30:00 发布

原创最新推荐文章于 2024-03-15 21:30:00 发布 · 637 阅读

1 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了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>