html5&cssWebStageDay02

案例一 完成注册页面的编写
学习:
div+css 布局的美化
form表单 收集用户数据

1.form表单标签(最重要,必须掌握):

1)form表单最重要的三句话:
                1.作用:收集用户数据
                2.name 属性------参数名
                3.value 属性-----参数值

2)
属性:
    (1)action:  请求路径:控制表单的提交地址,默认是当前页面

    (2)method:  请求方式
        get:默认  会在地址栏  原有url地址  加上?参数名=参数值&参数名=参数值.....
                    不太安全    传输数据大小有限制 1KB                                           
        post:       不限制数据的大小
                    不在地址栏显示,相对安全

3)form子标签的:
    (1)input 输入框
        type:
            text:默认值 文本
            password:密码
            radio:单选
            checkbox:多选
            file:文件上传
            button:普通按钮
            submit:提交按钮
            reset:重置按钮
            date:日期框 没人用
            image: 没人用
            hidden:隐藏域(不在页面显示,但仍提交数据)

    (2)select 下拉选择框
        子标签option

    (3)textare 文本域
        cols:列
        rows:行

    (4)button 按钮 (input可替代)

    (5)通用属性值 name 属性:
        1.给单选框和多选框分组
        2.如果你希望提交该输入框的内容,必须给输入框起名

    (6)通用属性值 value 属性:
        1.给输入框按钮类型 起名
        2.value属性 就是该输入框提交的时候的值

    (7)默认值:
        1.对于 text password hidden 默认值都是value属性决定
        2.对于单选框 多选框  由checked属性控制   checked="checked"
        3.下拉选择框 默认由selected属性控制 selected="selected"
        4.textarea 默认值 直接写在标签体内     

---

div+css 布局

css就是用来美化页面

css 层叠样式表

---

div:html标签
块级标签 独占一行

span标签:
特点:
没有特点就是最大的特点

---

css语言:
语法:
css选择器{
css属性名:css属性值;
css属性名:css属性值;
…..
}

将css引入hmtl中:
    1.内联样式表
        
    2.内部样式表
        在head下写子标签
            
    3.外部样式表
        在head的写下子标签
            

    css引入就近原则 ??

---

css选择器:
    id选择器  必须掌握的
        html: 
        css: #x{...}
    class(类)选择器
        html: 
        css: .y{}
    元素(标签选择器):
        html:
        css:xxx{}
    属性选择器:
        html:
        css:[xyz='w']{}

        通常情况下会配合元素选择器一起使用

    伪类选择器
        锚伪类选择器
    分组选择器:
        选择器1,选择器2{
            css代码
        }
        节省代码
    后代选择器
        父选择器 后代选择器{
        }
    子代选择器
        父选择器>后代选择器{
        }

    选择器优先级
        越特殊优先级越高

id>属性选择器和class选择器>元素选择器

css样式
    背景相关的
        背景颜色:background-color
        背景图片:background-image:url("路径")
    宽高:
        width:
        height:
    文本:
        颜色:color
        对齐方式:text-align
        缩进:text-ident:
        text-decoration:去掉下划线 上划线
    字体:
        大小:font-size
        家族:font-family
        风格:font-style 斜体
        粗细:font-weight bold
    边框:
        border:边框
            粗细 样式 颜色

    浮动和清除浮动:
        float:left|right    
        clear:both|left|right

    display:显示
        none:不显示
        block:显示
        inline:行内显示
    盒子模型:
        border:边框
        padding:内边距
        margin:外边距
        上右下左