HTML+CSS+JAVAScript常用标签、属性总结

form表单标签
概念：用于采集用户输入的数据。用于和服务器进行交互。
form：用于定义表单， 可以定义一个范围，范围代表采集用户数据的范围。

        *属性：
            *action： 指定提交数据的URL(地址)
            *method： 指定提交的方式 get、post；
                *一共有七种方式，常用的是get、post
                *get：
                    1.请求参数会在地址栏中显示。会封装到请求行中。
                    2.请求参数大小是有限制的。
                    3.不太安全。
                 *post：
                    1.请求参数不会在地址栏中显示。会封装在请求体中。
                    2.请求参数的大小没有限制。
                    3.较为安全。
          *表单项中的数据要想被提交，必须指定其name属性。

			 Form表单项标签：
               *input:可以通过type属性值，改变元素展示的样式。
                    *type属性：
                        *text：文本输入框， 默认值；
                            *placeholder:指定输入框的提示信息，当输入框的
                                        提示内容发生变化，会自动清空提示信息；
                        *password： 密码输入框；
                        *radio：单选框；
                            * 注意：
                                1、要让多个单选框实现单选效果，则多个单选框的name属性值必须一致。
                                2、一般会给每个单选框提供value属性，指定其被选中之后提交的值。
                                3、checked属性可以指定默认被选中的的值。
                        *checkbox：复选框；
                            * 注意：
                                1、一般会给每个单选框提供value属性，指定其被选中之后提交的值。
                                2、checked属性可以指定默认被选中的的值。
                         * file：文件选择框；
                         * hidden： 隐藏域，用于提交一些信息。
                         * 按钮：
                               * submit：提交按钮；
                               * button：普通按钮；
                               * image：图片提交按钮；
                                    * src属性指定图片路径
                               * color : 取色器；
               * label： 指定输入项的文字描述信息
                    * 注意：
                        * label的for属性一般会和input的id属性值对应，
                        如果对应了，则点击label区域会让input输入框获取焦点。
               * select： 下拉列表
                    *name属性值；
                    *子元素：option，指定列表项。
                                *selected ： 默认选中；
                                * value：设置要提交的值；
               * textarea ： 文本域
                    * cols ： 指定列数，每一行有多少个字符串。
                    * rows ： 默认多少行；


CSS语法：
        *导入css样式： <link rel="stylesheet" href="CSS/MyCss.css">
        *格式：
            选择器 {
                    属性名1：属性值;
                    属性名2：属性值;
                    ......
             }

             * 1、基本选择器：
                    1、id选择器：选择具体的id属性值的元素（建议在一个html页面中id值唯一）。
                           *语法： #id属性值{}
                    2、元素选择器：选择具有相同标签名称的元素。
                           *语法： 标签名称{}
                           *注意：id选择器优先级高于元素选择器
                    3、类选择器： 选择具有相同class属性值的元素
                           *语法： .class属性值{}
                           *注意： 类选择器优先级高于元素选择器
                    优先级：id选择器 > 类选择器 > 元素选择器

              * 2、扩展选择器
                     1、选择所有元素：
                            *语法： *{}
                     2、并集选择器：
                            *语法： 选择器1，选择器2{}————两个同时选择
                     3、子选择器： 筛选选择器1元素下的选择器2元素
                            *语法： 选择器1 选择器2{}
                     4、父选择器； 筛选选择器2的父元素选择器1
                            *语法： 选择器1 > 选择器2{}
                     5、属性选择器： 选择元素名称， 属性名=属性值的元素
                            *语法： 元素名称[属性名=“属性值”]{}、
                     6、伪类选择器： 选择一些元素具有的状态
                            *语法： 元素：状态{}
                            *如： <a>
                                *状态：
                                    *link：初始化的状态；
                                    *visited：被访问过的状态；
                                    *active：正在访问状态
                                    *hover：鼠标悬浮状态；
             *属性
                1、字体、文本
                    * font-size：字体大小；
                    * color：文本颜色
                    * text-align: 对齐方式
                    * line-height：行高
                2、背景
                    * background：（可以设置背景图片，颜色等等）
                3、边框
                    * border：设置边框，符合属性；
                4、尺寸
                    * width：宽度
                    * height：高度
                5、盒子模型：控制布局
                    * margin：外边距；
                    * padding： 内边距；
                        默认情况下内边距会影响整个盒子的大小；
                        box-sizing: border-box; 设置盒子的属性，让width和height
                            就是最终盒子的大小；
                    * float:浮动
                        * left
                        * right

PS: 记笔记