day22-作业-页面内的跳转

一、页面内的跳转

根据用a标签来连接其他标签的id或class或其他选择器名进行页内的跳转。

    
        
        
        
    
    
        
        

            
HTML和CSS的学习
        
        

        

            

                
表单标签
                
下拉列表与多行文本
                
空白标签
                
认识CSS
                
CSS选择器
                
伪类选择器
            
        
        

        

            
表单标签
        
        

              表单标签:
    作用：专门来收集用户信息。
    1. 可以提交表单中收集的信息
    action属性：设置提交信息的位置
    method属性：提交方式 --POST/get
    input标签：
    1.是表单标签
    2.type属性：
        text值：普通的文本输入框
        password值：密码文字输入框
    3.name属性：传值时很重要，
    4.value属性：标签内容
    5.placeholder属性：提示信息，占位符
    6.maxlength:输入框中输入字符的个数 
    7.readonly属性:值为readonly只读内容，不能编辑。
    type属性：password----输入的值是密文显示
    单选按钮：
    type属性：radio
    name属性：统一类型的对应的name值必须一样
    value属性：
    checke属性：设置按钮默认处于选中状态。
    type属性：submit提交按钮值
    1.type属性：checkbox
    2.name：同一类型对应的name值必须一样
    3.value:设置选中按钮提交的值
    4.checked：设置checked,让按钮处于默认选中
    input标签：type属性：值为button，普通按钮
    nput标签：重置标签
    将当前所在的from中的所有表单相关标签对应的值，回到最初的状态
    nput标签：type属性;file值，文件选择器
            
        
        

            
下拉列表与多行文本
        
        

            1.下拉菜单-->
select 下拉列表标签：
     属性selected：selected表示默认选中
2.多行文本输入域（多行文本输入框）
3.表单分组：fieldset：
    一个fieldset标签对应一个分组
    legend标签：设置分组名。
            
        
        

            
空白标签
        
        

            html中的标签分为两大类：
1.块级标签：一行只能有一个（不管标签的宽度什么样的）
    div，h1-h6,p,hr,dl,dd,li,列表相关的标签都是块标签。
    table，form，
2.行内标签：一行可以有多个标签，没有任何特殊的意义（无语义标签）
    a,img,input，select（下拉列表），textarea（多行输入）
    
        
        

            
认识CSS
        
        

        1.什么是CSS
    CSS是web标准中的表现标准，用来设置网页上的标签的样式（长什么样，位置）
    CSS代码或者CSS文件，我们叫样式表。
    目前使用CSS3版本
2.写在哪儿
    a.内联样式表：将代码写标签内部的style属性中。（优先级最高）
    b.内部样式表：写在head标签中，用style标签来装CSS代码。
    c.外部样式表：新建一个CSS文件，通过head中的link标签来关联
    
    优先级：
    内联：优先级最高
    内部和外部：是那个最后赋值那个就优先
3.怎么写
    选择器{属性：属性值；属性：属性值}
    
    选择器：用来选择中需要设置样式的标签
    属性：CSS属性（CSS2中的属性有两百多个属性）
    属性值：如果是数字，表示的大小要在后面加px.否则无效。
    注意：没事属性之间用分号隔开，否则属性无效。
    
补充属性：color：设置字体颜色，background-color：设置背景颜色  whith：标签宽度
style 属性：每个标签都有
    内联的写法
            
        
        

            
CSS选择器
        
        

            0.元素选择器（标签选择器）：标签名
    选中所有的标签名对应的标签
1.Id选择器：#id属性值
    每个标签都有一个id属性，整个HTML中，id是唯一的。


CSS中的颜色值：
    1.颜色英语单词
    2.十六进制颜色值；0-255,00-ff(#ff0000-红色)
    3.rgb值：rgb(红，绿，蓝) rgba(红，绿，蓝，透明度)-透明度0-1
2.class选择器：.class属性值
    每个标签都有一个class，但是class的值不用是唯一的
3.通配符  *
    选中所有的标签
4.层级选择器：
    选择器1 选择器2...
    
5.群组选择器：同时选中所有,用逗号隔开。
            
        
        

            
伪代选择器
        
        

            伪类选择器的语法：
    1. 选择器：状态
    link：超链接对应的是初始状态
    visited：超链接访问后的状态
    hover：鼠标悬停在标签上的时候对应的状态
    active：鼠标按住时的状态
    
    给同一个标签通过伪类选择器给不同状态设置不同的样式的时候，
    要遵守爱恨原则（先爱后恨）
    LOVe HAte
            
    

结果截图如下：

image.png