day-25-表单-css

01.表单标签：form

属性：

action：表单数据提交的路径method：表单数据提交的方式  get/postget和post提交的区别(面试)：★★★★★    1. get提交的时候，参数在地址栏提交，会显示到地址栏；而post提交，参数是在http请求体里提交的，不会显示到地址栏    2. get提交不安全，而post提交相对安全    3. get提交参数有长度限制(IE限制2083个字符)，而post提交理论上没有长度限制<form name="myform" action="#" method="post">

02.输入项标签：input

属性：

type：    text：默认值，文本输入框    password：密码框。    radio：单选按钮。name相同的radio属于同一组，同一组的radio是互斥的。     checkbox：复选框。    button:普通按钮。没有任何功能的按钮，点击不会有任何反应    一般和js配合，进行事件 的自定义    submit:提交按钮。把按钮所在的表单数据提交    reset:重置按钮。把按钮所在的表单数据恢复成默认值    image:图片提交按钮。功能和submit按钮完全一样，只是把一个图片作为提交按钮来使用    file:文件选择框。提交的是文件名称，而不是文件上传。    hidden:隐藏域。不会显示到页面上的表单项，但是如果有name的话，隐藏域的数据也会提交name：表单项的名称    如果表单项的数据需要提交的话，就必须有name属性value：值。 value 的作用会随着type属性的不同儿改变；    在text里，value表示文本框的默认值    在password里，value表示密码框的默认值。一般不需要设置默认值    在radio里，value表示每一个选项的值。选中哪个选项，提交表单时就提交哪个选项的value值    在checkbox里，value表示每一个选项的值。选中哪个选项，提交表单时就提交哪个选项的value值    在button里，value表示按钮上的提示信息    在submit里，value表示按钮上的提示信息    在reset里，value表示按钮上的提示信息    在image里，value没有实际意义    在file里，value没有作用    在hidden里，value是隐藏域的值。如果隐藏域有name，会提交value值    readonly:固定值readonly。表单项的value值不可更改，但是可以提交    disabled:固定值disabled。表单项的值不可更改，而且不会提交    以下属性了解：    size：输入框的长度，可以显示几个字符。但是有浏览器兼容问题    maxlength:最多可以输入多少个字符

示例：

    用户名：<input type="text" name="username" placeholder="请输入用户名" maxlength="10" size="10"/><br />    密码：<input type="password" name="password" value="12345"/><br />    性别：<input type="radio" name="sex" value="male"/>男    <input type="radio" name="sex" value="female" checked="checked"/>女<br />    爱好：<input type="checkbox" name="hobby" value="code" checked="checked"/>编码    <input type="checkbox" name="hobby" value="food"/>美食    <input type="checkbox" name="hobby" value="sleep"/>睡觉    <input type="checkbox" name="hobby" value="friend" checked="checked"/>交友<br />    <input type="button" value="普通按钮" />    <input type="submit" value="提交按钮"/>    <input type="reset" value="重置按钮"/><br />    <input type="image" src="../img/btn.jpg"/>    <br />    <input type="file" name="file" value="aaa.jpg"/>    <input type="hidden" name="hdn" value="隐藏域的值"/>

03.下拉框标签：select

属性：

name：如果下拉框的数据需要提交，就必须有name属性multiple：固定值 multiple ，表示下拉框可以多选size：下拉框的高度，可以显示几个选项，一般和multiple配合使用下拉选项标签：option属性：    value：下拉选项的值。选中那个选项，就提交那个选项的值默认值：    默认选中第一个选项。    手动设置默认值：在需要默认选中的选项option上，增加属性：selected=“selected”；

示例：

<select name="addr">    <option value="bj">北京市</option>    <option value="sh">上海市</option>    <option value="tj" selected="selected">天津市</option>    <option value="cq">重庆市</option></select>多选下拉：<select name="addr1" multiple="multiple" size="5">    <option value="bj">北京市</option>    <option value="sh">上海市</option>    <option value="tj" selected="selected">天津市</option>    <option value="cq">重庆市</option></select>

04.文本域标签：textarea

属性：

rows：文本域的高，可以显示几行cols：文本域的宽，可以显示几列默认值设置：    文本域的默认值，是在textarea的标签体里面设置的（value对于textarea是无效的）    表单提交的时候，提交的也是标签体的内容

示例：

<textarea name="xuanyan" rows="5" cols="10" >我爱你</textarea><form name="form1" action="#" method="get"></form>

04.css

1.div和span标签：

div标签：不会对div的内容左任何修饰，一般和css配合做页面布局的span标签：不会对内容做任何修饰行级元素/块级元素：独占一行的元素。例如：div，p，hr，h1~h6行内元素：大小由内容决定。内容多大，就占多大空间的元素。例如：span，font，img例子：    <div>我是div2</div>    <span>我是span1</span>

2.引入方式：

引入方式1：    内嵌样式/行内样式。    书写规范：        在html标签里增加属性style，把样式写在style的属性值里；        样式写法： 样式名称：值；样式名称：值...例子：    <div style="color: red;font-size: 20px;">我是div1</div>引入方式2：    内部样式。    书写规范：        在head标签里增加子标签style的标签体里；        css选择器{样式名称：值；样式名称：值....}例子：    <style type="text/css">        div{            color: blue;            font-size: 20px;            }    </style>引入方式3：    外部样式。    书写规范：        在head标签里增加子标签link，引入外部的css文件    link标签：        属性：            href：css文件的路径            rel：固定值stylesheet，引入的文件和当前文件的关系            type：固定值 text/css。引入的文件类型例子：    <link type="text/css" rel="stylesheet" href="../css/my.css" />三种引用方式的比较：    复用性的比较：外部样式>内部样式>内嵌样式    在实际开发中：        一般网站整体风格相关的样式，使用外部样式        某一个页面单独的样式，可以使用内部样式，也可以使用外部样式。

3.选择器

css的选择器常见的三类：

1.基本选择器    （1）标签选择器：HTML标签{样式名称：值；样式名称：值...}    （2）id选择器：#id值{样式名称：值；样式名称：值...}    （3）class选择器：.class名称{样式名称：值；样式名称：值...}    优先级的比较：id选择器 > class选择器 > 标签选择器     优先级相同，则后加载覆盖先加载2.层级选择器    父选择器  后代选择器  大后代选择器...{样式名称：值；样式名称：值...}    注意：层级选择器里的空格，表示后代，而不是父子关系3.属性选择器    选择器[属性名=”值“]{样式名称：值；样式名称：值...}

4.漂浮 float 清除漂浮 clear：both

<style type="text/css">        .cls1{            width:200px;            height:200px;            background-color: green;            /*把div漂浮起来到上一层去*/            float: left;        }        .cls2{            width:300px;            height:300px;            background-color: yellow;            float: left;        }        .cls3{            width:250px;            height:250px;            background-color: blue;        }        .clr{            /*清除前边的元素，漂浮的影响。后边的元素还会在原来的位置显示，而不会被漂浮起来的元素盖住*/            clear: both;        }    </style>

5.盒子模型

<style type="text/css">        .box{            /*宽和高样式，设置的是内容区域的宽高*/            width:200px;            height:200px;            /*             * 盒子的宽高，是 内容的宽高 + 内边距 + 边框线             */            border: 20px solid red;            /*padding: 5px 10px 20px 40px;*/  /*上 右 下 左 四个内边距，顺时针*/            /*padding: 5px 20px 40px;*/ /*上  左右  下*/            /*padding: 5px 40px;*/ /*上下   左右*/            padding: 20px;            margin: 50px;        }        .cake{            background-color: green;            width:200px;            height:200px;        }    </style>