XX学Python·前端

HTML:网页结构布局

HTML(HyperText Mark-up Language)超文本标记语言。

HTML控制页面整体布局
书写形式用标签形式, <标签名称> </标签名称>, 比如: <html></html>
基本结构：

 <!DOCTYPE html>
<html>
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

VS Code(Visual Studio Code)是由微软研发的一款免费开源跨平台代码编辑器，目前是前端(网页)开发使用最多的一款软件开发工具。
VScode 使用: 快捷导入模版英文！+ tab 注释ctrl+/
先保存再运行前端文件

1、直接进入文件所在位置打开

2、使用open in 插件
常用html标签

 <!-- 1、成对出现的标签：-->
<h1>h1标题</h1>
<div>这是一个div块标签</div>
<p>这个一个段落标签</p>
 
<!-- 2、单个出现的标签： -->
<br>换行标签
<hr> 分割线标签
<img src="images/pic.jpg" alt="图片">
<video src="路径"></video>
 
<!-- 3、带属性的标签，如src、alt 和 href等都是属性 -->
<img src="./images/pic.jpg" alt="图片">  建议相对路径
<a href="http://www.baidu.com">百度网</a>
 
<!-- 4、标签的嵌套 -->
<div>
    <img src="images/pic.jpg" alt="图片">
    <a href="http://www.baidu.com">百度网</a>
</div>
 
<!-- 5、ol标签定义有序号列表 -->
<ol>
    <!-- li标签定义列表项目 -->
    <li><a href="#">列表标题一</a></li>
    <li><a href="#">列表标题二</a></li>
    <li><a href="#">列表标题三</a></li>
</ol>
 
<!-- 6、ul标签定义无序号列表 -->
<ul>
    <!-- li标签定义列表项目 -->
    <li>列表标题一</li>
    <li>列表标题二</li>
    <li>列表标题三</li>
</ul>

css:网页样式

css (Cascading Style Sheet)层叠样式表，用来美化页面的一种语言。
css 的语法格式: 选择器
css的三种引入方式:行内式、内嵌式、外链式
css 选择器:用来选择标签设置样式的
- 常用css选择器:标签选择器、类选择器、id选择器、层级选择器(后代选择器)

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css use</title>
    <!-- 2、内嵌式 在head标签内创建style编写样式 -->
    <style>
        /* (1)、使用标签选择器，直接使用标签名进行选择 */
        p{
            color:blueviolet
        }
        /* (2)、使用类选择器，使用.class属性定义名称进行选择 */
        .box1{
            color: blueviolet
        }
        .box2{color: blue;}
        /* (3)、使用id选择器，使用#id属性定义名称进行选择 */
        #bd_link{color:blue;}
        #tb_link{color:pink}
        /* (4)、使用层级选择器,注意明确每层 */
        .boxppp p{color: black}
    </style>
    <!-- 3、使用link标签引入外链css文件 -->
    <link rel="stylesheet" href="./wailian.css">
</head>
 
<body>
    <!-- 1、行内式 在标签内使用style指定样式-->
    <h1 style="color:brown">1级标题</h1>
    <!-- 2、给p标签使用内嵌式 -->
    <p>文本段落</p>
    <!-- 3、给span标签使用外链式 -->
    <span>文本行标签</span>
 
    <!-- 选择器的使用 -->
    <!-- (1)、标签选择器 直接使用标签进行选择 -->
    <!-- (2)、类选择器 -->
    <div class="box1">
        块标签111
    </div>
    <div class="box2">
        块标签222
    </div>
    <div class="box3">快标签333</div>
    <!-- (3)、id选择器 -->
    <a href="http://www.baidu.com" id="bd_link">百度连接</a>
    <a href="http://www.taobao.com" id="tb_link">淘宝连接</a>
    <!-- (4)、层级选择器 -->
    <div class="boxppp">
        <p>div内部的段落标签</p>
    </div>
</body>
</html>

新建css文件wailian.css

 /* css样式文件后缀为css */
/* 可在该文件编写css样式代码，在html文件head中用link标签进行引入 */
/* 使用选择器选择标签进行控制 */
/* 使用多个样式时需要用;号(英文)隔开 */
span{
    color:aqua;
    font-size:100px
}
.box3{color:brown}

css常用属性
- 布局常用样式属性
  - width 设置元素(标签)的宽度，如：width:100px
  - height 设置元素(标签)的高度，如：height:200px
  - background 设置元素背景色或背景图片，如：background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片
  - border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
- 文本常用样式属性
  - color 设置文字颜色，如： color:red
  - font-size 设置文字的大小，如：font-size:12px;
  - font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
  - line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
  - text-decoration 设置文字下划线，如：text-decoration:none; 去掉文字下划线
  - text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
  - text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

JavaScript:数据操作

JavaScript(Js)是运行在浏览器端的脚本语言，负责网页和用户的交互效果。
JavaScript三种使用方式:行内式、内嵌式、外链式
定义变量 var 变量名 = 值
JavaScript的注释分为单行注释(//注释内容)和多行注释(/多行注释/)
数据类型：
- 5种基本数据类型：
  1、number 数字类型
  2、string 字符串类型
  3、boolean 布尔类型 true 或 false
  4、undefined undefined类型，变量声明未初始化，它的值就是undefined
  5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null
- 1种复合类型： object 后面学习的JavaScript对象属于复合类型
函数定义和调用
- 用关键字 function 定义函数
- 函数调用就是函数名加小括号
变量作用域
- 局部变量只能在函数内部使用
- 全局变量可以在不同函数内使用
if条件语句
- 比较运算符，值等于，=全等(值和类型)，其他同python
- 逻辑运算符，&&与，||或，！非
数组，相当于python中列表，数组的定义使用一对中括号
- 获取数组的长度使用length属性
- 从数组最后添加元素使用push方法
- 从数组最后删除元素使用pop方法
- 根据下标添加和删除元素使用splice方法
循环语句：for循环，while循环
字符串拼接：使用+

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS使用</title>
    <!-- 2、内嵌式js -->
    <script>
        alert('内嵌式引入js')
 
        // 变量使用,undefined表示该变量未定义,null表示为空,数据对象key:value
        var a = 10
        var b = 'python'
        var c =true
        var d = undefined, e = null
        var f = {name:'xx', age:18}
        var g = 20
        // typeof判断类型后弹窗显示类型
        // alert(typeof a)
        // alert(typeof b)
        // alert(typeof c)
        // alert(typeof d)
        // alert(typeof e)
        // alert(typeof f)
 
        // alert(a+g)
        // alert(f.name)
 
        // 函数定义,用function关键词.全局变量可直接在函数内使用
        function add_num(num1,num2){
            alert(b)
            var data = num1 + num2
            return data
        }
        // 函数执行,函数内局部变量在函数外不能直接使用,在外部定义变量接收return返回值
        // var res_data = add_num(1,5)
        // alert(res_data)
 
        // if条件判断,==只要值相等,类型会进行隐式转换
        function myfunc2(data){if (data==1) {
            alert('条件成立')
        } else {
            alert('条件不成立')
        }}
        // === 数值和类型必须都一样
        function myfunc3(data){
            if (data===1) {
            alert('data值为1')
        } else if (data===2) {
            alert('data值为2')
        }else{
            alert('其他数据')
        }}
        // myfunc3('1')
 
        // 数组,相当于python的list
        function myarrfunc(){var arrdata=[1,2,3,'a','b','c']
        // alert(arrdata.length)  长度
        // alert(arrdata[3])  通过下标获得数据
        // arrdata.push('xx')  写入数据，在最后哦写入数据
        // alert(arrdata)
        // alert(arrdata.pop())  弹出数据，从最后一位取值从数据中删除
        // alert(arrdata)
        // arrdata.splice(3,2)  删除数据，从下标3开始删除2个，则删除a和b
        // arrdata.splice(3,2,'xx','lsl') 删除后并替换，则把a和b替换成xx和lsl
        // arrdata.splice(3,0,'xx','lsl') 删除0个,相当于插入数据,则a前插入xx和lsl
        alert(arrdata)
        }
        // myarrfunc()
 
        // for循环,指定循环开始起始位置、循环条件、起始数据累加,++表示每次循环加1
        function myfor(){
            var arr1=[1,2,'xx','lsl']
            // for(var i=0;i<arr1.length;i++){alert(arr1[i])}
            // while循环
            i=0
            while(i<arr1.length){alert(arr1[i]);i++}
        }
        // myfor()
 
        // 字符串拼接,用+号拼接
        var h = 'Hi,'
        alert(h+b)
 
    </script>
 
    <!-- 3、外链引入js文件，src指定引入文件路径 -->
    <script src="./wanlian.js"></script>
</head>
<body>
    <!-- 1、行内式js -->
    <!-- type指定按钮类型，value指定按钮名字，onclick点击事件，alert()点击后触发弹窗提示 -->
    <input type="button" value="按钮1" onclick="alert('按我一下完成')">
</body>
</html>

jQuery

jQuery是对JavaScript的封装，免费开源的JavaScript函数库，jQuery 极大地简化了 JavaScript 编程。
jQuery的用法
- 引入jQuery
- 入口函数两种写法，获取标签元素需要在入口函数里完成
- 选择要操作标签数据
  - 标签 $('标签名')
  - 类选择 $('.类名')
  - id $('#id名')
  - 层级选择
- 方法的使用：$('标签').方法
  - css() 修改标签样式
  - html() 添加数据覆盖标签内的原有数据
  - append() 在标签的原有数据的基础上增加数据
  - prop() 标签属性数据获取修改添加 <a href='http://www.baidu.com'></a>
  - click() 点击事件方法
  - blur() 失去焦点方法
  - val() 获取数据框数据方法
json数据类型是对js数据对象转为字符串,在{}外加单引号,里面键值对全用双引号

 <!-- 引入jQuery：本地、线上 -->
<script src="js/jquery-1.12.4.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>jx

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jquery使用</title>
 
    <!-- 引入jquery方法（线上引入需要连网） -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
 
    <!-- 使用Jquery的方法 -->
    <script>
        window.onload = function(){
            // 编写jq代码,将p标签数据写入div标签,先选中div,再通过html方法写入数据
            // $('div').html('<p>这是一个段落</p>')
            var str1 = '第一个div'
            $('.box1').html('<p>'+str1+'</p>') //写成变量的形式
        }
 
        // 简写调用jquery方法 $(function(){})
        $(function(){
            // 写jq方法，css方法可对选中标签进行样式控制
            $('p').css({color:'red'})
 
            // jQuery类选择器
            $('.box2').html('<h2>第二个div</h2>')
            // id选择器
            $('#box3').html('<h3>第三个div</h3>')
            // 层级选择器
            $('div span').html('<span>内嵌文本行标签</span>')
            // 过滤选择
            // $('div')会选择所有div标签,has方法进行过滤选择包含p标签的
            $('div').has('p').html('通过has方法选中div标签')
            // $('div')选择所有div标签放入列表里,eq中数字是下标
            $('div').eq(1).html('通过eq方法选中div标签')
 
            // 数据写入,html方法会覆盖原有数据,append方法在原有数据后追加
            // $('#box6').html('新写入的div数据')
            $('#box6').append('新写入的div数据')
 
            // 标签属性值操作,用prop(属性)方法获取属性值
            var baidu_href_data=$('#baidu').prop('href')
            // alert(baidu_href_data)
            // 添加或修改属性值,通过键值对形式,原本有值则修改无则添加
            $('#unknown').prop({href:'https://www.jd.com'})
 
            // 用户事件处理
            // 定义一个处理事件的方法
            function myfunc(){alert('点击事件被触发')}
            function myfunc2(){
                // alert('失去焦点事件被触发')
                // val方法获取input标签输入框中的数据
                var text_data=$('.inp2').val()
                alert(text_data)}
            // 选择要触发事件标签,input标签被点击时执行myfunc方法
            $('.inp1').click(myfunc)  // click()鼠标单击事件
            // 失去焦点事件
            $('.inp2').blur(myfunc2)  // blur()失去焦点事件
 
            // js数据对象，类似于字典(key有没有引号都行)，数据对象里面可定义函数
            var a = {name:'xx',age:18,myfunc3:function(){alert('myfunc3被执行')}}
            // a.myfunc3()
            // key存在就修改，不存在就添加
            a.name='lsl'
            a.gender='boy'
            // alert(a.name)
            // alert(a.gender)
 
            // json数据类型是对js数据对象转为字符串,在{}外加单引号,里面键值对全用双引号
            // 可将python字典转为json字符串给前端用,外{}不加单引号即python字典或js数据对象了
            var bob = '{"name":"B","age":18,"hobby":["reading","travel"],"school":{"name":"BK College","location":"CN"}}'
            var bob_boj=JSON.parse(bob)
            alert(bob_boj.hobby)
            alert(bob_boj.school.name)
 
        })
    </script>
</head>
<body>
    <div class="box1"></div>
    <p>段落标签</p>
 
     <!-- jQuery选择器 -->
    <div class="box2"></div>
    <div id="box3"></div>
    <div>
        <span>文本行标签</span>
    </div>
    <div>
        <p>段落标签</p>
    </div>
 
    <!-- 数据写入 -->
    <div id="box6">
        原始div数据
    </div>
 
    <!-- 标签属性值操作 -->
    <a id="baidu" href="https://www.baidu.com">百度连接</a>
    <a href="" id="unknown">新写入确定</a>
 
    <!-- 事件处理 -->
    <!-- 按钮触发点击事件 -->
    <input type="button" value="按钮1" class="inp1">
    <!-- 输入框触发失去焦点事件 -->
    <input type="text" class="inp2">
 
</body>
</html>

Ajax

ajax 是发送http请求获取后台服务器数据的方法
jquery将它封装成了一个方法$.ajax()，可直接用这个方法来执行ajax请求
ajax的简写方式可以使用$.get和$.post方法来完成
简格式:$.get(网址,function(){ 处理成功的结果} ).error(function(){处理请求失败的业务})

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax请求三方服务获取数据</title>
 
    <!-- 引入jquery方法（线上引入需要连网） -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <script>
        // 使用jquery方法
        $(function(){
            // 发送get请求，第一个参数是请求网址，第二个是处理请求成功的方法
            $.get('http://api-toutiao-web.itheima.net/app/v1_1/articles?timestamp=1556789000002&channel_id=0&with_top=1',function(response,status){
                // response是返回数据内容,status是返回状态码。输出终端打印,在浏览器console中显示
                console.log('输出终端')
                console.log(response)
                console.log(status)
                // js数据对象response = {...,data:{...,results:[{title:...,aut_id:...,...},{...}...,{...}]}}
                console.log('从返回结果中取值')
                console.log(response.data.results)
                var data_arr = response.data.results  // 得到一个包含数据对象的数组
                // 遍历数组数据得到每一个数据对象
                for(var index=0;index<data_arr.length;index++){
                    data_arr[index]
                    // 取出数据对象的title值赋给一个变量
                    var title = data_arr[index].title
                    var aut_name = data_arr[index].aut_name
                    // 将取出的title值写入页面
                    $('ul').append('<li>'+title+'--'+aut_name+'</li>')
                }
            }).error(function(data){
                // 若请求失败执行error方法中业务
                console.log(data)
            })
        })
    </script>
</head>
<body>
    <!-- 无序号列表展示  -->
    <ul>
 
    </ul>
</body>
</html>

posted @ 2022-10-04 23:05 PORTB 阅读(28) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· XX学Python·概述

· XX学Python·网络

· 前端 ( HTML + JS + CSS )

· 前端基本知识

· HTML、CSS与JavaScript 简介

阅读排行：
· winform 绘制太阳，地球，月球运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）
· AI 智能体引爆开源社区「GitHub 热点速览」

XX学Python·前端

css:网页样式

JavaScript:数据操作

jQuery

Ajax

公告

随笔分类 (61)

阅读排行榜

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>网页标题</title>
	</head>
	<body>
	网页显示内容
	</body>
	</html>

	<!-- 1、成对出现的标签：-->
	<h1>h1标题</h1>
	<div>这是一个div块标签</div>
	<p>这个一个段落标签</p>

	<!-- 2、单个出现的标签： -->
	<br>换行标签
	<hr> 分割线标签
	<img src="images/pic.jpg" alt="图片">
	<video src="路径"></video>

	<!-- 3、带属性的标签，如src、alt 和 href等都是属性 -->
	<img src="./images/pic.jpg" alt="图片"> 建议相对路径
	<a href="http://www.baidu.com">百度网</a>

	<!-- 4、标签的嵌套 -->
	<div>
	<img src="images/pic.jpg" alt="图片">
	<a href="http://www.baidu.com">百度网</a>
	</div>

	<!-- 5、ol标签定义有序号列表 -->
	<ol>
	<!-- li标签定义列表项目 -->
	<li><a href="#">列表标题一</a></li>
	<li><a href="#">列表标题二</a></li>
	<li><a href="#">列表标题三</a></li>
	</ol>

	<!-- 6、ul标签定义无序号列表 -->
	<ul>
	<!-- li标签定义列表项目 -->
	<li>列表标题一</li>
	<li>列表标题二</li>
	<li>列表标题三</li>
	</ul>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>css use</title>
	<!-- 2、内嵌式在head标签内创建style编写样式 -->
	<style>
	/* (1)、使用标签选择器，直接使用标签名进行选择 */
	p{
	color:blueviolet
	}
	/* (2)、使用类选择器，使用.class属性定义名称进行选择 */
	.box1{
	color: blueviolet
	}
	.box2{color: blue;}
	/* (3)、使用id选择器，使用#id属性定义名称进行选择 */
	#bd_link{color:blue;}
	#tb_link{color:pink}
	/* (4)、使用层级选择器,注意明确每层 */
	.boxppp p{color: black}
	</style>
	<!-- 3、使用link标签引入外链css文件 -->
	<link rel="stylesheet" href="./wailian.css">
	</head>

	<body>
	<!-- 1、行内式在标签内使用style指定样式-->
	<h1 style="color:brown">1级标题</h1>
	<!-- 2、给p标签使用内嵌式 -->
	<p>文本段落</p>
	<!-- 3、给span标签使用外链式 -->
	<span>文本行标签</span>

	<!-- 选择器的使用 -->
	<!-- (1)、标签选择器直接使用标签进行选择 -->
	<!-- (2)、类选择器 -->
	<div class="box1">
	块标签111
	</div>
	<div class="box2">
	块标签222
	</div>
	<div class="box3">快标签333</div>
	<!-- (3)、id选择器 -->
	<a href="http://www.baidu.com" id="bd_link">百度连接</a>
	<a href="http://www.taobao.com" id="tb_link">淘宝连接</a>
	<!-- (4)、层级选择器 -->
	<div class="boxppp">
	<p>div内部的段落标签</p>
	</div>
	</body>
	</html>

	/* css样式文件后缀为css */
	/* 可在该文件编写css样式代码，在html文件head中用link标签进行引入 */
	/* 使用选择器选择标签进行控制 */
	/* 使用多个样式时需要用;号(英文)隔开 */
	span{
	color:aqua;
	font-size:100px
	}
	.box3{color:brown}

	<!-- 引入jQuery：本地、线上 -->
	<script src="js/jquery-1.12.4.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>jx