div和span及表单

div和span是非常重要的标签，一个空白的盒子

div

• div是容器级标签，不会增加任何的效果
• 在div标签里面的标签都是一个区域

    <div>
        <ul>
            <li>这是北京</li>
            <li>这是上海</li>
            <li>南京</li>
            <li>深圳</li>
        </ul>
    </div>

span

• span是文本级标签，区域，宽度
• span只可以存放，文字，图片，表单元素

 <span>
        <a href="#">这是一个标签</a>
    </span>

表单

• 是收集用户信息的，用form
• form标签里面有action和method属性
  • action属性表示，将表单提交到哪里
  • method 属性表示用什么方法提交，一般是get和post两种
• 1.文本框
  • <input type="text" />
  • input:输入控件
  • type：类型
  • text：文本

  <form action="" method="">
       <p>请输入你的用户名：<input type="text"></p>
    </form>

• 2.密码框
  • <input type="password">

   <form action="" method="">
       <p>请输入你的用户名：<input type="text"></p>
        <!-- 密码框-->
        <input type="password">
    </form>

• 3.单选按钮
  • type类型是radio

 <form action="" method=""> 
 <p><input type="radio" name="xingbie">男</p>
   <p><input type="radio" name="xingbie">女</p>
</form>

• 4.多选框
  • type类型checkbox

 <form action="" method="">  
 <p>请选择你的爱好：<input type="checkbox"> 吃饭
            <input type="checkbox">睡觉
            <input type="checkbox">打豆豆
      </p>
</form>

• 5.下拉列表
  • select 选择
  • option 选项

    <form action="">
        <select name="" id="">
            <option value="">北京</option>
            <option value="">上海</option>
            <option value="">深圳</option>
            <option value="">广州</option>
            <option value="">南京</option>
            <option value="">郑州</option>
            <option value="">云南</option>
            
        </select>
    </form>

• 6，多行文本域
  • textarea 文本域
  • cols 列数
  • rows 行数

 <form action="">
        <textarea name="" id="" cols="30" rows="10">
            　习近平总书记每年都会在春节期间去基层考察。从2013年到2017年，习近平总书记连续5年都在春节之际深入贫困乡村，看望困难群众，询问年货供应，关心群众的收入情况，与基层干部群众讨论精准扶贫。　困难群众是总书记的最大牵挂。每逢新春佳节，人民群众特别是困难群众生活得怎么样，有没有什么实际困难，“吃得怎么样、住得怎么样，能不能过好新年、过好春节”是总书记牵挂的头等大事。十八大以来的5年里，习近平总书记连续五年“访贫问苦”。从革命老区到民族地区，从黄土高原到偏远边陲，处处留下了总书记的足迹。每到一个地方调研，总书记都要走进困难群众的家中，与他们围坐话家常，寻访他们的困苦，感知他们的冷暖，化解他们的忧难。
        </textarea>
    </form>

• 按钮

  • 普通按钮
  • 提交按钮
  • 重置按钮

<form action="">
//普通
   <input type="button"  value="我是按钮" >
//提交
<input type="submit" value="提交按钮">
//重置
<input type="reset" value="重置按钮">
</form>

label绑定

之前的单选按钮在点击文字的时候 没有选中，是因为文字没有绑定

<p>
        请选择：<input type="radio" name="sex" id="nan" > <label for="nan">男 </label>
        <input type="radio" name="sex" id="nv"> <label for="nv">女</label>
    </p>

input元素要有一个id，然后label标签就有一个for属性，和id相同，就表示绑定了，这个label和input就有绑定关系了