2022.7.6 HTML入门,CSS基本规则和选择器

一、自结束标签

1.meta(网页相关信息,元数据),hr(分割线),br(换行),img(图片),input(输入框),link(连接外部CSS样式表,放在 head 里面)

2.meta标签的属性:

        charset="utf-8":中文网页需要用到的声明编码,否则出现乱码。

        name="keywords" content="" :提供网页关键字,关键字用“,”隔开,优化搜索。

        name="Description" :描述网页的信息。

二、a标签用法和一些杂项

1.超链接 target="blank">跳转网页 target="blank" 可以使超链接在新标签页打开。

2.根据id跳转 "#head1">跳转标题1 点击这个超链接可以跳转到id为 head1 的标签处。

3.引用同级路径用 ./ ,引用上一级路径用 ../ 。

4.乱文生成 lorem。

三、table表格

1.tr表示行,td表示列。

2.cellspacing 规定单元格之间的空白 ,cellpadding规定单元边沿与其内容之间的空白。colspan用于合并列,rowspan用于合并行。

    
姓名 性别
张三 18
李四

2022.7.6 HTML入门,CSS基本规则和选择器_第1张图片

 四、列表

有序列表:ol; 无序列表:ul; 自定义列表:dl(dt,dd)。

五、表单form

1.复选框的两种写法

    

2.下拉框

    

option中的value对应标签内的文字,value值会传到后台。

六、块级元素和行内元素

块级元素有:

,

,

    ,,

    行内元素有:,

    ,,,

    七、img标签title属性

    鼠标滑到图片上时显示的内容

    八、CSS基本规则

    
        
        
        
        前端练习
        
    

    1.div{}就是选择器。

    2.花括号内的代码即声明块,用于设置样式。

    3.两个background-color就是层叠样式表,上面的会被下面的覆盖。

    4.meta中的name="viewport" 能将网页的视口设置为完美视口,开发移动端页面一定要加上不然显示的元素比例会不合适。

    5.推荐外部样式表,即用link标签引入CSS资源,可以提高浏览器响应速度,解决页面中样式重复问题,利于代码维护和阅读

    九、选择器

    1.元素(标签)选择器

    h1,p,div{
        color: red;
        font-size: 10px;
    }

    2.类选择器

    .p1.p2{
        color: blue;
        font-size: 30px;
    }

    注意:在这种情况下,标签的类必须为 class="p1 p2" 才能生效

    类选择器也可以结合元素选择器

    p.p1{
        ....
    }

    注意:此时必须是 p 标签并且 class="p1" 才生效

    也可以一个标签选择多个类

    .p1{
    }
    >p2{
    }
    
    

    3.通配符选择器*{}

    所有元素都会生效但是优先级很低,最常用的就是设置margin和padding设置为0。

    4.派生选择器

    后代选择器 例 h1 p{color: red} 标签h1下的p标签以及p标签之下所有标签都生效

    子元素选择器 例 div>span{color: red} 只有div标签下的第一个span标签才生效

     
    
    
    选择器
    
    
    

    子代

    //first的子代

    孙代

    //first的孙代

    曾孙

    //firs的曾孙代
    //first的第二个子代、second的兄弟

    兄弟

    加上后代选择器效果

    .first p{//注意有个空格
    		color: red;
    }

    在这里插入图片描述

    使用子选择器效果

    .second > p{
    		color: red;
    }

    在这里插入图片描述

    以上代码和图片转自 qq_43342172 的文章 子代选择器和后代选择器的区别(侵删)

    相邻(兄弟)选择器 例 div+span{color: red} 在div和span同级的情况下,span会生效,如果是几个连续相同的同级,那么第二个之下的所有都生效

        li+li {
                color: red;
            }
    
        
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

     5.特殊选择器

    伪类选择器:

    :first-child{} //第一项生效

    :last-child{} //最后一项生效

    :nth-child() {} //第n项生效

    :nth-child(2n+1) {} //奇数项生效

    :nth-child(2n) {} //偶数项生效

    :not(:nth-child(n))  //除了第n项都生效

    a:link {} //未访问的链接生效

    a:visited {} //已访问的链接生效

    a:hover {} //鼠标悬浮的链接生效

    a:active {} //以选中的链接生效

    伪元素选择器:

    ::first-letter {} //第一个生效

    ::first-line {} //第一行 只能作用于块级

    ::selection {} //选中

    ::before {} //在开始位置(用来添加文字)

    ::after {} //在结束位置(同上)

    
    
    
    
        
        
        
        
        Document
        
    
    
    
        

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, quidem? Porro voluptatum, dignissimos ratione ea cum nam voluptate hic optio corporis et in fugit modi amet ullam. Dolorum dolor ipsam beatae. Quisquam facere laudantium magni eaque magnam, placeat delectus, vitae repudiandae quidem consequuntur vel ex adipisci modi distinctio odio iste? Aliquid, minus quidem ipsum mollitia cumque impedit nostrum nulla! Nostrum iste molestias cumque quod, veritatis dolor expedita, consequuntur nobis reiciendis vero dolorum inventore cum esse. Omnis, nobis eum? Necessitatibus quo aliquam minima fugit voluptatum libero itaque expedita sit? Iste, tempora suscipit? Deserunt voluptatem voluptates tempora ad nihil perferendis labore ullam quo ducimus accusantium, obcaecati veritatis, cum est, libero illo suscipit quisquam nisi repellendus mollitia corporis unde eum esse! Tempora corporis nesciunt provident vitae placeat inventore magni nulla repellendus dolorem sit corrupti, officiis laboriosam pariatur voluptatibus obcaecati excepturi deleniti quae illo dignissimos magnam? Quos commodi dolores earum eveniet id! Delectus harum illo similique aliquid dignissimos nobis deleniti nostrum et quas ea unde sed quaerat voluptas, qui a! Et in vero, recusandae aliquid error consequatur. Quis error nam in a quos eligendi accusamus adipisci illum maxime! Ea unde commodi consequatur officia reiciendis voluptate vel, excepturi pariatur molestiae rem dolore quidem. Ipsum, ducimus? Delectus, debitis quas! Dolorem velit praesentium eos odio cum consectetur iste, accusantium architecto facilis dolores, eum cumque quidem laborum minus quo similique sint dolor cupiditate? Doloremque, quos fugiat ex nihil eaque quod sapiente atque iste sequi dolore veritatis alias beatae rem autem perspiciatis, voluptatibus earum impedit, ipsa soluta architecto quibusdam sed cumque? Consectetur temporibus vel, omnis amet beatae quas ea eum minus cum dignissimos ullam libero sapiente rerum tenetur quisquam eos modi impedit nam alias nihil nesciunt commodi reiciendis aperiam magnam. Eaque nam eum pariatur officiis dolore itaque ipsam magni laborum quia ullam delectus reiciendis error, ad qui quod eos et recusandae? Ut adipisci illo omnis hic enim. Et sed laudantium expedita voluptatibus beatae culpa, nesciunt illo vitae, incidunt, inventore possimus sequi veritatis consectetur. Possimus repellendus perspiciatis debitis ducimus, recusandae animi vitae doloribus, libero eligendi natus esse suscipit ea, quae impedit ipsum consequuntur consequatur dolore saepe culpa architecto placeat? Est, exercitationem hic accusamus illum repellendus sint facere deleniti repellat, ratione dolorem quisquam magnam impedit, in labore officia nemo fugit non tempora reiciendis. Quasi ducimus fugit sunt natus non. Suscipit quis necessitatibus dolores numquam blanditiis sed obcaecati sunt voluptatibus minima, repellat distinctio inventore esse debitis voluptate? Similique possimus repellat autem molestias commodi itaque asperiores ipsum earum ut fuga eos aut vitae natus eum sint eligendi expedita iste ad voluptatibus porro, nam eaque labore ex sapiente? Odit laudantium voluptatum alias modi distinctio animi officia minima impedit molestias quibusdam! Aliquam nihil voluptas dolore, sequi voluptatem dolorem alias optio repellat cumque iure aliquid unde delectus totam quisquam minima nobis culpa animi dignissimos id facilis reiciendis neque quam laboriosam. Et, voluptate rem cupiditate quidem facere sunt non deserunt possimus tenetur rerum dicta ipsum illo, illum dolore aperiam consectetur ullam reiciendis minima earum temporibus expedita ducimus? Quas quod commodi hic rerum deserunt reiciendis aliquam, voluptatem porro.

    2022.7.6 HTML入门,CSS基本规则和选择器_第2张图片

    VSCode快捷键等:

    1.标签名*数字可以快速生成多个标签例如 a*3 p*3 等。

    你可能感兴趣的:(前端)