day03 表单及css基础

一.表单标签的使用

1.作用：收集用户信息

2.表单的标签：表单框/表单域

二:表单框的使用:盒子,装用户的信息的,发送给后台进行保存用户信息

1.标签名称:form(不要写错了from)

2.表单框的特点

    - 没有任何的样式就是一个盒子而已

3.表单框的属性

    - action 行为动作 表示用户提交发送地址

    - method 方式方法 表示发送数据的方式(get/post)

    - ? 后面携带参数(用户信息)

三:表单控件的使用【重点】

1.标签名称:input

2.标签属性(HTML4)

    - type 类型 改变的是当前表单控件的类型,默认text是文本输入框

    - value 价值/作用 表示可以根据不同的类型设置提示(默认是占位置 需要手动删除)

    - placeholder 提示 HTML5中新增加的属性(默认是不占位置的 不需要手动删除)

    - name 表示发送时候绑定数据

3.type类型有哪些属性值?

    - text 默认值 表示文本输入框

    - password 密码

4.常见的功能按钮(必须写在form标签中)

    - submit 提交

    - reset 重置

5.特殊的情况:空按钮(工具人)

    - 第一种:设置type="button"

    - 第二种:设置button标签,默认会提交一次页面

 

    CSS语法组成

    1.作用:主要是为了修饰美化页面的

    2.组成:选择器{声明}=>选择器{属性1:属性值1;属性2:属性值2}

    注意:

    1.选择器/选择符是修饰当前这个对象的(标签)

    2.{声明} 声明又分为属性和属性值

    3.属性和属性值之间需要使用冒号相连

    4.如果有多个属性的时候结束后面需要加分号

    5.CSS语法中的属性要和HTML属性值区分开!!!

 

    CSS样式表的创建方式:行内式、内部式、外部式

    一:行内样式表的创建方式

    1.需要在标签的内部书写一个属性style

    2.在属性值的位置书写css语法组成

    3.行内样式表的语法会比较特殊,不需要写选择器了

    二:内部样式表的创建方式

    1.建议在头部位置书写style标签

    2.在style标签的内部书写css语法组成

    三:外部样式表的创建方式

    1.需要在外面创建一个后缀名为.css的文件

    2.在这个文件中书写规范的css语法即可

    3.外部文件需要引入进来使用

        第一种方法:【重点】

            - 建议在头部文件中书写link标签,表示引入外部的资源

        第二种方法:【了解】

            - 建议在头部位置书写style标签

            - 在标签的内部书写@import url("路径地址")

        区别:

            - link标签引入的时候是同时加载HTML和CSS的

            - @import导入时候先加载HTML后加载CSS

 

        优先级:行内样式表的优先级最高,内部和外部取决于当前代码的书写顺序在下面的优先级更高(就近原则)

        1.移动代码:alt+上下按键

         2.在浏览器控制台中常见的提示

            - 如果css属性被黑色的线划掉:表示当前的属性有相同并且优先级比较高

            - 如果有黄色的三角形和感叹号表示当前的代码写错了

 

            基本选择器的使用:标签、id、class、群组选择器、通配符

            一:标签选择器/元素选择器

            1.说明:选择中的就是当前标签名称

            2.语法:标签名称{}

       

            二:id选择器

            1.语法

                - 在想要修饰的标签内部添加id属性和属性值

                - 在样式表中使用 #属性值{}

            2.说明:可以理解成一个人的身份证,建议在一块布局中只使用一次

       

            三:class选择器/类选择器

            1.语法

                - 在想要修饰的标签内部添加class属性和属性值

                - 在样式表中使用 .属性值{}

       

            四:群组选择器

            1.说明:表示有很多相同的声明可以写在一起

            2.语法:选择器1,选择器2,选择器3{}

       

            五:通配符

            1.说明:学习的标签有默认样式,浏览器也有默认样式(上下左右有8px的间距)

            2.语法: *{margin:0;padding:0} 清除浏览器和所有标签的内外边距