html选择器相关案例

最新推荐文章于 2022-06-22 20:31:35 发布
L_summer1989
最新推荐文章于 2022-06-22 20:31:35 发布
阅读量287
点赞数
本文链接：https://blog.csdn.net/L_summer1989/article/details/117856813
版权
<!--    01-标签选择器 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        p {
            color: red;
        }
    </style>

</head>
<body>
    <!-- 标签选择器，就是以标签名开头，根据标签名来选择html文件中的标签，给标签添加样式 -->
    <p>hello world</p>
    <p>你好</p>
</body>
</html>

<!--    02-类选择器 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        /* 类选择器，以点开头，根据类名选择标签，给标签添加样式 */
        .myp{
            color: red;
        }

        .mybg {
            background: blue;
        }
    </style>
</head>
<body>
    <p>xxxx</p>
    <p class="myp">哈哈，我是一个段落标签</p>
    <!-- 这里标签使用了两个类选择器 -->
    <p class="myp mybg">哈哈，我是一个段落标签</p>
</body>
</html>

<!--    03-层级选择器 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        /* 层级选择器要有层级关系，根据层级关系获取子标签，给子标签添加样式 */
        div div{
            color: green;
        }

        div .box2{
            color: blue;
        }

        /* div div p{
            color: red;
        } */

        div p{
            color: aqua;
        }
    </style>
</head>
<body>
    <div>
        <div>哈哈</div>

        <div class="box2">嘻嘻</div>
        <div>
            <p>hello</p>
        </div>
    </div>
    <div>哈哈</div>
    <!-- 层级选择器不一定必须是父子关系，祖孙关系的子标签也可以找到，完成添加样式的操作 -->
</body>
</html>


<!--    04-id选择器 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        /* id选择器，以#开头，根据id名选择html中的标签，给标签添加样式 */
        #myid1{
            color: blue;
        }
    </style>

</head>
<body>
    <p id="myid1">哈哈</p>
    <!-- 错误的示例，因为在html文件中标签的id是唯一，不能重复，后续js会根据id获取对应的标签对象 -->
    <p id="myid1">嘻嘻</p>
</body>
</html>

<!--    05-组选择器 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        /* 组选择器就是多个选择器的组合，把功能的代码可以放到组选择器里面 */
        /* 这里表达的意思是定义了三个类选择器，他们都有同样的样式规则 */
        .box1, .box2, .box3 {
            width: 100px;
            height: 100px;
        }
        /* 提示： 在css里面出现同样的选择器，后面的不会覆盖前面的，
        后面的选择器会在前面选择器的基础上进行追加样式 */
        .box1{
            background: red;
        }
        .box2{
            background: gray;
        }
        .box3{
            background: blue;
        }
    </style>

</head>
<body>
    <!-- div.box1*3: 创建三个div并且指定class属性的名字是box1 -->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

<!--    06-伪类选择器 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        div{
            width: 100px;
            height: 100px;
            background: green;
        }
        /* 伪类选择器就是给其它选择器添加特殊的效果，表现形式选择器后面加上冒号再跟上伪类的名字 */
        div:hover {
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>

</head>
<body>
    <div>哈哈</div>
</body>
</html>

<!--    07-常用的布局样式属性 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .box {
            width: 100px;
            height: 100px;
            background: green;
            /* 设置背景图片，不重复显示图片，拉伸当前显示这个图片 */
            /* background: url("imgs/logo.png") no-repeat; */
            /* background: url(imgs/logo1.png) no-repeat; */
            /* 设置标签的四周边框 */
            /* border: 5px solid red; */
            border-top:  5px solid red;
            border-left:  5px solid red;
            border-bottom: 5px solid red;
            border-right: 5px solid blue;
            /* 设置浮动，只能设置左浮动和有浮动 */
            /* float: right; */
        }

        .box1{
            width: 200px;
            height: 200px;
            background: blue;
        }

        .box2{
            width: 50px;
            height: 50px;
            background: green;
            float: left;
        }

        .box3{
            width: 50px;
            height: 50px;
            background: red;
            /* 以后设置div在一行显示可以设置浮动 */
            float: left;
        }

    </style>

</head>
<body>
    <!-- 布局常用控件是div -->
    <div class="box">哈哈</div>
    <br>
    <!-- div>div*2 创建一个父div在父div里面创建两个子div -->
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

</body>
</html>

<!--    08-常用的文本样式属性 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        p{
            /* 设置文字颜色 */
            color: red;
            /* 设置文字大小 */
            font-size: 30px;
            /* 设置文字加粗 */
            font-weight: bold;
            /* 设置文字的字体 */
            font-family: "Microsoft Yahei";
            background: blue;
            /* text-decoration: underline; */
            /* text-decoration: line-through; */
            /* 设置下划线 */
            text-decoration: overline;
            /* 设置行高，可以让文字垂直方向居中 */
            line-height: 100px;
            /* 设置水平方向的对象方式 */
            text-align: left;
            /* 文本缩进 */
            text-indent: 30px;

        }

        span {
            color: green;
        }

        a {
            /* 取消下划线 */
            text-decoration: none;
        }
    </style>

</head>
<body>
    <!-- span标签可以给文本中的一小段内容设置样式 -->
    <p>听说下雨天音乐和<span>辣条</span>更配哟~</p>
    <a href="http://www.baidu.com">百度</a>
</body>
</html>


<!--    09-元素溢出 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .box1{
            width: 100px;
            height: 100px;
            background: red;
            /* 设置元素溢出需要在父标签选择器上进行设置 */
            /* 超出部分隐藏 */
            /* overflow: hidden; */
            /* 默认超出部分显示 */
            /* overflow: visible; */
            /* 超出部分滚动显示 */
            overflow: auto;
        }

        .box2{
            width: 200px;
            height: 50px;
            background: green;
        }
    </style>

</head>
<body>
    <div class="box1">
        <div class="box2">xxxf</div>
    </div>
</body>
</html>


<!--    10-css显示特性 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background: red;
            /* 把该标签隐藏并且不占用位置 */
            display: none;
            /* 提示：标签再次显示可以设置成block，删除display这个样式属性 */
        }

        .box2 {
            /* width: 100px;
            height: 100px; */
            background: red;
            /* 设置div可以和其它元素在一行显示，以后就不能设置宽高 */
            /* 以后既设置div的宽高有设置在一行显示，可以通过浮动来完成 */
            display: inline;
        }

        a{
            /* 设置标签自己单独占用一行，不和其它标签在一行显示 */
            display: block;
        }
    </style>
</head>
<body>
    <div class="box1">
        哈哈
    </div>
    <p>嘻嘻</p>
    <div class="box2">
        哈哈
    </div>
    <a href="https://www.baidu.com">百度</a>
    <a href="https://www.baidu.com">百度</a>
</body>
</html>

<!--    11-盒子模型 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .box1{
            width: 200px;
            height: 200px;
            background: green;
            border: 5px solid blue;
            /* padding-top: 10px;
            padding-left: 10px; */
            padding: 10px;
        }

        .box2{
            width: 100px;
            height: 150px;
            background: red;
        }

        .box3{
            width: 50px;
            height: 50px;
            background: gray;
            margin-top: 10px;
        }

        .box4{
            width: 50px;
            height: 50px;
            background: brown;
            border: 10px solid rebeccapurple;
            padding-top: 10px;
        }
    </style>

</head>
<body>
    <!-- 盒子模型主要是设置4部分内容：
        1. 内容大小(width,height)
        2. 边框大小(border)
        3. 内边距大小(padding)
        4. 外边距大小(margin) -->


    <div class="box1">
        <div class="box2"></div>
    </div>

    <div class="box3"></div>

    <div class="box4"></div>



</body>
</html>

<!--    12-JavaScript的使用 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 内嵌式 -->
    <script>
        alert("我是内嵌式的js代码");
    </script>
    <!-- 外链式 -->
    <script src="js/main.js"></script>
    <script>
        fnShow();
    </script>
</head>
<body>
    <!-- 行内式 -->
    <input type="button" value="按钮" οnclick="alert('你点我了!')">
</body>
</html>

<!--   13-变量的定义和数据类型 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script>
        // 定义数字类型的变量
        var iNum1 = 1;
        var fNum1 = 2.5;
        // 定义字符串
        var sName = "李四";
        // 定义boolean类型
        var bIsOk = true;
        // 定义undefind类型
        var unData;
        // 定义空对象
        var oData = null;
        // 定义JavaScript对象类型
        var oPerson = {
            name: "王五",
            age: 20
        }
        // 单行注释: windows: ctr + / mac: cmd + /
        // alert(iNum1);
        // alert(fNum1);
        // alert(sName);
        // 查看数据类型使用typeof
        // alert(typeof(iNum1));
        // alert(typeof(fNum1));
        // alert(typeof(sName));
        // alert(typeof(bIsOk));
        // alert(typeof(unData));
        // // 由于js历史原因，设计之前没有null类型，null值归属于object类型，后续js语言迭代后也没进行修改
        // // 对于大家类型null值属于null类型
        // alert(typeof(oData));
        // alert(typeof(oPerson));
        alert(oPerson.name);
        console.log(oPerson.name);

        // 多行注释
        /*
            多行注释内容
        */
        //    同时定义多个变量
        var iNum2 = 3, sStr = '李四';
        console.log(iNum2);
        console.log(sStr);


    </script>
</head>
<body>

</body>
</html>


<!--    14-函数的定义和调用 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 定义函数的关键字是function
        function fnShow(){
            alert('我是一个无参数无返回值的函数');
        };
        //  调用函数执行函数里面的代码
        fnShow()

        // 定义的是一个有参数有返回值的函数
        function fnSum(iNum1, iNum2){
            var iResult = iNum1 + iNum2;
            return iResult
            alert('测试代码');
        }

        var iNum = fnSum(1, 2);
        alert(iNum);

        // return关键的特点: 1. 可以为函数提供返回值
        // 2. 当执行return语句以后函数执行结束，后面的代码不会再执行

    </script>
</head>
<body>

</body>
</html>

<!--    15-局部变量和全局变量的使用 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 局部变量: 在函数内定义的变量叫做局部变量，只能在函数内部使用
        function fnShow(){
            //  局部变量
            var iNum = 1;
            alert(iNum)
        }
        // 调用函数
        // fnShow()
        //  局部变量不能再函数外使用
        // alert(iNum);

        // 全局变量: 在函数外定义的变量叫做全局变量，可以在不同函数内使用，并且不同函数内可以共享全局变量
        var iNum1 = 1;

        function fnModify(){
            alert(iNum1);
            iNum1 = 3;
            // ++ 等价于 += 1
            iNum1++;
            iNum1 += 1;
            alert(iNum1);
        }

        fnModify()
        // js可以数字类型和字符串直接进行相加，把数字自动转成字符串
        alert("函数外访问的全局变量:" + iNum1);






    </script>
</head>
<body>

</body>
</html>

<!--    16-条件语句判断-比较运算符-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var iNum = 5;
        var iStr = "5";
        //  在js里面如果数字和字符串进行比较(==、>、<、>=、<=、!=)，会自动把字符串转成数字类型然后再进行比较
        if(iNum == iStr) {
            alert("条件成立");
        }

        if(iNum < iStr) {
            alert("条件成立");
        }else{
            alert("条件不成立");
        }

        var iScore = 90;

        if (iScore < 60) {
            alert("不及格")
        } else if (iScore <= 70) {
            alert("刚及格")
        } else if (iScore <= 80) {
            alert("一般般")
        } else {
            alert("优秀")
        }

    </script>
</head>
<body>

</body>
</html>


<!--    17-条件判断-逻辑运算符的使用-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var iNum1 = 1;
        var iNum2 = "1";

        // 比较值和类型
        if(iNum1 === iNum2) {
            alert('条件成功');
        } else {
            alert('条件失败');
        }



        // && 左右两边的条件都成立 结果才是true， if语句才会执行
        // if(iNum1 >= 0 && iNum2 < 2) {
        //     alert("条件成立");
        // } else {
        //     alert("条件不成立");
        // }

        // || 左右两边的条件有一个成立 结果就是true， if语句就会执行
        // if(iNum1 >= 0 || iNum2 < 2) {
        //     alert("条件成立");
        // } else {
        //     alert("条件不成立");
        // }
        //  ! 表示对结果进行取反， true取反成false  false取反变成true
        if(!(iNum1 > iNum2)){
            alert("条件成立");
        } else {
            alert("条件不成立");
        }



    </script>
</head>
<body>

</body>
</html>


<!--    18-扩展-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 扩展:
        // js 支持非零即真
        // if(0){
        //     alert('条件成立');
        // }else {
        //     alert("条件不成立")
        // }
        //
        // 空的数组是成立的，空的字符串是不成立， 字符串有数据是成立
        // null , undefined 不成立
        var p = {
            name: "李四"
        }
        var unData;
        alert(unData);
        if(unData){
            alert('条件成立');
        }else {
            alert("条件不成立")
        }
    </script>
</head>
<body>

</body>
</html>
L_summer1989
关注
0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html选择器相关案例

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <tit.
复制链接

扫一扫