HTML学习1

         本章进行了div的透明度、浮动、定位以及表单的操作的学习，具体内容如下：

div的浮动（float）分为左浮动left，右浮动right，它的默认为没有浮动

        书写形式，例：float:left;

1、当有两个兄弟级的div时

 ①如果都不设置浮动效果 那么两个div处于同一个文本流（相当于同一层级上）

 ②如果其中一个设置了浮动效果，则设了浮动效果的那个div会脱离原有的流，如同两张平行的纸张

 ③如果两个都设了相同的浮动效果，它们将按创建的顺序进行排序，并且两个div不管设置的是左浮动还是右浮动，

   其排列顺序为越靠近浏览器中心的越为后

2、当有多个兄弟级的div时，其效果与排列方式与两个兄弟级时一样

3、父子div关系时，其子div的画布为父div，设置浮动效果后，子div只会在父div中进行浮动。

div的清浮动（clear）即清除该标签周围的浮动效果

  其清除的效果只有作用在需要改变位置的标签上才能有用，如下：

  两个浮动的兄弟级div，清除div1旁边的div2

  其代码：.div2{
                background-color: green;
                float: left;
                clear: left;

         }

div的定位（position）：其分为相对定位（relative）、固定定位（fixed）以及绝对定位（absolute）

1、相对定位：相对定位的参照物是他本身，设置相对定位它不会脱离当前的层级 所以下面的元素不会浮上来

       其计算的偏移位置是从自身左上角开始

       如：div2{
            width:100px;
            height:100px;
            background-color: yellow;
            
            position: relative;
            left: 20px;
            top:20px;
        }

2、固定定位：固定定位的参照物是以浏览器为参照物，它会脱离当前的层级，形成另一个层面

3、绝对定位： 绝对定位的参照物是其父级标签，

  ①如果找到就以当前的这个父级标签为参照物，如果没找到 就继续向上寻找 寻找父级的父级 ，如果父级

 的父级仍然没有有开启定位的效果，则其参照物将一直向上寻找，直到找到为止

 ②如果所有父级都未找到，就以body标签为参照物进行定位

 ③如果一共四级都有开启定位效果，则找它最近的一个父级为参照物，不继续向上寻找

  ④非static的父级标签,只要是父级标签开启定位就可以被子标签当作绝对的定位,可以当绝对定位的参照物

表单（form）；

   如下：<form action="#" method="get">
            帐号：<input type="text"
                name="username"/>
            密码：<input type="text"
                name="password"/>
            确认密码：<input  type="text"
                name="aPassword" />
                <!--提交按钮-->
            <input type="submit" value="提交" />
            
        </form>

   ①action后面是你要去往的网址，填入双引号中

  ②method 提交内容的方法，其请求方法分为：

    get（铭文）可以直观看到的

    post（密文）将转换成二进制，不能直观看到

      表单的操作

1、表单可以提交内容

       文本输入框其传入服务器的形式为key-value   的形式，键值对即集合（容器），username ->相当于键值对key

         例；<input type="text"  name="username"
                placeholder="占位符"/>

2、密码输入框，password其 密码输入后是点

  如：<input type="password"     name =""/>

3、文件输入框，以选择本地电脑上的文件，name一般填文件的名字

  <input type ="file"  name=""/>

4、数字的输入框，其中数字的输入框

       <input type="number" max="30"
                    min="-3"   step="3"  />

5、大文本输入框

      <textarea></textarea>

6、单选框，如以下选择性别：

           男<input type="radio"  name="gender"
                    value="男" />
                女<input type="radio"  name="gender"
                        value="女"/>

7、复选框，如下喜欢的类型：

              男<input type="checkbox"  name="sex"
                    value="nan"/>
                <br />
                女<input type="checkbox"  name="sex"
                    value="nv" />

8、选择器，提供选择的内容供其选择，如下：

   <select name="">
                    <option value="ch">中国</option>
                    <option value="b">法国</option>
                    <option value="e">英国</option>
                </select>

9、隐藏提交，效果上看不出

          <input type="hidden"  name="hidden"
                    value="" />

10、按钮，点击按钮触发事件即会弹出窗口，如下：

           <input type="button"
                    onclick="alert('惊喜')"
                    value="请点我"/>
                <button  onclick="alert('都被点到了')">
                    点我啊
                </button>

11、提交按钮

          <input type="submit"  value="提交" />