二阶段day-02 html和css基础

表单标签

表单标签
一般用来作用户信息收集的，单独用没有意义，一般是结合相关标签来使用
表单标签可以对包含在这个标签中的其他标签做信息的提交和重置
action -- 提交位置（接口相关）
metho -- 请求方式

--input标签
单标签
a.type属性
text - 普通的文本输入框，默认值
password-密码输入框
radio --单选按钮
checkbox -- 复选按钮
button -- 普通按钮
submit -- 提交按钮
reset -- 重置按钮
b.name属性 --主要用来区分数据的，提交的时候是以name=value形式提交的
value值只能是文本
c.value属性--设置value属性其实就是设置输入框中默认显示的内容，修改内容就是在修改value值
d.placehoder -- 文本输入框的提示信息
e.maxlength -- 输入的最长长度

            
            
            


密码输入框
                password
            -->
            
            
            


            
radio -- 单选按钮
                 name -- 同一组数据对应的name值设置成一样的才能做到单选
                 value -- 这儿的value只是用于提交，不能显示出来的
                 checked -- 设置为checked让按钮处于默认选中状态
            -->
             男
             女


让文字和按钮关联
                文字用lable标签显示，设置for属性的值为想要关联的按钮的id值
                这样做，点击文字和按钮的效果一样
            -->
            已婚
            未婚
            保密

4复选按钮 -- checkbox 
                
                name--同一组数据的name值要一样
                value--只能用于数据的提交不能显示
            -->
            教育
            互联网
            食品
            电竞  

5普通按钮 -- button
                
                value--对应的值会显示在按钮上
            -->
            
            

submit--提交按钮
                这个按钮的点击事件是将当前所在的form标签中，
                设置了name属性的相关的标签数据以name=value的形式提交
                
            -->
            


重置--reset
                
            -->
            

下拉列表

下拉列表（菜单）
            select标签 --代表整个下拉列表
            option标签 -- 代表列表中的每个选项 
                        可以通过设置selected属性的值为selected来让这个选项默认选中
            optgroup标签 -- 设置lable的值来对当前下拉菜单内容进行分组
        -->
        
            
            四川省
            云南省
            山西省
            辽宁省
            
            北京
            天津
            重庆
            上海
        
        
            成都
            绵阳
            阿坝
            凉山
        
多行文本域
            textarea标签 -- 输入框，可以同时显示多行内容，可以自定换行和上下滚动
            name属性--区分和提交
            rows -- 行数（不滚动最多能显示的行数，影响输入的高度）
            cols -- 列数（一行显示的文字的数量，影响输入框的宽度）
            placeholder -- 站位符
            maxlenth--限制最多的文字的个数
        -->
        

        

div和span

div和span都是无语意标签
            div -- 一个div占一行。网页中内容分组，分块都可以用div作为容器
                
            html中标签分类：行内标签、快级标签
            块级标签：一个占一行 例如：div、h1、p、
            行内标签：一行显示多个 例如：span、font、

CSS基础

.什么是css（层叠样式表）
css是web标准中的表现标准，主要用来对网页中的内容布局和样式
    
    
    2.css基本语法
    a.语法结构
    选择器{属性名1：属性值1；属性名2：属性值2....}
    
    b.说明
    选择器--选中想要设置样式的标签
    {} -- 固定写法
    属性 -- 属性名和属性值用冒号连接，多个属性之间用分号隔开，如果没有分号会导致后面的样式无效
            属性名必须是css提供的属性
            属性值：表示大小的数值必须加单位，px--像素、
                                            em -- 空格数
                                            也可以使用百分比（相对父标签）
    
    c.常用属性
     color--字体颜色
     background-color --背景颜色
     font-size --字体大小
     width -- 宽度
     height -- 高度
    
    3.css写在哪儿
     a.内联样式表: 将样式表写在标签的style属性中  这种样式表不需要选择器{}，直接给属性赋值
     b.内部样式表: 将样式表写在style标签中（这个标签可以放在head中，也可以放在body中）
     c.外部样式表: 吧css代码写在一个css文件中，然后在html中通过link去导入
     
     内联样式表不管在什么情况下优先级都是最高的
     外部和内部的样式表一样，谁后写，谁的优先级高
     
     4.css中的值
        颜色：英文单词，#加16进制颜色值，rgb（红，绿，蓝） rgba(红，绿，蓝，透明度)

3.外部样式表
            link -导入外部文件
            rel属性 -- 导入文件的作用  stylesheet -》样式表，icon->网页图标
            type -- 导入的文件类型说明
            herf -- 文件路径
        -->
        
        

2.内部样式表-->
        


1.内联样式表-->
        

            我是div1
            
        
        
我是段落
        

            我是div2
        
        
        
我是标题
    

选择器

1.选择器 --选中相应的标签
    aa.元素选择器（标签选择器）：
       直接将标签名作为选择器，功能就是将所有标签名的对应的标签选中
       比如：div{}，p{}，a{}
       
     b.id选择器
     将标签的id属性值前面加#作为选择器，选中id属性值是指定值的标签
     注意：一个页面中id值要唯一
     
     c class选择器（类选择器）
        将标签的class属性值千米那加 . 作为选择器，选中所有class属性值是指定的
        一个标签可以同时拥有多个class值，让多个class值用空格隔开。
    d. *(通配符)
        直接将*作为选择器，选中当前页面中所有的标签
        
    e. 群组选择器
    将多个选择器用逗号隔开，作为一个选择器，选中每个单独的选择器选中的所有标签
    a,p{}---选中所有的a标签和p标签
    #p1，div{}--选中id是p1的标签和所有的div标签
    .c1，#p1，a{}选中所有class值是c1，id是p1的标签和所有a标签
    
    f.层级选择器（后带选择器）
    将多个选择器用空格隔开作为一个选择器
    
    g.选择器的权重
      不同的权重值不一样，权重值越大，优先级越高，权重相同的时候，谁后写谁有效
      内联优先级最高
      元素选择器：0001（1）
      通配符：0001（1）
     class选择器：0010（2）
     id选择器：0100（4）
      通配符：0001（1）
      群组选择器：分开看每个选择器的权重
     后代选择器：所有的选择器权重之和
    


        
        
        
    
    
        
我是标题1
        

            

                
我是段落
            
            
我是标题2
        
        
我是段落2
        请叫我帅哥

伪类选择器

伪类选择器
    普通选择器是选择某一个标签，伪类选择器是选中标签某种状态
    
    1.语法
    普通选择器 ：状态{}
    
    2.常见状态
    a. link -- 初始状态 ，对于a标签来说指的是标签对应的地址没有成功访问过
    b. visited -- 访问过后的状态
    c. hover --鼠标悬停在标签上的时候的状态
    d. active -- 激活鼠标按住标签不放的时候
    主意：状态前面不是只能写元素选择器，更不是只能写a标签
    2.需要准守“爱恨”原则