前端学习记录-CSDN博客

本文链接：https://blog.csdn.net/weixin_74385534/article/details/135886081

资料网站：https://www.w3school.com.cn/
补充：识别颜色

CSS 控制网页表现浏览器解析渲染
   css 样式控制
       1、行内样式
       2、内嵌样式
       3、外联样式
       关键字表示，rgb(r,g,b)表示，十六进制表示
   css选择器：
       1、元素选择器
       2、id选择器
       3、类选择器
   id选择器 > 类选择器 > 元素选择器

HTML 控制网页结构浏览器解析

图片路径：
px:表示像素大小 width 和 height 设置一个浏览器会等比例放大
% : 表示占用父元素的百分比

   绝对路径：
       1、绝对磁盘路径
       2、绝对网络路径
   相对路径（当前问件中的资源）：
       ./ 当前目录
       ../ 上一级目录

测试代码如下：

<html>
	<head>
		<title>HTML 快速入门</title>	
	<style>
	h2{
		color : purple;
	}
	h3 {	color: rgb(0,255,0);
	}
	span{	color:gray;
	}
	.cls{	color:blue;
	}
	#小卡{	color: blue;
	}
	</style>
	</head>
	<body>
		<h6> Hello HTML </h6>
		<img src ="C:\Users\Administrator\Desktop\58ee3d6d55fbb2fbebaa2516b9c370a84723dc43 (1).jpeg" width = 200px/> 猴子 > 学前端
	<h1 style = "color:red">焦点访谈: 网吧学前端</h1>
	<h2>米线</h2>
	<h3>绿色的键盘</h2>
	<h1 id="小卡">小卡拉米</h1>

	<hr>
		<span class = "cls">永劫无间</span>  斗罗大陆联名 
	</hr>
	</body>
				



</html>

<!-- 

Welcome to GDB Online.
GDB online is an online compiler and debugger tool for C, C++, Python, Java, PHP, Ruby, Perl,
C#, OCaml, VB, Swift, Pascal, Fortran, Haskell, Objective-C, Assembly, HTML, CSS, JS, SQLite, Prolog.
Code, Compile, Run and Debug online from anywhere in world.

-->

<html>
    
    <style>
    
    /* 盒子模型 */
    /*div{
        width: 500px;        /*设置整体的宽度和高度的
        height:500px;      
        
        box-sizing: border-box;
        background-color: white ;     /*设置背景颜色

        padding: 20px;              /*设置内边距 上  右  下 左  顺时针
        
        border: 10px solid red;    /*设置边框线条颜色 边框宽度
        
        margin: 30px;               /*设置外边距
    } 
    */
    
    /* 版心居中 */  
    #center{
        width: 65%;
        margin: 0% 17.5% 0% 17.5%;      /*设置外边距使得居中展示*/
        margin: 0 auto;                 /*浏览器自动计算  第一个数值为上下   第二个数值为左右*/
    }
    </style>
    
<body>
    
    
<h1>Hello World</h1>
<!--<div>-->
<!--    Hello World-->
<!--    </div>-->
<div id ="center" strong>
   <h2> 原神大学 Hello World!!!</h2>
</div>
</body>


</html>

表格标签



<html>
    
<body>
    <table border = "1px" cellspacing = "0" width = "600px">
        <tr>
            <th>序号</th>
            <th>品牌LOGO</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr>
            <td>1</td>
            <td> <img src="https://www-file.huawei.com/-/media/corporate/images/home/logo/huawei_logo.png" width="100px"> </td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>
        <tr>
            <td>2</td>
            <td> <img src="https://www.tencent.com/img/index/tencent_logo.png" width="100px" > </td>
            <td>腾讯</td>
            <td>腾讯有限公司</td>
        </tr>
        
    </table>
</body>
    
    
    </html>

表格表单

<html>
    
    <body>
        
        
        
        
        <!--
            action:后面添加数据库url位置
            method：
                get:在url后面拼接表单数据   file:///C:/Users/Administrator/Desktop/HTML.html?username=Tom&age=12
                post:在消息体中添加数据
            
        /-->
        
        <!--
            表单项必须要有name属性才可以提交
        /-->
        
        <form action="" method="get">  <!--/*action 指定数据提交位置  数据库    method 指定提交方式*/-->
                
            用户名:<input type="text" name="username">  <br><br>
            
            年龄:<input type="number" name="age"><br><br>
            
            性别:<label> <input type="radio" name="gender" value="1" > 男 </label>
                 <label> <input type="radio" name="gender" value="2" > 女 </label>
                 <br> <br>
            
            邮箱:<input type="email" name="email"> <br> <br>
            
            学历:<select name="degree">
                    <option value="">------请选择-------</option>
                    <option value="1">大专</option>
                    <option value="2">本科</option>
                    <option value="3">研究生</option>
                    <option value="4">博士</option>
                </select><br><br>
            
            <!--表单常见按钮  配合js进行事件监听 /-->
            <input type="button" value="按钮">
            <input type="reset" value="重置">
            <input type="submit"  value="提交">
            
            
            </form>
        </body>
    
    
</html>

JS 控制网页动作与行为

Js输出数据

<html>

<style>
    #js {
        font-size: 22px;
        color: aqua;
    }
</style>

<body>
    <p id="js">
        <script>
            // 警告页面输出
            window.alert("hello js");
            // 页面输出
            document.write("hello js");
            // 控制台输出
            console.log("hello js");
        </script>
        <br> <br>
    </p>


    <!-- 变量命名 -->
    <p>
    <h4>变量命名</h4><br>
    <script>
        // var 为弱类型命名修饰符  同时修饰的是全局变量
        // 1、可以修改
        // 2、可以重复命名  后面的可以覆盖前面的  
        // 可以为数子也可以是字符串
        var num = 1110;
        document.write(num);

       document.write("<br>");  // 在html中实现换行

        num = "张三"
        document.write(num);
    </script>
    </p>

    <!-- let const 修饰符 -->
    <p>
        <script>

        {   
            // let修饰的为块间代码有效
            // 不允许重复命名
            let message = "let修饰"
            document.write(message + "<br>");

        //    let message = "哈哈";
        //     document.write(message);
        }
           // const修饰为只读变量 不可以修改
        </script>
    </p>
</body>

</html>

js数据类型

<html>

    <body>
        <script>
            window.alert(typeof "10");  // string 类型

            window.alert(typeof 10);    // number 类型
            window.alert(typeof 1.11);

            window.alert(typeof null);  // object 类型
            
            window.alert(typeof true);  // bool 数据类型

            var a;
            window.alert(typeof a);     // undefined 数据类型，数据占位的作用

            // == 进行比较时不同的数据类型会进行转化  === 不会进行数据类型转化
            var comp1 = 10;
            var comp2 = "10";

            window.alert(comp1 == comp2);
            
            window.alert(comp1 === comp2);
        </script>
    </body>
</html>

Js数据转化

<html>
    <body>
        <script>
           // 转化为数字
           var variant_1 = "2024";

            var variant_2 = "20A24";

            var variant_3 = "A";

            window.alert(parseInt(variant_1));      // 字符串类型转化为整数 2024

            window.alert(parseInt(variant_2));      // 遇到字符转化停止 20

            window.alert(parseInt(variant_3));      // 转化为NaN Not a Number;
            
            window.alert(parseFloat("12.1A34"));     // 转化类似上面三种类型


            /*
             数字类型转化为bool 类型
             只有0 和 NaN 转化为false
             其他都转化为true
            */
            if(!0){
                window.alert("0转化为false");
            }
            if(!NaN){
                window.alert("NaN转化为false");
            }
            if(-1){
                window.alert("-1转化为true");
            }
            
            /*
                字符串转化为bool类型
                ""空字符串为false  其他都是true
            */

            if(!""){
                window.alert("空字符串为false")
            }
            if(!null)window.alert("null为false");

            if(!undefined) window.alert("undefined 为false")

            if("fansidfn") window.alert("字符串为true");
        </script>
        

        
    </body>
</html>

Js数组与函数

<html>

<body>
    <script>
        /*
        函数定义
            1、js是弱类型语言 不需要注明参数类型
            2、如果没有显示返回的数值 不需要返回
        */
        function add(a, b) {
            return a + b;
        }

        /*
            在js中数组是集合
            1、长度可变
            2、数据类型可变
            3、未赋值的对象为undefined
        */
        //==================================================================
        // var arr = new Array(19, 1, 2, 3, 4);    // 使用new语句构造数组不太好 容易产生歧义
        // var arr = new Array(10);                // 该语句是构造10元素的数组
        //==================================================================
        var arr=[1, 2, 3, 4, 5, 6];
        arr[10] = "tom";

        console.log("数组长度为" + arr.length);
        console.log(arr);
        console.log("=============================");
      
        console.log("forEach遍历数组");
        arr.forEach(function(e){
            console.log(e);
       });

       
    </script>
</body>

</html>

Js字符串

<html>
    <body>
        <script>
            // 在js中使用new方法构建的字符串是创建一个对象 不是一个简单的字符串类型
            var str = new String("hello string");
            console.log(str);
            for(i = 0;i < str.length;i++){
                document.write(str.charAt(i));
            }

            // trim方法用于去除字符串两端的空格字符串与制表符，并返回一个新的字符串
            var str = " hello js";
            alert(str);
            var newstr = str.trim();
            alert(newstr);

            // https://www.w3school.com.cn/js/js_string_methods.asp
        </script>
    </body>
</html>

JS自定义对象

<html>

<body>
    <h3>js的自定义对象</h3>
    <script>
        var user={
            name : "tom",
            age : 18,
            gender:"male",
            // eat(){
            //     window.alert("吃饭");
            // }
            // 函数定义也可以是
            eat:function(){
                window.alert("吃饭");
            }
        }
        alert(user.name);
        user.eat();
        
    </script>
</body>

</html>

JSON数据格式

<html>
<h3>json格式数据</h3>

<body>
    <script>
        var strJson = '{"name":"tom","age":20,"gender":"male","adre":["北京","上海","深圳"]}';

        // json数据格式转化为js自定义对象
        var jsObj = JSON.parse(strJson);
        // 控制台输出转化后的数据
        console.log(jsObj);


        // js对象转化为json数据格式
        var JsonObj = JSON.stringify(jsObj);
        console.log(JsonObj);



    </script>
</body>

</html>

BOM对象学习

window对象

<html>
    <body>
        <h2>BOM对象学习</h2>
        <script>
        
            // window桌面对象
            
             window.alert("hello window");
            
            // confirm对象 会自动返回一个bool变量的值
            
             var flag = window.confirm("你确实删除该条记录？");
             window.alert(flag);
             
            //  定时器对象  --- 周期性执行函数function()
            var i = 0;
            setInterval(function(){
                i++;
                console.log("该语句执行了"+i +"次！")
            },2000);
            
            // setTimeout  延迟时间执行函数
            setTimeout(function(){
                console.log("延迟函数执行");
            },3000)
            
        </script>
    </body>
    
</html>

location网络对象

<html>
    <body>
        <h2>BOM对象学习</h2>
        <script>
        
           // location对象
           alert(window.location.href); // 打印当前页面的网址
           
           window.location.href = "https://www.bilibili.com";       // 转到该网址页面
            
        </script>
    </body>
    
</html>

DOM对象学习

元素名称获取

<html>

<head>
    <style>
        h1 {
            text-align: center;
            font-size: 22px;
            color: black;
        }

        .cls {
            /* text-align: center; */
            font-size: 22px;
            color: aqua;
        }
    </style>
</head>

<body>
    <h1>dom标签获取</h1>

    <img id="photo"
        src="https://s1.4sai.com/pvimg/img/png/c0/c09e877f3dd54d9bb3d6d9808410f82f.png?imageMogr2/auto-orient/thumbnail/!239x320r/gravity/Center/crop/239x320/quality/85/%7CimageView2/2/w/239&e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:9tZ_Uv5AVVlVquB6LNYGjMELKws=" />

    <div class="cls"><strong>驰野广告</strong></div><br><br>
    <div class="cls"><b>腾讯 华为 阿里</b></div><br><br>

    <!-- 设置多选数组 -->

    <input type="checkbox" name="hobby">打篮球
    <input type="checkbox" name="hobby">踢足球
    <input type="checkbox" name="hobby">玩游戏


</body>

<!-- 
    根据标签获取各个元素类型
 -->
<script>
    // 根据元素id名获取元素标签
    var tag = document.getElementById('photo');
    alert(tag);

    // 根据元素标签名获取元素
    var divs = document.getElementsByTagName('div');
    for(i = 0;i < divs.length;i++){
        alert(divs[i]);
    }
    // 根据元素类名class属性获取
    var cls=document.getElementsByClassName('cls');
    alert(cls);

    // 根据name属性获取
    var ins =document.getElementsByName('hobby');
    for(i = 0;i < ins.length;i++){
        alert(ins[i]);
    }
</script>

</html>