zoukankan      html  css  js  c++  java
  • HTML

    基本格式

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="=utf-8" />
            <title>标题</title>
        </head>
        <body>
            <!--666-->
            <p>
                lll
            </p>
            <h6>伦伦</h6>
        </body>
    </html>
    

    meta标签

    <!DOCTYPE html>
    <html>
        <head>
            <!--使用meta标签可以设置网页的关键字
            还可以用来指定网页的描述
            给搜索引擎看的,不会影响页面在搜索引擎中的排名
            -->
            <meta name="keywords" content="关键字1,2,3" />
            <meta name="description" content="马上要开学了" />
            
            <!--使用meta做请求重定向
            
            -->
            <meta charset="=utf-8" />
            <meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
    
    
            <title>标题</title>
        </head>
        <body>
            <!--666-->
            <p>
                lll
            </p>
            <h6>伦伦</h6>
            <h1>5秒后跳转页面</h1>
        </body>
    </html>
    

    特殊符号和引入图片

    <!DOCTYPE html>
    <html>
        <head>
            <!--注释-->
            <meta charset="utf-8" />
            <title>网页中的标题</title>
        </head>
        <body>
            <!--注释-->
            <h1>大不大</h1>
    
            <p>段落</p>
    
            <!--超链接-->
            <a href="http://www.driverzeng.com">飞机</a>
    
            <!--大于小于号和空格-->
            <p>a&lt;b&gt;c   </p>
    
            <!--版权和空格-->
            <p>&copy; 锄禾日当 &nbsp;&nbsp;&nbsp;午</p>
    
            <!--向网页中引入一个外部图片或动图,使用img自结束标签-->
            <!--
                src:设置一个外部图片或动图的路径
                alt:设置图片不能显示时候的描述,搜索引擎可以通过alt来识别不同的图片,不写也可以
                    只不过搜索引擎不收录
    
                修改图片的宽度,一般使用px作为单位
                beigth:修改图片的高度
                宽度和高度两个属性如果只设置一个,另一个也会等比例调整大小
            -->
            <img src="QQ截图20200516072430.png" />
            <img src="C:UsersAdministratorDesktopQQ截图20200啊516072430.png" alt="这是一个截图" />
            <img src="QQ截图20200516072430.png" width="200px" height="500px" />
    
            <!--图片的格式
                JPEG(JPG):该图片支持的颜色比较多,图片可以压缩,但是不支持透明,一般用来保存照片等颜色丰富的图片
                GIF:支持的颜色少,只支持简单的透明,支持动态图,图片颜色单一或者是动态图时可以使用gif
                PNG:支持的颜色多,支持复杂的透明,可以用来显示复杂的透明的图片
    
                图片的使用原则:
                效果不一致,用好的
                效果一致,用小的
            -->
        </body>
    </html>
    

    语法规范

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="=utf-8" />
            <title>xhtml的语法规范</title>
        </head>
        <body>
            <!--
                1.HTML中不区分大小写,但是我们一般都使用小写
                2.HTML中的注释不能嵌套
                3.HTML标签必须结构完整,要么成对出现,要么自结束标签<br><meta>
                4.浏览器尽最大努力解析页面,有些时候会修正错误,因为浏览器要抢市场
                5.标签不能交叉嵌套
                6.HTML标签中必须有值,并且值必须加引号(单双引号)
            -->
    
            <p>lll</p>
            a 
            <br>
            b 
            <br/>
            c 
            <br>
            
            <p>今天天气<font color="red">真好</font></p>
    
            
            <h6>伦伦</h6>
        </body>
    </html>
    
    <h6>伦伦</h6>
    
    

    内联框架

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="=utf-8" />
            <title>内联框架</title>
        </head>
        <body>
            <!--
                使用内联框架可以引入一个外部的页面,可以使用iframe来创建一个内联框架(页面中的页面)
                内联框架中的内容不会被搜索引擎检索
                属性:
                    src:指向一个外部页面的路径,可以使用相对路径
                    
                    height:
                    name:可以为内联框架指定一个name属性
            -->
    
            <iframe src="新建文本文档.txt" name="tom"></iframe>
    
            
            
        </body>
    </html>
    

    超链接和文本居中

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="=utf-8" />
            <title>超链接</title>
        </head>
        <body>
            <!--
                使用超链接可以让我们从一个页面跳转到另一个页面
                使用a标签可以创建一个超链接
                    属性:
                    href:指向链接跳转的目标地址,可以写一个相对路径,也可以写一个完整的地址
                    链接访问前和访问后的颜色不一样,可以设置
    
            -->
    
            <a href="http://www.baidu.com">百度</a><br><br>
            <a href="404.html">本地</a><br>
    
            <!--
                a标签中的target属性可以用来指定打开链接的位置
                    可选值:
                    _self,表示在当前窗口中打开(写不写都一样)
                    _blank,在新的窗口中打开超链接(打开一次开启一个)
                    设置一个内联框架的name属性值,链接将会在内联框架中打开
    
            -->
            <a href="http://www.baidu.com" target="_blank">新标题打开百度</a><br>
            <a href="http://www.baidu.com" target="_self">当前标题打开百度</a><br>
    
    
            <!--
                内联框架中打开超链接
            -->
            <iframe src="http://www.baidu.com" name="tom"></iframe>
    
    
            <!--
                center标签中的内容,会默认在页面中居中显示,可以将要居中显示的内容放到该标签里面
            -->
    
            <center>
                <p>
                    居中显示
                </p>
            </center>
    
            <p>
                lll
            </p>
            <h6>伦伦</h6>
        </body>
    </html>
    

    东风破

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="=utf-8" />
            <title>东风破</title>
        </head>
        <body>
        <!--
            跳转到id为eofeof的元素所在的位置
            直接在href中写 #id属性值
        -->
        <a href="#eofeof">直达底部</a> <br>
        <a href="#tp">我要看图片</a>   
            <center>
                <h1>东风破</h1>
                <hr />
                <!--
                    创建一个超链接时,如果地址不确定,可以直接写一个#作为占位符,作为一个不跳转的超链接
                -->
                <a href="#">周杰伦</a><br>
                <p>
    
                一盏离愁 孤单伫立在窗口<br> 
    
                我在门后 假装你人还没走<br>
    
                旧地如重游 月圆更寂寞<br>
    
                夜半清醒的烛火 不忍苛责我<br>
    
                一壶漂泊 浪迹天涯难入喉<br>
    
                你走之后 酒暖回忆思念瘦<br>
    
                水向东流 时间怎么偷<br>
    
                花开就一次成熟 我却错过<br>
    
                谁在用琵琶弹奏 一曲东风破<br>
    
                岁月在墙上剥落 看见小时候<br>
    
                犹记得那年我们都还很年幼<br>
    
                而如今琴声幽幽 我的等候你没听过<br><br>
                <a id="tp"></a>
                <img src="350126099.jpeg" alt="图片" width="300px"><br><br>
    
                谁在用琵琶弹奏 一曲东风破<br>
    
                枫叶将故事染色 结局我看透<br>
    
                篱笆外的古道我牵着你走过<br>
    
                荒烟漫草的年头 就连分手都很沉默<br>
    
                一壶漂泊 浪迹天涯难入喉<br>
    
                你走之后 酒暖回忆思念瘦<br>
    
                水向东流 时间怎么偷<br>
    
                花开就一次成熟 我却错过<br>
    
                谁在用琵琶弹奏 一曲东风破<br>
    
                岁月在墙上剥落 看见小时候<br>
    
                犹记得那年我们都还很年幼<br>
    
                而如今琴声幽幽 我的等候你没听过<br>
    
                谁在用琵琶弹奏 一曲东风破<br>
    
                枫叶将故事染色 结局我看透<br>
    
                篱笆外的古道我牵着你走过<br>
    
                荒烟漫草的年头 就连分手都很沉默<br>
    
                谁在用琵琶弹奏 一曲东风破<br>
    
                岁月在墙上剥落 看见小时候<br>
    
                犹记得那年我们都还很年幼<br>
    
                而如今琴声幽幽 我的等候你没听过<br>
    
                谁在用琵琶弹奏 一曲东风破<br>
    
                枫叶将故事染色 结局我看透<br>
    
                篱笆外的古道我牵着你走过<br>
    
                荒烟漫草的年头 就连分手都很沉默<br>
                </p>    
                <hr>
                友情链接:<br><br>
                <a href="#">A网站</a>|<a href="#">B网站</a>|<a href="#">C网站</a><br><br>
    
                <!--
                    如果将链接地址设为#,则点击超链接以后,会自动跳转到当前页面的顶部
                    html中有一个属性,每一个元素都可以设置,该属性可以作为标签的唯一标识
                    这个属性就是id,id属性在同一个页面中只能有一个,不能重复出现
                -->
                <!--
                    发送邮件的超链接,点击链接以后可以自动打开计算机中默认的邮件客户端
                    href="mailto:邮件地址"
                    当点击这个超链接时,会打开计算机的默认电子邮件客户端,并且将收件人设置为mailto后面的邮件地址
                    如果没有mailto软件,点击无效
                -->
                <a id="eofeof" href="#">回到顶部</a>|<a href="mailto:1757528181@qq.com">联系我们</a><br>
            </center> 
        </body>
    </html>
    

    3种样式表

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="=utf-8" />
            <title>CSS</title>
            <!--
            内部样式表
            也可以将CSS样式编写到head中的style标签里,然后可以通过css选择器选中指定元素
            然后可以同时为这些元素一起设置样式,这样可以使样试进一步的复用
            将样式表编写到style标签中,也可以使表现和结构进一步分离
            -->
            <style type="text/css">
                p{
                    color: red;
                    font-size: 40px;
                    }
            </style>
    
            <!--
                外部样式表
                还可以将样式表编写到外部的css文件中,然后通过link标签来将外部的css文件引入到当前页面中
                这样外部文件中的css样式将会应用到当前页面中
    
                将css样式统一编写到外部的样式表中,完全使结构和表现分离,可以使样式表在不同的页面中使用
                最大限度的使样式可以进行复用
    
                将样式统一写在样式表中,然后通过link标签引入,可以利用浏览器的缓存,加快用户访问的速度,提高了用户的体验
    
            -->
            <link rel="stylesheet" type="text/css" href="style.css" />
        </head>
        <body>
            <!--
                内联样式表
                可以将CSS样式编写到元素的style属性当中,元素就是标签,标签就是元素
                将样式直接编写到style属性中,这种样式我们称为内联样式
                内联样式只对当前的元素中的内容起作用,内联样式不方便复用,不方便修改
                内联样式属于结构与表现耦合,不方便后期的维护
            -->
            <p style="color: red;font-size: 20px;">锄禾日当午</p>
            <p style="color: red;font-size: 20px;">谁知盘中餐</p>
            
        </body>
    

    css注释和基本结构

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="=utf-8" />
            <title>标题</title>
            
            <style type="text/css">
    
            /*
                css的注释(/*),作用和HTML类似,只不过他必须编写在style标签中,或者是css文件文件中
                css语法:选择器,声明块
                    选择器:通过选择器可以选中页面中指定的元素,并且将声明块中的样式应用到应用到选择器对应的元素上
                    声明块:声明块紧跟在选择器的后面,使用一对{}括起来,声明块中实际上就是一组一组的名值对结构
                        这一组一组的名值对我们称为声明
                        在一个声明块中可以写多个声明,多个声明之间使用;隔开
                        声明的样式名和样式值使用:来连接
            /*
                P{
                    color: red;
                    font-size: 50px;
                }
            </style>
        </head>
        <body>
            <!--666-->
    
        </body>
    </html>
    

    快捷键

    vscode快捷键

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!--<style type="text/css">
            h1{
                color: red;
            }
        -->
    
        <link rel="stylesheet" type="text/css" href="路径">
        
        </style>
    </head>
    <body>
            <h2>黄河</h2>
    
    </body>
    </html>
    

    块元素和内联元素

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="=utf-8" />
            <title>标题</title>
        </head>
        <body>
            <!--
                块元素和内联元素
                div就是一个块元素,所谓的块元素就是会独占一行的元素,无论他的内容有多少,他都会独占一整行
                p h1 h2...
                div这个标签没有任何语义,就是一个纯粹的块元素,并且不会为他里面的元素设置任何的默认样式(没有间距)
                div元素主要是用来对页面进行布局的(表示一个区域)
            -->
            <div style="background-color: red; 200px;">
                我是一个div
            </div>
            <div style="background-color: blue; 200px;">
                我是一个div
            </div>
    
            <p>
                我是一个p标签
            </p>
    
            <h2>
                块元素
            </h2>
    
            <!--
                span是一个内联元素(行内元素)
                    所谓的行内元素,指的是只占自身大小的元素,不会独占一整行
                    a img iframe span 都是内联元素
                span没有任何语义,span标签专门用来选中文字,然后为文字来设置样式
                块元素主要用来做页面中的布局,内联元素主要用来选中文本设置样式,
                    一般情况下只使用块元素去包含内联元素,而不会使用内联元素去包含一个块元素
                a元素可以包含任意元素,除了他本身
                
            -->
    
            <span>我是一个span</span>
            <span>我是一个span</span>
            <span>我是一个span</span>
            <span>我是一个span</span>
            <span>我是一个span</span>
            <span>我是一个span</span>
            <span>我是一个span</span>
            <span>我是一个span</span>
            <span>我是一个span</span>
            <span>我是一个span</span>
    
            <div>
                <span>
                    哈哈
                </span>
            </div>
    
            <a href="#">
                <div style="background-color: red; 800px;">
                    我是一个div
                </div>
            </a>
    
            <!--
                p元素不可以包含任何块元素,只能放内联元素
            -->
    
            <p>
                <span>
                    我是一个span
                </span>
            </p>
            <p>
                <div>
                    不能这样嵌套,F12可以查看
                </div>
            </p>
        </body>
    </html>
    

    选择器和选择器组

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>常用选择器</title>
        <style type="text/css">
            /* 为页面中所有的p元素设置一个字体颜色为红色 */
            /* Ctrl+shift+/注释或取消注释 */
            /* 
                元素选择器
                    作用:通过元素选择器可以选择页面中所有指定元素
            
             */
            p{
                color: blue;
            }
    
            h1{
                color: brown;
            }
    
            /* 
                id选择器
                    通过元素的id属性值选中唯一的一个元素
                    语法:
                        #id属性值{}
             */
    
            #p1{
                font-size: 20px;
            }
    
            /* 
                类选择器:通过元素的class属性值选中一组元素
                语法:
                    .class属性值{}
             */
    
            .p2{
                color: chartreuse;
            }
    
            .hello{
                font-size: 50px;
            }
    
            /* 
                为id为p1的元素,class为p2的元素,还有h1,同时设置一个背景颜色为黄色
                选择器分组:(并集选择器)
                    通过选择器分组可以同时选中多个选择器对应的元素
                    语法:
                        选择器1,选择器2,选择器N{}
             */
    
             #p1,.p2,.h1{
                background-color: yellow;
             }
    
        </style>
    </head>
    <body>
        <h1>悯农</h1>
        <p>锄禾日当午</p>
        <p>锄禾日当午</p>
        <p id="p1">锄禾日当午</p>
        <p>锄禾日当午</p>
        <p>锄禾日当午</p>
        <p>锄禾日当午</p>
    
        <!--
            我们可以为元素设置class属性,class属性和id属性类似,只不过class属性可以重复
            拥有相同class属性值的元素,我们说他们是一组元素
            可以同时为一个元素设置多个class属性值,多个class属性值之间使用空格隔开
        -->
    
        <p class="p2">锄禾日当午</p>
        <p class="p2">锄禾日当午</p>
        <p class="p2">锄禾日当午</p>
        <p>锄禾日当午</p>
        <p p2 class="p2 hello ab cd">锄禾日当午</p>
        <p>锄禾日当午</p>
        
    </body>
    </html>
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>统配选择器</title>
    
        <style type="text/css">
            /*            
                通配选择器:
                    他可以选中页面中的所有的元素
                    语法:*{}
            */
    
              /* *{
                color: red;
              } */
    
            /* 
              为拥有class p3 span元素设置一个背景颜色为黄色
             */
    
            .p3{
                background-color: rgb(red, green, blue);
            }
    
            /* 
                复合选择器(交集选择器)
                    作用:可以选中同时满足多个选择器的元素
                    语法:选择器1选择器2选择器N{}
             */
    
            span.p3{
                background-color: royalblue;
            }
    
            /* 
                对于id选择器来说,不建议使用复合选择器
             */
    
            /* p#p1{
                background-color: royalblue;
            } */
    
        </style>
    
    </head>
    <body>
        <h1>悯农</h1>
        <p>锄禾日当午</p>
        <p>锄禾日当午</p>
        <p>锄禾日当午</p>
        <p>锄禾日当午</p>
        <p>锄禾日当午</p>
        <span>锄禾日当午</span>
        <p>锄禾日当午</p>
        <p class="p3">锄禾日当午</p>
    
        <span class="p3">汗滴禾下土</span>
    </body>
    </html>
    

    元素之间的关系

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>thanks</title>
    </head>
    <style type="text/css">
        /* 
            为div中的span设置一个颜色绿色
            后代元素选择器
                作用:
                    选中指定元素的指定后代元素
                作用:
                    祖先元素 后代元素{}
         */
    
        #d1 span {
            color: green;
        }
    
        /* 
            选中id为di的div中的p元素中的span元素
         */
    
        #d1 p span{
            font-size: 50px;
        }
    
        /* 
            为div的子元素span设置一个背景颜色为黄色
            子元素选择器
                作用:
                    选中指定父元素的指定子元素
                语法:
                    父元素 > 子元素
         */
    
        div > span{
            background-color: yellow;
        }
    
    </style>
    <body>
    
        <!--
            元素之间的关系
                父元素:直接包含子元素的元素
                子元素:直接被父元素包含的元素
                祖先元素:直接或间接包含后代元素的元素
                后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素
                兄弟元素:拥有相同父元素的元素叫做兄弟元素
        -->
    
        <div id="d1">
            <p><span>我是p标签中的span</span></p>
            <span>我是p标签中的span</span>
        </div>
        <div>
            <span>我是p标签中的span</span>
        </div>
    
        <span>我是body中的span元素</span>
        
    </body>
    </html>
    

    伪类选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>超链接</title>
    
        <style type="text/css">
            /* 
                伪类选择器专门表示元素的一种特殊的状态
                    比如访问过的超链接,普通的超链接,比如获取焦点的文本框
                    当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类
                给链接定义样式:
                    有四个伪类可以让你根据访问者与该链接的交互方式,将链接设置成4种不同的状态。
                正常链接
                    :link
                访问过的链接
                    :visited(只能定义字体颜色)
                鼠标滑过的链接
                    :hover
                正在点击的链接
                    :active
             */
    
            /* 
                为没访问过的链接设置一个颜色为绿色
                    :link
                        表示普通的链接(没访问过的链接)
             */
    
             a:link{
                 color: green;
                 font-size: 20px;
             }
    
             /* 
                为访问过的链接设置一个颜色为红色
                :visited
                    表示一个访问过的链接
    
                浏览器是通过历史记录(缓存)来判断一个链接是否访问过
                由于涉及到用户的隐私问题,所以使用visited伪类只能设置字体的颜色(不能设置大小等)
              */
    
            a:visited{
                color: red;
            }
    
            /* 
                :hover伪类表示鼠标移入的状态
             */
    
            a:hover{
                color: blue;
            }
    
            /* 
                :active表示的是超链接被点击的状态(点着别松手)
             */
    
            a:active{
                color: black;
            }
    
            /* 使用伪类选择器给别的元素设置特殊的状态 */
    
            p:hover{
                background-color: blueviolet;
            }
    
            p:active{
                background-color: burlywood;
            }
    
            /* 
                文本框获取焦点以后,修改背景颜色为黄色
             */
    
            input:focus{
                background-color: chartreuse;
            }
    
            /* 
                为p标签中选中指定的内容使用样式(不同的浏览器表现不同)
                    可以使用 ::selection伪类
             */
    
            /* 兼容大部分浏览器 */
            p::selection{
                background-color: rgb(53, 6, 39);
            }
    
            /* 兼容火狐 */
            p::-moz-selection{
                background-color: dimgrey;
            }
    
        </style>
    
    </head>
    <body>
        
        <a href="http://www.baidu.com">我是一个访问过的超链接</a>
        <br>
        <a href="http://www.baidu111.com">我是一个没有访问过的超链接</a>
    
        <p>伪类选择器给别的元素设置特殊的状态</p>
    
        <!--使用input可以创建一个文本输入框-->
    
        <input type="text">
    
        <p>selection伪类</p>
        
    </body>
    </html>
    

    伪元素与特殊位置

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
        <style type="text/css">
            /* 
                使用伪元素来表示元素中的一些特殊的位置
             */
            /* 为p中第一个字符来设置一个特殊的样式 */
    
            p::first-letter{
                color: dodgerblue;
                font-size: 50px;
            }
    
            /* 为p中的第一行设置一个背景颜色为黄色 */
    
            p::first-line{
                background-color: gold;
            }
    
        </style>
    </head>
    <body>
        <p>
            据国家卫健委消息,5月22日0—24时,31个省(自治区、直辖市)和新疆生产建设兵团报告无新增确诊病例;无新增死亡病例;新增疑似病例2例,其中境外输入病例1例(在上海),本土病例1例(在吉林)。
        </p>
    </body>
    </html>
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            /* 
                :before表示元素最前面的部分
                一般before都需要結合content這個樣式一起使用
                通过content可以向before或after的位置添加一些内容(不能被鼠标选中)
             */
    
            p::before{
                content: "我会出现在整个段落的最前面";
                color: indigo;
            }
    
            /* 
                ::after表示元素的最后面的部分
             */
    
            p::after{
                content: "我会出现在整个段落的最后面";
                color: lawngreen;
            }
    
        </style>
    </head>
    <body>
        <p>
        据国家卫健委消息,5月22日0—24时,31个省(自治区、直辖市)和新疆生产建设兵团报告无新增确诊病例;无新增死亡病例;新增疑似病例2例,其中境外输入病例1例(在上海),本土病例1例(在吉林)。
        </p>
    </body>
    </html>
    

    title属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style type="text/css">
            /* 
                为具有title属性的p元素,设置一个字体颜色为黄色
                属性选择器
                    作用:可以根据元素中的属性或属性值来选取指定元素
                    语法:[属性名]选取含有指定属性的元素
                        [属性名="属性值"] 选取含有指定属性值的元素
                        [属性名^="属性值"]选取属性值以指定内容开头的元素
                        [属性名*="属性值"]选取属性值以包含指定内容的元素
             */
             /* p[title]{
                color: yellow;
             }
    
             p[id]{
                 color: lemonchiffon;
             } */
    
             /* 
                为title属性值是hello的元素设置一个背景颜色为黄色
              */
            
            /* p[title="hello"]{
                background-color: lightcoral;
            } */
    
            /*         
                为title属性值以ab开头的元素设置一个背景原色为黄色
             */
    
            /* p[title^="ab"]{
                background-color: yellow;
            } */
    
            /* 
                为title属性值以c结尾的元素设置一个背景颜色
             */
    
            /* p[title$="c"]{
                background-color: yellow;
            } */
    
            p[title*="c"]{
                background-color: yellow;
            }
    
        </style>
    </head>
    <body>
        <!--
            title属性,这个属性可以给任何标签指定
                当鼠标移入到元素上时,元素中的title属性的值将会作为提示文字显示
        -->
    
        <p title="我是title中的文字">我是一个段落</p>
        <p>我是一个段落</p>
        <p title="hello">我是一个段落</p>
        <p title="abbcb">我是一个段落</p>
        <p title="abkkc">我是一个段落</p>
        <p>我是一个段落</p>
        <p title="hello">我是一个段落</p>
    
    </body>
    </html>
    

    子元素选择器(伪类)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>子元素选择器</title>
        <style type="text/css">
            /* 
                为第一个p标签设置一个背景颜色为黄色
                    :first-child可以选中第一个子元素
                    :last-child可以选中最后一个子元素
             */
    
            /* p:first-child{
                background-color: yellow;
            } */
    
            /* 整个页面变成黄色 */
            /* :first-child{
                background-color: yellow;
            } */
    
            /* body > p:first-child{
                background-color: violet;
            } */
    
            /* p:last-child{
                background-color: teal;
            } */
    
            /* 
                nth-child 可以选中任意位置的子元素
                    该选择器后边可以指定一个参数,指定要选中第几个子元素
             */
    
            /* p:nth-child(3){
                background-color: tomato;
            } */
    
            /* 选择全部的偶数行 */
    
            /* p:nth-child(even){
                background-color: turquoise;
            } */
    
            /* 选择全部的奇数行 */
    
            /* p:nth-child(odd){
                background-color: turquoise;
            } */
    
            /* 
                :first-of-type
                :last-of-type
                :nth-of-type
                    和:first-child这些非常的类似
                    只不过child,是在所有的子元素中排列
                    而type,是在当前类型的子元素中排列
             */
    
            p:first-of-type{
                background-color: wheat;
            }
    
            p:last-of-type{
                background-color: wheat;
            }
    
        </style>
    </head>
    <body>
        <p>hh</p>
        <div>
            <p>hello</p>
            <span>hello</span>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <p>我是一个p标签</p>
            <span>span</span>
        </div>
        <div>
            <p>hello</p>
        </div>
        
    </body>
    </html>
    
  • 相关阅读:
    leetcode刷题笔记五十 Pow(x,n)
    leetcode刷题笔记四十九 字母异位词分组
    leetcode刷题笔记四十八 旋转图像
    20200707日报
    20200706日报
    小程序常用的几种轮播图
    小程序画布(一行或多行文字省略)
    小程序画布
    微信小程序画布(图片圆角)
    CSS3每日一练之内容处理-嵌套编号
  • 原文地址:https://www.cnblogs.com/syy1757528181/p/12904436.html
Copyright © 2011-2022 走看看