2021/9/6_前端缺打卡样式-CSDN博客

本文链接：https://blog.csdn.net/m0_55786512/article/details/120145504

这篇博客介绍了HTML的基本标签选择器，如何通过外部文件引用CSS，以及ID和Class选择器的使用。此外，还讲解了JavaScript的基础，包括内部和外部脚本的使用，以及变量的声明和类型。通过实例展示了如何改变元素的样式和使用警告框函数。

摘要由CSDN通过智能技术生成

#8：30-9：00 签到打卡

#9：30-12：00 观看javaweb视频

#14：00-18：00 写qq项目

1.标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css1</title>
    <style type="text/css">
        div{/*将所有div标签属性更改*/
            border:1px solid blue;/*设置边框为1像素，细线，蓝色*/
        }
        span{
            border:2px solid red;/*设置边框为2像素，细线，红色*/
        }
    </style>
</head>
<body>
 <div>div1</div>
 <div>div2</div>
 <span>span1</span>
 <span>span1</span>
 <p>p1</p>
 <p>p1</p>
</body>
</html>

2.外部引用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>从外部调用选择器</title>
    <link rel="stylesheet" type="text/css" href="1.css"/> <!--从外部调用css样式-->

</head>
<body>
 <div>div1</div>
 <div>div2</div>
 <span>span1</span>
 <span>span1</span>
 <p>p1</p>
 <p>p1</p>
</body>
</html>

3.id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style type="text/css">
        #id01{
            border: 2px solid red;
            font-size: 30px; /*字号为30*/
            color: beige;/*字体颜色*/
        }
        #id02{
            border: 1px solid blue;
            font-size: 30px;
            color: beige;
        }
    </style>
</head>
<body>
<div id="id01">div1</div><!--用id属性调用id选择器-->
<div id="id02">div2</div>
<span id="id01">span1</span>
<span id="id02">span1</span>
<p>p1</p>
<p>p1</p>
</body>
</html>

4.class选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class选择器</title>
    <style type="text/css">
        .class01{
            border: 2px solid red;
            font-size: 30px;
            color: beige;
        }
        .class02{
            border: 1px solid blue;
            font-size: 30px;
            color: beige;
        }
        #001,.class03{/*组合选择器，两种方法调用的可以*/
            border: 1px solid blue;
            font-size: 30px;
            color: beige;
        }
    </style>
</head>
<body>
<div class="class01">div1</div><!--用class属性调用class选择器，使用方法基本和id选择器相同，但是可以复用-->
<div class="class02">div2</div>
<span class="class01">span1</span>
<span class="class02">span1</span>
</body>
</html>

5.script使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>script</title>
    <script type="text/javascript">/*javascript执行*/
        alert("你好");/*警告框函数，警告参数里的字符串*/
    </script>
    <script type="text/javascript" src="1.js"></script><!--从外部调用-->
    <script type="text/javascript" src="1.js">alert("你好");</script><!--错误方式将不会执行双行里面的语句-->
</head>
<body>

</body>
</html>

6.js变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js变量</title>
    <script type="text/javascript">
        /*
        有5种类型
        1.数值型 namber
        2.字符串类型 String
        3.对象类型 object
        4.布尔类型 boolean
        5.函数类型 function
        特殊的值
        undefind 未定义值，没定义时都为它
        null 空值
        NaN 非数值的namber
        */
        var a1=1;
        alert(typeof(a1));/*namber类型,数值型*/
        var a2="abc";
        alert(typeof(a2));/*String ,字符串类型，"和'都可以*/
        var a3=true;
        alert(typeof(a3));/*boolean ,布尔类型*/
        var a4=a1*a2;
        alert(a4);/*值为NaN，naber类型*/
    </script>
</head>
<body>

</body>
</html>